Hi,

I'm new to CSS HTML and am looking to create a horizontal drop-down menu solely from HTML and CSS if possible. I have read an article on "A List Apart" but am still stuck. The following is the HTML and CSS i've got so far.


<div id="nav">
<ul>
<li><a href="testproject.html">HOME</a></li>|
<li><a href="about.html">ABOUT ME</a></li>|
<li><a href="nutritional_health.html">NUTRITIONAL HEALTH</a>|
<ul>
<li><a href="nutritional_health.html#whatis">&raquo; What it is</a></li>
<li><a href="nutritional_health.html#how">&raquo; How it can help you</a></li>
</ul>
</li>
<li><a href="recipes.html">RECIPES</a></li>|
<li><a href="pricing.html">PRICING</a></li>|
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div>



#nav {
margin: 0px;
padding: 0px;
width: 800px;
height: 40px;
text-align: center;
font-size :15pt;
font-family: sylfaen, verdana, arial-narrow;
font-weight: normal;
background-image: url('images/bg_navbar.jpg');
border-bottom: 10px solid #CCCCCC;

}

#nav ul {
list-style: none;
display: inline;
margin: 0px;
padding: 0px;
}

#nav ul li {
display: inline;
padding: 0px 3px 0px 3px;
}

#nav ul li a {
text-decoration: none;

}

#nav ul li a:link {
color: #FFFFFF;
}

#nav ul li a:visited {
color: #555555;
}

#nav ul li a:hover, #nav ul li a:active {
border-bottom: 4px solid #008500;
}

#nav ul li ul {
display: none;
position: absolute;
}

#nav ul li ul:hover {
display: block
}


Right now no sub-menu is showing due to the "display:none" but i am also not seeing anything when hovering over the main link. I would appreciate any help.

Your markup is invalid. You need to remove the vertical pipe characters from there as you can't nest anything directly under <ul> except an <li>. It'd be better to use a border-right or some background image to the list elements.

Then change the last selector in your CSS to
#nav ul li:hover ul{
display: block
}

Thanks a lot for that. I'm quite new to this but i think i understand that quite well.

I have replaced the vertical pipe characters with border-right and it looks ok, not the best but ok - and the sub-menu items are appearing below the main link but not as i would like.

They are appearing below the main link but aligned to the far left and inline - as opposed to appearing directly below the main link with each sub-menu item on a separate line.

I have added in the following CSS to make the sub-menu items appear each on a separate line. How do i go about making them appear directly under the main link?


#nav ul li ul li { /*is this the proper syntax??*/
display: block;
text-align: left;
}



I apologise if that is already answered in your last post - if it is i don't understand it.

#nav ul li {
display: inline;
padding: 0px 3px 0px 3px;
position:relative;
}
#nav ul li ul {
display: none;
position: absolute;
left:0;
top:1.5em;
width:20em;
text-align:left;
}

#nav ul li {
display: inline;
padding: 0px 3px 0px 3px;
position:relative;
}
#nav ul li ul {
display: none;
position: absolute;
left:0;
top:1.5em;
width:20em;
text-align:left;
}


Thanks very much for your help - all sorted now.

On final thing - can "left" and "top" only be used after stating "position:absolute"?

On final thing - can "left" and "top" only be used after stating "position:absolute"?
Are you asking about the order of properties under a selector? If so, the answer is No - the order doesn't matter.

Or are you asking about the use of left/right and top/bottom properties in general? These properties work "well" only if the element has got an absolute/fixed position.

Are you asking about the order of properties under a selector? If so, the answer is No - the order doesn't matter.

Or are you asking about the use of left/right and top/bottom properties in general? These properties work "well" only if the element has got an absolute/fixed position.

Thats the one in bold i meant. Was just wondering if those properties can be used/will work without the selector?