Hello I have a web nav bar that I would like to make valid through the http://validator.w3.org/.
I would also like it to be functional in all browsers, however in IE 7 I noticed it does not function the same. Any ideas? By the way the reason I want to use it is because it was the only CSS web nav bar that I could find. Rather not use any JS, just CSS.
here is a link to the menu bar:
Menu
Without a top coordinate set on the dropdown menu, browsers must guess where to place it. If you set top:100%; on “ul#navlist li:hover ul#subnavlist” you will see everything aligns (though ti’s for the worse)
Now to patch stuff up…
Add in these rules
ul#subnavlist li{height:1%;/*haslayout*/}
Another thing, you need to remove the top margin set on ul#subnavlist. You can just set an independant rule overriding it (assuming it has enough weight to it)
ul#navlist li:hover ul#subnavlist{
display: block;
position: absolute;
font-size: 8pt;
padding: 0px;
border-radius:2px;
background:#999;
border:#777 thin 2px;
margin:[B]0px[/B] 0 0 1px;/*ul list margins*/
left:0;
top:100%;
}
Once that margin is set to 0 and the haslayout is added, it’ll be all good.
EDIT-Just retried in FF, IE alone needs that margin-top set to 0.
You can try *+html ul#subnavlist{margin-top:0;}. It won’t validate however.
The only HTML validation errors is because you have a <ul> and an <li> with the same ID on it.
You can try *+html ul#subnavlist{margin-top:0;}. It won’t validate however.
Hi Ryan,
Actually the * html & *+html hacks do validate for those who are concerned with that.
Good to see you back in the forums!
Oh, I assumed it wouldn’t have. Looking back it was silly of me to assume otherwise. Derp! That’s what you get for being gone from the web so long.
Good to see you too! I actually smiled a bit when I saw it was you who replied.
Thank you Ryan for helping me fix the menu
The only HTML validation errors is because you have a <ul> and an <li> with the same ID on it.
So should I change something? I thought it was okay to have li’s or ul’s with a class? Not sure why that would be an error?
thanks rayzur for validation info
However, I have two other problems in IE7:
the header link nav is being cut in half see attachment
the drop down is being pushed behind the slider
And lastly is this just a waste of life to try and make a CSS only menu work for our site?
Hi,
You don’t need those hacks just do it right from the start 
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
/**************************************************************************************************************************************/
/********************************************************navBar*********************************************************************/
ul#navlist {
font-family: Helvetica, Arial, sans-serif;
list-style:none;
margin:0;
padding:0;
position:relative;
z-index:999;
}
ul#navlist a {
font-weight: bold;
text-decoration: none;
}
ul#navlist li:hover ul {
display: block;
position: absolute;
font-size: 8pt;
padding: 0px;
border-radius:2px;
background:#999;
border:1px solid #777;
margin:0 0 0 1px;/*ul list margins*/
left:0;
top:100%;
z-index:1000;
}
ul#navlist li {
text-align:left;
float:left;
position:relative;
list-style-type: none;
}
ul#navlist li a {
color:#977082;
background-color: #fff; /*liBackgrounds*/
padding: 8px 16px; /*wordPadding*/
border: 1px rgb(252,252,252) solid;/*mainBoxBorder*/
font-size:12px;
float:left;
}
ul#navlist ul li a {
color: #977082;
background-color:none; /*liBackgroundMainColor*/
margin: 2px 2px; /*wordPadding*/
font-size:11px;
float:none;
}
#navListContainer {
margin:21px 0 0 0;
width:529px;
float:left;
}
ul#navlist li:hover > a {
color: #F172A7;
background-color:#777;/*highlights the LI*/
}
ul#navlist li a:active {
color:#cccccc;
background-color:#555;/*colorOnClick*/
}
ul#navlist ul {
padding:0 0 0 12px;
display: block;
position: absolute;
font-size: 8pt;
padding: 0px;
border-radius:2px;
background:#999;
border:1px solid #777;
margin:8px 0 0 1px;/*ul list margins*/
left:0;
top:100%;
margin-left:-999em
}
ul#subnavlist li {
font-size:14px;
float: none; /*wordPadding*/
}
ul#subnavlist li a {
padding: 0;
margin: 0;
}
/*codeAdded****/
ul#navlist li:hover ul {
margin-left:0;
}
ul#navlist li:hover ul li a {
display: block;
width:12em;/*widthOfLI*/
border: none;
padding:7px 7px 7px 12px;
}
ul#navlist li:hover ul li a:before { content: " > "; }
</style>
</head>
<body>
<div id="navListContainer">
<ul id="navlist">
<li id="active"><a href="/shop-online">SHOP</a>
<ul>
<li class="subactive"> <a class="hdrNavLink" href="#">prod1</a></li>
<li><a class="hdrNavLink" href="#">prod1</a></li>
<li><a class="hdrNavLink" href="#">prod1</a></li>
<li><a class="hdrNavLink" href="#">prod1</a></li>
<li><a class="hdrNavLink" href="#">prod1</a></li>
<li><a class="hdrNavLink" href="#">prod1</a></li>
<li><a class="hdrNavLink" href="#">prod1</a></li>
<li><a class="hdrNavLink" href="#">prod1</a></li>
<li><a class="hdrNavLink" href="#">prod1</a></li>
</ul>
</li>
<li><a href="/lookbook">SECOND</a>
<ul>
<li class="subactive"> <a class="hdrNavLink" href="#">prod1</a></li>
<li><a class="hdrNavLink" href="#">prod1</a>
</ul>
</li>
<li><a class="hdrNavLink" href="#">THIRD</a></li>
<li><a class="hdrNavLink" href="#">FOURTH</a></li>
</ul>
</div>
</body>
</html>
You also had an errand list tag in there that was invalidly nested so I removed it. IE7 needs the anchors to be floated to behave properly on the top level.
Ids are unique and there can only be one per page. Use classes if you need re-usable styles. You don’t actually need to add classes to submenus because they are unique by context and can be reached from the main parent.
Don’t use the keyword “thin” as it means different things to different browsers as the exact width is not defined in the specs and some browsers are 1px different quite legitimately. Just use dimensions and they will be exact e.g. border:1px solid #000.
If the slider is JS based then you need to address the parent element that holds the nav (assuming its not in the same div as the nav) and then apply position:relative to the parent if it isn’t positioned already and then apply a high z-index (higher than the slider has).
If the nav and slider are siblings then just ensure the nav has a high z-index.
ul#navlist {
font-family: Helvetica, Arial, sans-serif;
list-style:none;
margin:0;
padding:0;
position:relative;
z-index:999;
}
In IE7 it is ultimately the positioned parent that dictates the stacking context because positioned elements automatically get a stacking index of zero in iE7 when they should actually be auto (which ie7 doesn’t understand).
I gotta be honest, I only have one word. “Beautiful”
Thank you Paul O’B
I do have one last question, what do you think about using this on a high traffic site, would you foresee and problems?
I forsee none at all.
What kind of issues would you “think” could happen?
With CSS, there is no way a site having a lot of traffic could cause issues.
CSS menus can have accessibility issues, but that’s a different issue altogether, not relevant to traffic concerns.
I really believe you’ve completely over-thought the solution to your issue here… You’ve got div for no reason, multiple classes for no reason (big tip, if every element inside a container is getting the same class, NONE of them need classes), and a whole slew of unnecessary/redundant CSS – mind you, pure CSS menus are by definition filled with redundancies, but still…
You’ve also got conflicting metrics in there… px paddings, pt fonts, em heights by inheritance… it’s just asking for it to fail.
Try this on for size:
screen.css
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
margin:0;
padding:0;
}
img,fieldset {
border:none;
}
body {
font:normal 85%/150% arial,helvetica,sans-serif;
}
#navList {
list-style:none;
position:relative;
height:2.5em;
font-weight:bold;
}
#navList li {
position:relative;
float:left;
zoom:1;
overflow:hidden;
}
#navList a {
display:block;
zoom:1;
padding:0.5em 1em;
text-decoration: none;
color:#977082;
background:#FFF;
}
/*
It sucks to have to repeat the colors like this, but it keeps
the inheritance of the menu in proper order
*/
#navList li:hover a {
color:#F172A7;
background:#999;
}
#navList li a.current {
color:#000;
}
#navList li:hover li a {
color:#977082;
background:#FFF;
}
#navList li:hover li .current {
color:#000;
}
#navList li li:hover a {
color:#F172A7;
background:#999;
}
#navList li li a {
border:solid #777;
border-width:0 2px 2px 0;
}
#navList li ul {
position:absolute;
top:2.5em;
width:12em;
border:solid #777;
border-width:2px 0 0 2px;
}
#navList li ul ul {
top:0;
left:12em;
}
#navList li:hover {
overflow:visible;
}
#navList li li {
float:none;
}
template.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<title>
Menu Demo
</title>
</head><body>
<ul id="navList">
<li>
<a href="/shop-online" class="current">SHOP</a>
<ul>
<li><a class="current" href="#">prod1</a></li>
<li><a href="#">prod1</a></li>
<li><a href="#">prod1</a></li>
<li><a href="#">prod1</a></li>
<li><a href="#">prod1</a></li>
<li><a href="#">prod1</a></li>
<li><a href="#">prod1</a></li>
<li><a href="#">prod1</a></li>
<li><a href="#">prod1</a></li>
</ul>
</li>
<li>
<a href="/lookbook">SECOND</a>
<ul>
<li><a href="#">prod1</a></li>
<li><a href="#">prod1</a></li>
</ul>
</li>
<li><a href="#">THIRD</a></li>
<li><a href="#">FOURTH</a></li>
</ul>
</body></html>
Should work just fine all the way back to IE7, and has a pretty good chance of working in IE6 (untested) if you throw Peterned’s CSShover3.htc at it.
Looks good Jason, you may want to remove the markers on all the nested lists.
#navList li ul {
position:absolute;
top:2.5em;
width:12em;
border:solid #777;
border-width:2px 0 0 2px;
list-style:none;
}
Oops, good catch. What I get for making a drive-by post from the laptop before I even have my morning wake-up juice.