[BrentisHere]

Hey Guys,

Been a little while since I posted, and that's because I'm going ok at this website stuff

But, I've come across a problem, in my website mockup i had a nav bar that when you rolled over a link it would bring up a sub menu and than when you rollover one of the links in the sub menu it was have a hover effect...

I cannot for the world think of how to word my question but, I have no idea how to get the effect

I can show the code I have for my nav bar if it's needed

Sorry if it's a bit of a doozy question

[IJET]

What exactly was the hover effect and was it using CSS or Javascript? Do you at least have the code for a drop down menu?

[raghav.naganathan]

Quote

in my website mockup i had a nav bar that when you rolled over a link it would bring up a sub menu

Wait...are you talking about accordion controls here?

regards,
Raghav

This post has been edited by raghav.naganathan: 09 December 2012 - 11:58 PM

[BrentisHere]

Hey Guys,

Thanks for the replies I would have replied earlier but, the site goes down randomly?
This is my CSS Code I have, sorry, I forgot to mention this is in CSS

#navigation {
			
position: fixed;
top: 0;
width: 100%;
height: 35px;
			margin: 0;
			padding: 0;
			list-style: none;
			background-color: #2f3336;
			/* Transparent Background */
			background-color: rgba(1, 1, 1, 0.6);
			color: rgba(1, 1, 1, 0.6);
			}
		#navigation ul li
{
display:inline;
height:30px;
float:left;
list-style:none;
margin-left:45px;
position:relative;
}

			#navigation li a
{color:#fff; text-decoration:none;}

#navigation li a:hover
{text-decoration:underline;}

#navigation li ul
{
margin:0px;
padding:0px;
display:none;
position:absolute;
left:0px;
top:35px;
background-color:#2f3336;
/* Transparent Background */
			background-color: rgba(1, 1, 1, 0.6);
			color: rgba(1, 1, 1, 0.6);
}

#navigation li:hover ul
{
display:block;
width:90px;
}

#navigation li li
{
list-style:none;
display:list-item;
width:100%;
display: inline;
}

Just in case
HTML CODE for this

<div id="navigation">
        <ul>
            <li>
            <a href="#">Home</a>
                
            </li>

            <li>
            <a href="#">Graphics</a>
                <ul> <li>Hello</li> <li></li> <li></li> <li></li> </ul> 
            </li>

            <li>
            <a href="#">Edits</a>
                <ul> <li>sub menu item 1</li> <li>sub menu item 2</li> <li>sub menu item 3</li> <li>sub menu item 4</li> </ul>
            </li>

            <li>
            <a href="#">Partners</a>
                <ul> <li>sub menu item 1</li> <li>sub menu item 2</li> <li>sub menu item 3</li> <li>sub menu item 4</li> </ul>
            </li>
        </ul>
    </div>

Excuse the messiness knew to all this....this is how I managed to be able to find everything pretty fast

[IJET]

It's still a little unclear about what "effect" you're going for, but I will assume it's for a background color change. Since those sub-menu items will be navigation items, go ahead and make them empty links for now.

CSS code

#navigation li:hover ul li a:hover
{background: red;}

HTML example:

<a href="#">sub menu item 1</a>

[BrentisHere]

IJET, on 10 December 2012 - 01:05 AM, said:

It's still a little unclear about what "effect" you're going for, but I will assume it's for a background color change. Since those sub-menu items will be navigation items, go ahead and make them empty links for now.

CSS code

#navigation li:hover ul li a:hover
{background: red;}

HTML example:

<a href="#">sub menu item 1</a>

That got part of it, it hovers over the text, I'm looking to make a rectangular type hover effect

similar to this

[IJET]

Looks to me like it's just a border.

#navigation li:hover ul li a:hover
{background: red;border: 5px solid #1e1e1e}

[BrentisHere]

IJET, on 10 December 2012 - 01:25 AM, said:

Looks to me like it's just a border.

#navigation li:hover ul li a:hover
{background: red;border: 5px solid #1e1e1e}

I didn't explain properly...the lighter blue box that is inside that border

[IJET]

Hmm.. looks like the background? Just swap out background: red with whatever color you want. Using #6d7781 will give you that blue color.

[BrentisHere]

IJET, on 10 December 2012 - 01:35 AM, said:

Hmm.. looks like the background? Just swap out background: red with whatever color you want. Using #6d7781 will give you that blue color.

It changes the texts background...I'm having trouble making it all that blue...I'll show you an example



Also, why is my nav bar going across to the right...it's in the container...

This post has been edited by BrentisHere: 10 December 2012 - 01:39 AM

[IJET]

Oh, I see what you were wanting.

#navigation li:hover ul li:hover

instead of ul li a:hover, it's ul li:hover. Should solve that. As for the nav spanning the page, I don't know. You'll have to post the code so I can see what's wrong with it.

This post has been edited by IJET: 10 December 2012 - 01:44 AM

[BrentisHere]

IJET, on 10 December 2012 - 01:43 AM, said:

Oh, I see what you were wanting.

#navigation li:hover ul li:hover

instead of ul li a:hover, it's ul li:hover. Should solve that. As for the nav spanning the page, I don't know. You'll have to post the code so I can see what's wrong with it.

CHAMPION!!!!! that got it, it's just off to the right, Ill show you, should just need position though, I want to make sure and I'll post up the code <3

body {

	font-family: 'Alien league'; line-height: 36px;
	color:#9f9494;
	background: #b9d2f8 url(images/background.jpg);

}


#container {
	position: center;
	width: 900px; margin: 0 auto;

}


#navigation {
			
position: fixed;
top: 0;
width: 100%;

			margin: 0;
			padding: 0;
			list-style: none;
			background-color: #2f3336;
			/* Transparent Background */
			background-color: rgba(1, 1, 1, 0.6);
			color: rgba(1, 1, 1, 0.6);
			}
		#navigation ul li
{
display:inline;
height:30px;
float:left;
list-style:none;
margin-left:45px;
position:relative;
}

			#navigation li a
{color:#fff; text-decoration:none;}

#navigation li a:hover
{text-decoration:underline;
color: #1d1d20;
background: url (images/onbuttonover.jpg);}

#navigation li ul
{
margin:0px;
padding:0px;
display:none;
position:absolute;
left:0px;
top:29.5px;
background-color:#2f3336;
/* Transparent Background */
			background-color: rgba(1, 1, 1, 0.1);
			color: rgba(1, 1, 1, 0.1);
}

#navigation li:hover ul
{
background: #2f3336;
display:block;
width:120px;
}

#navigation li li
{
list-style:none;
display:list-item;
width:100%;
display: inline;
}

#navigation li:hover ul li:hover
{
background: #6d7781;
}

#header {

	padding: 48px 16px 0 16px; overflow: hidden;

}

	#header h1 a {

		display: block; width: 221px; height: 107px; float: left;

		background: url(images/logo.jpg); text-indent: -9999px;

	}

	

	#header ul#nav {

		width: 720px; float: right; margin: 42px 0 0 0;

	}

		#header ul#nav li {

			float: left; list-style: none;

		}

			#header ul#nav li a {

				display: block; width: 155px; height: 34px; margin: 0 0 0 25px; padding: 12px 0 0 0; 

				font-size: 24px; text-transform: lowercase; color: #fff; text-decoration: none; text-align: center;

				text-shadow: 0 3px 3px #333;

			}

				#header ul#nav li a:hover, #header ul#nav li a.active {

					background: url(images/active-nav.png);

				}
				
				#content {

	width: 938px; padding: 16px 16px 60px 16px; overflow: hidden;

	background: url(images/white-trans.png);

	border-radius: 3px;

	-moz-border-radius: 3px;

	-webkit-border-radius: 3px;

}

#content ul#contentbox {

	list-style: none; overflow: hidden;

}

	#content ul#contentbox li {

		float: left; margin: 0 0 0 27px;

	}

		#content ul#contentbox li a {

			display: block; text-indent: -9999px;

		}

			#content ul#contentbox li a.content {

				width: 250px; height: 250px;

				background: url(images/contentbox.jpg);

			}

			#content ul#contentbox li a.contentbox {

				width: 250px; height: 250px;

				background: url(images/ononver_19.jpg);

			}

			#content ul#contentbox li a.contentbox1 {

				width: 250px; height: 250px;

				background: url(images/ononver_21.jpg);

			}
			


			#footer {

	min-height: 159px; overflow: hidden;

	background: url(images/footer-bg.jpg) center 0 no-repeat;

}

	#footer p a.back-top {

		float: right; margin: 14px 24px 0 0;

		font-size: 12px; text-decoration: none; color: #4d74bb;

	}

		#footer p a.back-top:hover {

			color: #234c97;

		}

Didn't know what you needed

[IJET]

It's pushed because you have it set that way in the CSS.

#navigation ul li
{
display:inline;
height:30px;
float:left;
list-style:none;
margin-left:45px;
position:relative;
}

Get rid of the margin-left: 45px and type in text-align: center

Then add this somewhere:

.push {margin-left: 45px}

To your CSS and make your HTML

<li class="push">
            <a href="#">Home</a>
                
            </li>

            <li class="push">
            <a href="#">Graphics</a>
                <ul> <li>Hello</li> <li></li> <li></li> <li></li> </ul> 
            </li>

            <li class="push">
            <a href="#">Edits</a>
                <ul> <li><a href="#">sub menu item 1</a></li> <li><a href="#">sub menu item 1</a></li> <li>sub menu item 3</li> <li>sub menu item 4</li> </ul>
            </li>

            <li class="push">
            <a href="#">Partners</a>
                <ul> <li>sub menu item 1</li> <li>sub menu item 2</li> <li>sub menu item 3</li> <li>sub menu item 4</li> </ul>
            </li>
        </ul>

Still would need the HTML not just the CSS to see why it's running the full width of the page.

This post has been edited by IJET: 10 December 2012 - 02:03 AM

[BrentisHere]

*FIXED*
I had applied a

right: 45px;

To fix the problem from before, it's great now removed it...

This post has been edited by BrentisHere: 10 December 2012 - 02:13 AM

[BrentisHere]

The results:

http://yodesirez.com/

Thank you so much everyone especially IJET that was an insane amount of knowledge and has been saved in 6 different spots on my laptop and sent a copy to my emails