Subnavigation Menu

liunx

Guest
I'm not sure what kind of problem I'm having with this code, or if I should even be attempting to do this with CSS.

I'm trying to code a subnavigation menu, so that as the user browses deeper into my site the main menu will expand to show new options pertaining to the current page. To keep things simple for the user I'm trying to make the subnav menu a different color from the main menu.

Now, here's where things get sticky. The code I've come up with partially works in IE, almost works in Firefox, and does not work at all in Netscape. I need whatever I post to my website to be at least 90% compatable with these three browsers.

An example can be viewed at
<!-- m --><a class="postlink" href="http://www.test.enlightenedcode.net/resume/">http://www.test.enlightenedcode.net/resume/</a><!-- m -->


<div class="subnav">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.enlightenedcode.net/">Home</a></li>
<div class="doublesub">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.php?content=objective">Objective</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.php?content=skills">Skills</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.php?content=awards">Awards</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.php?content=education">Education</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.php?content=experience">Experience</a></li>
</ul>
</div>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.enlightenedcode.net/links/">Links</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.enlightenedcode.net/contact.php">Contact</a></li>
</ul>
</div>



.subnav {
background-color : #333333;
border : 2px solid #999999;
width : 100%;
margin-top : 0px;
margin-right : 0px;
margin-bottom : 15px;
text-align : center;
}
.subnav ul {
list-style-type : none;
margin : 0;
padding : 0;
border : 2px none inherit;
}
.subnav li {
margin : 0;
padding : 0.25em 0.5em 0.25em 1em;
border-top : 1px solid #999999;
width : 100%;
display : block;
}
html > body .subnav li {
width : auto;
}
.subnav li:first-child {
border : medium none inherit;
}
.subnav li:hover {
background-color : #666666;
}
.doublesub {
background-color : #000000;
border : 2px solid #999999;
width : 100%;
margin-top : 0px;
margin-right : 0px;
margin-bottom : 0px;
text-align : center;
}
.doublesub ul {
list-style-type : none;
margin : 0;
padding : 0;
border : 2px none inherit;
}
.doublesub li {
margin : 0;
padding : 0.25em 0.5em 0.25em 1em;
border-top : 1px solid #999999;
width : 100%;
display : block;
}
html > body .doublesub li {
width : auto;
}
.doublesub li:first-child {
border : medium none inherit;
}
.doublesub li:hover {
background-color : #666666;
}I'm confused as to what problem you are having. :confused: It appears as a different color for me in FF, but what exactly do you want. And yes, you should be doing this with CSS, there is no better way. :pYes, I think I can get it to work fine in FireFox. Unfortunately, most of the world doesn't even know what a FireFox is (if you get my drift).

As I stated, my website needs to be cross-platform-compatible. That means, at the very least, I need it to work with Internet Explorer and Netscape Navigator.Ah, I see. Well, IE will require you to set your padding for your subnav li to 0. Out of curiosity, why are you using em's for padding? They're relative units, and (I thought) best used for font size, while px's would be better for padding, or (if you need) percentages instead of em.I need the text to remain horizontally and vertially centered in each li. Will removing the padding affect that?text-align:center; vertical-align:middle;

Should align your text as wanted, and the padding should no longer be necessary.Thank you. Then how do I get the doublesub class to size propperly in Internet Explorer?Say it was a width that wasnt sizing then you would do this

width:120px !important;
width:130px;

The top value will be read by standards compliant browsers the other read by IE.Originally posted by sharkey
Say it was a width that wasnt sizing then you would do this

width:120px !important;
width:130px;

The top value will be read by standards compliant browsers the other read by IE.
Also note that IE6 will read the !important value according to standard. I'm not sure about IE/Mac.Originally posted by MstrBob
why are you using em's for padding? They're relative units, and (I thought) best used for font size, while px's would be better for padding, or (if you need) percentages instead of em.
I like em for padding because the space between objects remains relative with font size changes. Though in this case, changing the line height to create a taller box would work the same way.The subnavigation menu is now working great! :D Thanks for the help, everyone!
Feel free to preview the end result your suggestions at
<!-- m --><a class="postlink" href="http://www.test.enlightenedcode.net/resume/I'd">http://www.test.enlightenedcode.net/resume/I'd</a><!-- m --> make the anchors display:block; in that menu, so that you don't have to click on the text for the link to work, you could just click anywhere in the nav button.
 
Back
Top