Kinda as the title states, Im trying to create a very simple drop menu, in total my main nav has 6 buttons, but when the FAQ button is hovered over, a drop down menu should appear to list 2 additional pages.
And another thing, Ive read in previous posts about certain individuals disliking the use of supurfluous <div> tags, the most common being mummifying the <ul>NAV</ul> in one. Well how does one go about centrally aligning the nav buttons say in a 960px width content box, so you will have a nice enough margin between each button BUT more importantly have equal distances to the left/right edges of the first/last buttons relative to the parent container they are situated in ? Its easy enough to do when you have a div wrapping around the whole NAV as you can just nudge the main UL to whatever you need too, but remove that div and Im stumped lol ?
But this technique is not w/o its draw back, requiring hacks for legacy IE, for example.
about divs around UL> I am against those too. but I take into consideration that sometimes itâs what you NEED TO DO.
Straying off the topic slightly for a second. Imagine you wanted a fixed width page with 4 sections ( head, nav, content, footer) and that the side margin ( the part outside the fixed width) differed in color or bg⌠also that all section are fluid in height ( as itâs most often should be)âŚ
you NEED to wrap other block element tags ( be it DIVs or ULs, etc) to achieve this effect. So really what itâs being said about wrapping ULs is about the superfluous use of a DIV around a UL, whose style could have been incorporated to the UL itself.
as for the rest this should solve your quandary:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type=text/css>
[COLOR="DarkGreen"] ul, li {margin:0; padding:0;}[/COLOR]
ul#navMain {
width:960px;
background-color:#8b8b8b;
height:40px;
list-style:none;
[COLOR="DarkGreen"] text-align: center;
padding: .25em 0;[/COLOR]
}
[COLOR="DarkGreen"]#navMain li{
display:inline-block;
position: relative;
}
#navMain li:hover ul{
display: block;
}[/COLOR]
#navMain a{
[COLOR="DarkGreen"] display:block;[/COLOR]
padding:0.5em 0.75em;
background-color:#fff;
color:#000;
text-decoration:none;
font-size:0.9em;
margin:0.25em 1em 0 0.25em;
-moz-border-radius:0.5em;
-webkit-border-radius:0.5em;
-o-border-radius:0.5em;
border-radius:0.5em;
}
[COLOR="DarkGreen"]#navMain li li{
display:block;
margin-top:.25em;
}
#navMain li li a{
background-color:orange}[/COLOR]
/*not sure if this is the right way of going about it, because I cant get it back*/
#navMain ul{
display:none;
[COLOR="DarkGreen"] position: absolute;
top:100%;
left:0;
margin-top: -2px;
width:180px[/COLOR]
}
</style>
</head>
<body>
<ul id="navMain">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Me</a></li>
<li id="faq"><a href="sports_massage_body_massage_faq.html">FAQ</a>
<ul id="subNav">
<li><a href="sports_massage_faq.html">Sports Massage FAQ</a></li>
<li><a href="body_massage_faq.html">Body Massage FAQ</a></li>
</ul>
</li><!--ends main FAQ-->
<li><a href="sports_body_massage_prices.html">Prices</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</body>
</html>
My changes are highlighted in green. Hope that helps.
Thanks for that Dresden, I used the code in a new html doc to test and it works just great
Ive applied the code to my own Navigation, and it works to a certain extent, when you hover over the FAQ page the drop down menu appears, but 9/10 if you try and select 1 of the 2 pages from this drop down menu it dissapears as soon as you move your mouse off the main FAQ button.??
Ive tried racking my head around this as I thought you might be able to possibly use the :after pseudo class on something but that failed miserabley, so if anybody else could suggest a fix, Id be most appreciative - Thankyou
p.s (ignore the colours being used - there just so I can see element surface areas id anything overlaps/underlaps etc)
Itâs because on â#mainNav ulâ you give top:100% which will move it completely down from the <li>, and THEN you add .25em of top margin which will make the dropdown not even touching the <li> which means the mouse canât get to the dropdown because itâll disappear before it reaches it!
