CSS Drop Down Menu ?

**ttmt** · 12-15-2011 12:18 PM

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>

**html-tutorials** · 12-16-2011 03:53 AM

You will love jQuery after this

Here we go, after your META tag, add the following code:

Code:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $("ul ul li").hover(
            function () { $(this).parent().parent().css('background', '#eee'); }, 
            function () { $(this).parent().parent().css('background', '#ffffff'); } ); });
    </script>

That's it.

Basically, you first add jQuery hosted on Google.
Then, inside "on document ready" (after site has loaded)
You say:
go into every "ul ul li" on the page,
and highlight 2nd parent of it on mouse over
and unhighlight 2nd parent of it on mouse out

$("ul ul li") is the jQuery selector that selects your sub menu
hover() is the jQuery function that works with mouse over and mouse out events on the selected element. So you get

Code:

$("ul ul li").hover(...

Then you provide 2 javascript functions for mouse in and mouse out,
inside those functions put what you want to do each time.

jQuery, yet again to the rescue.

Inside those two functions I use the following code:

Code:

 $(this).parent().parent().css('background', '#eee');

$(this) is just another way of saying "work with what you just selected", hence, it is the "li" in the "ul ul li" sequence from $("ul ul li").

parent() means you basically go up one element.

Because we selected LI, and we go up one time, we get UL (the first parent).

Now we want to grab the parent of THAT parent and we do parent() again!

now.. we are at parent of parent -- which is THE TAB.

Apply css to it using the css() function.

'background' is the style, '#eee' is the highlighted tab color.

Is this the best solution? Christ, I don't know, but it sure is elegant.

Thread: CSS Drop Down Menu ?

Thread Tools

Display

CSS Drop Down Menu ?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions