Welcome to WebmasterWorld Guest from 54.204.100.232

Forum Moderators: not2easy

Message Too Old, No Replies

Trouble making CSS for dropdown menu from <ul> list

   
12:23 am on Mar 15, 2011 (gmt 0)

5+ Year Member



Everything was working fine on this until i added a sub list (class="sub-1") within my menu. Now there is a large space, some non-visible items, and all sorts of other spacing/layout issues. All i am trying to do is have the "sub-1" class stack on top of itself as a drop-down below the "parent" item. I am at a total loss of where even to start. Thanks.

HTML:
<div id="header">
<ul id="nav"><li><a href="/default/">Home</a></li>
<li><a href="/about/">About Us</a>
<ul class="sub-1"><li><a href="/about/frequently-asked-questions/">FAQs</a></li>
<li><a href="/about/history/">History</a></li>
<li><a href="/about/leadership/">Leadership</a></li>
<li><a href="/about/mission-and-purpose/">Mission and Purpose</a></li>
<li><a href="/about/stories/">Stories</a></li>
</ul>
</li>
<li><a href="/school/">School</a>
<ul class="sub-1"><li><a href="/school/general/">General Information</a></li>
<li><a href="/school/location-and-cost/">Location and Cost</a></li>
<li><a href="/school/recommended-resources/">Recommended Resources</a></li>
<li><a href="/school/register/">Register</a></li>
</ul>
</li>
<li><a href="/projects/">Projects</a></li>
<li><a href="/get-involved/">Get Involved</a></li>
<li><a href="/resources/">Resources</a></li>
</ul>
</div>


CSS:

#header ul#nav{list-style-type:none;width:985px;background: url("../images/template/nav_back.png") no-repeat left top;height:79px;padding:0px 0px 0px 15px;margin:0px;}

#header ul#nav li{float:left;display:inline;}

#header ul#nav li a{color:#fff;font-size:20px;text-decoration:none;font-family:"Times New Roman";font-weight:bold;line-height:50px;word-spacing:2px;display:block;padding:0px 25px 0px 25px;}

#header ul#nav li a:hover{background:#006633;}

#header ul#nav li a#menu-active{background:#006633;}


I know that it is best to post code rather than a URL so that is is easy to follow the information in the future, but for ease of response i am providing the current URL in addition to the code:
http://example.com/

THANKS!

[edited by: alt131 at 2:45 pm (utc) on Jul 23, 2011]
[edit reason] Thread Tidy - 404 [/edit]