Hover the mouse over the second-level menu. Hover the mouse over the menu.

Hover the mouse over the second-level menu. Hover the mouse over the menu.

1. Layout:

<Div class = "show">  <div class =" drop "style =" display: none; z-index: 80000 "id =" profileMenu "> <ul> <li> <a class =" pass "style =" cursor: pointer "href = '#'> <span> Change Password </span> </a> </li> <a class =" quit "style =" cursor: pointer "href = '#'> <span> exit </span> </a> </li> </ul> </div>

2. js control:

function dropMenu(obj) {        $(obj).each(function () {            var theSpan = $(this);            var theMenu = theSpan.find(".drop");            var tarHeight = theMenu.height();            theMenu.css({ height: 0, opacity: 0 });            var t1;            function expand() {                clearTimeout(t1);                //theSpan.find('a').addClass("selected");                theMenu.stop().show().animate({ height: tarHeight, opacity: 1 }, 200);            }            function collapse() {                clearTimeout(t1);                t1 = setTimeout(function () {                   // theSpan.find('a').removeClass("selected");                    theMenu.stop().animate({ height: 0, opacity: 0 }, 200, function () {                        $(this).css({ display: "none" });                    });                }, 250);            }            theSpan.hover(expand, collapse);            theMenu.hover(expand, collapse);        });    }

I wrote a jquery drop-down menu, where the drop-down content displays the content of the mouse hovering in the navigation

JQ can Write Less ).
In addition, there is a problem in writing that way, that is, you can quickly shake a few times back and forth with the cursor on the menu. When you move the light mark, you will find that the drop-down menu is still on it.
Therefore, you must add a stop before the effect.
$ (Function (){
$ ('. Meun'). hover (function () {$ (this). find ('ul '). stop (true, true). slideDown ();},
Function () {$ (this). find ('ul '). stop (true, true). slideUp ('save ');
})
})

How does CSS determine that the current mouse is suspended on a hyperlink (multi-level menu)

What about your css code? <a> labels have pseudo classes.

A: link {color: # FF0000}/* unaccessed link */
A: visited {color: #00FF00}/* accessed link */
A: hover {color: # FF00FF}/* when there is a mouse hovering over the link */
A: active {color: # 0000FF}/* selected link */