SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Drop Down Menu ?

    CSS Drop Down Menu ?

    Hi all

    http://www.ttmt.org.uk/menu/

    I'm doing a CSS drop down menu but I think I might have done it wrong.
    The menu works but when I roll over the button with the drop down underneath it(Two in the exmaple) and move on to the drop down menu the button (Two) loses it's background color.

    How can I keep the nav button (Two in the example) selected with the background color when I have rolled on to the drop down menu.

    Also is this the best way to do this? Can I do it better?

    Any help would be greatly appreciated.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
    	<title>untitled</title>
      <style type="text/css">
        *{
          margin:0;
          padding:0;
        }
        ul{
          list-style:none;
        }
        #wrap{
        	width:500px;
        	float:right;
        	margin:50px;
        }
        #nav{
        	border-top:1px solid #999;
        	border-bottom:1px dashed #999;
        	overflow:auto;
        }
    
        #nav #topNav{
        	float:right;
        }
    
        #nav #topNav li{
        	float:left;
        }
        #nav #topNav li a.btn{
        	display:block;
        	text-decoration:none;
        	padding:15px;
        }
        #nav #topNav .btn:hover{
        	background:#eee;
        }
        #nav #topNav li ul{
        	background:#eee;
        	width:180px;
        	position:absolute;
        	left:-999em;
        	z-index:10;
        }
        #nav #topNav li:hover ul{
        	left:auto;
        }
        #nav #topNav li ul li{
        	border-bottom:1px dashed #fff;
        	margin-left:5px;
        	padding:.2em 0em;
        }
        #nav #topNav li ul li a{
        	color:#888;
        	display:block;
        	font:bold 85% "Helvetica Neue", Helvetica, Arial, sans-serif;
        	padding:10px;
        	text-decoration:none;
        	width:180px;
        }
        #nav #topNav li ul li a:hover{
        	color:red;
        }
        #nav #topNav ul li.bottomSub{
        	border:0;
        }
    
      </style>
    </head>
    
    <body>
      
      <div id="wrap">
        <div id="nav">
          <ul id="topNav">
            <li id="homeSelected" ><a href="#" class="btn">One</a></li>
            <li id="Two" ><a href="#" class="btn">Two</a>
              <ul>
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
                <li><a href="#">Four</a></li>
                <li><a href="#">Five</a></li>
              </ul>
            </li>
            <li id="tester" ><a href="#" class="btn">Three</a></li>
            <li id="support" ><a href="#" class="btn">Four</a></li>
          </ul><!--topNav-->
        </div><!--nav-->
      </div><!--wrap-->
      
    </body>
    </html>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Add this rule to your style sheet:

    Code:
    #topNav li:hover {background: #eee;}
    It will cause one little problem, though, which you can fix by altering the value in red:

    Code:
    #nav #topNav li ul li a {
      color: #888888;
      display: block;
      font: bold 85% "Helvetica Neue",Helvetica,Arial,sans-serif;
      padding: 10px;
      text-decoration: none;
      width: 155px;
    }


Bookmarks

Posting Permissions

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