CSS Drop Down Menu?

HTML & CSS
1

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.


<!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

Add this rule to your style sheet:


#topNav li:hover {background: #eee;}

It will cause one little problem, though, which you can fix by altering the value in red:


#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: [COLOR="#FF0000"]155[/COLOR]px;
}