Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    8
    Thanks
    0
    Thanked 1 Time in 1 Post

    CSS Horizontal Dropdown menu problem

    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

    Code:
    <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:

    Code:
    #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;
    }

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    <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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •