I was just saying that you need to create a graphic for the top level menu anchor and show it on rollover but you must make sure that you remove it from the nested list anchors at the same time.
Probably need to change the color when hovering over each subnav item too.
I would go with a text color change as you can’t change the background colour as that would mess the effect up.
I just tested the drop downs in IE and they’re not even working in IE 9 or 10. I think I’m missing something.
For the top level menu anchor (“About” and “Programs”), can I just use a color?
Still open to this :-)? Not getting this for IE or other things at all. Should I just try Suckerfish?
The menu is working in IE8. IE7 had z-index issues but is working. I haven’t checked IE9 but I’ll have a look in a minute.
For the top level menu anchor (“About” and “Programs”), can I just use a color?
It would be easier to use a solid background colour for the top menu but of course you will lose the transparent gradient effect.
Hi,
Here are the revised nav rules (note that some of these rules are for further levels and could be removed but will do no harm).
/*==== Begin Main Nav -- header bottom nav ====*/
#header {
z-index:99
}
ul#nav, ul#nav ul {
margin:0;
padding:0;
list-style-type:none;
}
ul#nav {
top:127px;
right:30px;
list-style-type:none;
font-family:Arial, Helvetica, sans-serif;
font-size:1.2em;
letter-spacing:1px;
position:absolute;
}
ul#nav li {
display:inline;
position: relative;
float:left;
}
ul#nav a {
display:inline;
float:left;
padding:0 20px;
height:38px;
line-height:38px;
text-decoration:none;
}
ul#nav a, ul#nav a:link, ul#nav a:visited {
color: #650000;
}
ul#nav .current a {
color: #FFCB65!important;
background:transparent!important
}
ul#nav a:focus {
outline:0;
color: #650000;
}
/* ----- Drop Downs ----- */
#nav li ul {
position: absolute;
width:200px;
left: -5px;
top: 38px;
margin-left:-999em;
z-index:100;
background: url(http://www.charlotteswebservices.com/temp/http-equinection/http/images2/background-bg-lg.png) no-repeat 0 -25px;
}
#nav li li {
width:200px;
}
/* Styles for Menu Items */
ul#nav li li a {
display: block;
text-decoration: none;
color:#ffffcc;
padding:5px 10px;
height:auto;
line-height:normal;
background:transparent!important;
}
ul#nav li li a:link, ul#nav li li a:visited {
color:#ffc
}
/* commented backslash mac hiding hack \\*/
* html ul#nav li a {
height:1%
}
/* end hack */
/* this sets all hovered lists to red */
#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;
background:#f5c417;
}
/* set dropdown to default */
#nav li:hover li a, #nav li.over li a, #nav li:hover li:hover li a, #nav li.over li.over li a, #nav li:hover li:hover li:hover li a, #nav li.over li.over li.over li a {
color: #ffffcc;
font-size:.55em;
}
ul#nav li li a:hover {
color:#000
}
/* Sub Menu Styles */
ul#nav li:hover ul ul, ul#nav li:hover ul ul ul, ul#nav li.over ul ul, ul#nav li.over ul ul ul {
margin-left:-999em;
}
ul#nav li:hover ul, ul#nav li li:hover ul, ul#nav li li li:hover ul, u#navl li li li li:hover ul, ul#nav li.over ul, ul#nav li li.over ul, ul#nav li li li.over ul {
margin-left:0;
}
/* ----- Columns ----- */
You also need this for IE6.
<!--[if lt IE 7]>
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" over";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" over\\\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<![endif]-->
I think that’s what you were aiming for.
Wow…this is very advanced. Are you or would you consider teaching a Sitepoint class on advanced navigation (there’s another one you did for me). Or, mixed with other advanced elements? I’ve been hoping for a class like that.
How do get the vertical red lines between nav to come down? I tried a margin-top on the “red” class.
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.
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?
This doesn’t work in IE 5 and 6. Guess that’s okay.
Fixed the drop down margin. Looks good.
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.)
Just basic nav. Not advanced nav like this.
Thanks sooo much Paul. I don’t think I’d be able to duplicate w/o a class explaining but looks great!