...

View Full Version : CSS Horizontal Dropdown menu problem



wartfink
02-15-2011, 06:04 AM
This is my first attempt at creating a horizontal dropdown menu using CSS. Below is my html and CSS syle that I have so far. The part I would like to ask for help is the CSS rule that would be applied to the Home, Away and Cancelled Games tab under the main Games tab and how would I get it to show up under the Games main tab? I have tried a rule for #menu-top ul li ul{} and others without success. Any help is really appreciated. Thank you



<div id="menu-top">
<ul>
<li><a href="#" title="Home"><span>Home</span></a></li>
<li><a href="#" title="Games"><span>Games</span></a></li>
<ul>
<li><a href="#" title="HomeGames">Home Games</a></li>
<li><a href="#" title="AwayGames">Away Games</a></li>
<li><a href="#" title="CancelledGames">CancelledGames</a></li>
</ul>
<li><a href="#" title="Special Events"><span>Special Events</span></a></li>
<li><a href="#" title="Events"><span>Events</span></a></li>
</ul>
</div><!--menu-top-->



The CSS:



#menu-top, #header, #wrapper-content, #wrapper-footer {
width: 60%; /*Set page width*/
margin: 0 auto;
text-align: left;
}

#menu-top {
overflow: hidden;
}

#menu-top ul {

margin:0;
padding: 1em 0 0 0;
list-style: none;
font-size: 85%;
float: left;
padding-left: 20px;
}

#menu-top li {
display: inline;
float: left;
}

#menu-top a span {
background: transparent url(images/menuright.png) no-repeat right top;
padding:5px 15px 4px 6px;
color:#5b8fbe;
display: block;
float: left;
cursor: pointer;
}

#menu-top a:hover { background-position:0% -50px; }
#menu-top a:hover span {
background-position:100% -50px;
font-size: 90%;
width: auto;
}

abduraooft
02-15-2011, 09:57 AM
<ul>
<li><a href="#" title="Home"><span>Home</span></a></li>
<li><a href="#" title="Games"><span>Games</span></a></li>
<ul>
<li><a href="#" title="HomeGames">Home Games</a></li>
<li><a href="#" title="AwayGames">Away Games</a></li>
<li><a href="#" title="CancelledGames">CancelledGames</a></li>
</ul>
<li><a href="#" title="Special Events"><span>Special Events</span></a></li>
<li><a href="#" title="Events"><span>Events</span></a></li>
</ul>
Validate your markup and fix the nesting errors in it. Refer http://htmldog.com/articles/suckerfish/dropdowns/ to see how to properly nest unordered lists, to make a drop down effect.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum