homepage Welcome to WebmasterWorld Guest from 54.161.200.144
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Trouble making CSS for dropdown menu from <ul> list
techtheatre




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

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]

 

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved