Some of the existing css courses covered navigation if I remember correctly.
How do get the vertical red lines between nav to come down? I tried a margin-top on the “red” class.
Just set the height and line-height of the list element to the same as the anchor and then cancel it out on the submenu.
e.g. Extra code in bold
ul#nav li {
display:inline;
position: relative;
float:left;
[B] height:38px;
line-height:38px;[/B]
}
[B]ul#nav li li{
height:auto;
line-height:normal;
}[/B]
I know this may be way too complicated so if so, that’s okay. The yellow block when nav is hovered over was only going to be for the drop downs. No hover for the others just font turns to yellow when page is active. That too complicated.
The easiest solution is to add a class to the anchors that you don’t want to change colour.
e.g.
<li><a [B]class="nodrop"[/B] href="../registration/index.html">register</a><span class="red">|</span></li>
Add that class to all the top level menu anchors that have no submenus.
Then add this code at the end of the navigation styles.
#nav li:hover a.nodrop,
#nav li.over a.nodrop{background:transparent}
Just set the text colour to what is needed using the class as above when hovered etc.
I see what you mean by using a graphic for the yellow when hovered. Needs to blend more.
I adjusted the drop down margins a bit and increased the size of the drop down bg. Now the top nav yellow isn’t matching the margins of the drop downs - left nav margin sticks out and you can see the yellow “box”. Change the nav outline margin?
You seem to have moved it all out of position a bit.
Change the nav to left:-7px and change the background colour to match the top of the image.
#nav li ul {
background: url("../images2/background-bg-lg.png") no-repeat scroll 0 -25px transparent;
[B]left: -7px;[/B]
etc....
/* this sets all hovered lists */
#nav li:hover a, #nav li.over a, #nav li:hover li:hover a, #nav li.over li.over a, #nav li:hover li:hover li:hover a, #nav li.over li.over li.over a, #nav li:hover li a:hover, #nav li.over li a:hover, #nav li:hover li:hover li:hover a:hover, #nav li.over li li a:hover, #nav li:hover li:hover li:hover li:hover a:hover, #nav li.over li.over li.over li.over a:hover {
color: ffffcc;
[B] background:#f3be0a;[/B]
}
This doesn’t work in IE 5 and 6. Guess that’s okay.
It works fine in IE6 and even works in ie5.5 providing you have added the js code I gave you to the head of the page (or called the external js file via the conditional comments). There will be a problem with the png image though as IE6 doesn’t understand transparent png images as I mentioned ion my earlier post and you should probably swap the png image for a non transparent image for IE6 only (use the * html hack to give ie6 the non transparent image.)