我在以下位置为此问题创建了一个jfiddle：JSFiddle显示菜单问题

我正在尝试使用 jquery 和 css3 创建一个很酷的菜单，主要是因为熟悉。我愿意切换到完整的 CSS3，但我不太确定如何做到这一点。 我有几个问题似乎无法解决。代码如下：

JavaScript：

(function ($) {
    $.fn.hoverIntent = function (f, g) {
        // default configuration options
        var cfg = {
            sensitivity: 7,
            interval: 100,
            timeout: 0
        };
        // override configuration options with user supplied object
        cfg = $.extend(cfg, g ? {
            over: f,
            out: g
        } : f);
        // instantiate variables
        // cX, cY = current X and Y position of mouse, updated by mousemove event
        // pX, pY = previous X and Y position of mouse, set by mouseover and polling interval
        var cX, cY, pX, pY;
        // A private function for getting mouse position
        var track = function (ev) {
            cX = ev.pageX;
            cY = ev.pageY;
        };
        // A private function for comparing current and previous mouse position
        var compare = function (ev, ob) {
            ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
            // compare mouse positions to see if they've crossed the threshold
            if ((Math.abs(pX - cX) + Math.abs(pY - cY)) < cfg.sensitivity) {
                $(ob).unbind("mousemove", track);
                // set hoverIntent state to true (so mouseOut can be called)
                ob.hoverIntent_s = 1;
                return cfg.over.apply(ob, [ev]);
            } else {
                // set previous coordinates for next time
                pX = cX;
                pY = cY;
                // use self-calling timeout, guarantees intervals are spaced out properly (avoids JavaScript timer bugs)
                ob.hoverIntent_t = setTimeout(function () {
                    compare(ev, ob);
                }, cfg.interval);
            }
        };
        // A private function for delaying the mouseOut function
        var delay = function (ev, ob) {
            ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
            ob.hoverIntent_s = 0;
            return cfg.out.apply(ob, [ev]);
        };
        // A private function for handling mouse 'hovering'
        var handleHover = function (e) {
            // next three lines copied from jQuery.hover, ignore children onMouseOver/onMouseOut
            var p = (e.type == "mouseover" ? e.fromElement : e.toElement) || e.relatedTarget;
            while (p && p != this) {
                try {
                    p = p.parentNode;
                } catch (e) {
                    p = this;
                }
            }
            if (p == this) {
                return false;
            }
            // copy objects to be passed into t (required for event object to be passed in IE)
            var ev = jQuery.extend({}, e);
            var ob = this;
            // cancel hoverIntent timer if it exists
            if (ob.hoverIntent_t) {
                ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
            }
            // else e.type == "onmouseover"
            if (e.type == "mouseover") {
                // set "previous" X and Y position based on initial entry point
                pX = ev.pageX;
                pY = ev.pageY;
                // update "current" X and Y position based on mousemove
                $(ob).bind("mousemove", track);
                // start polling interval (self-calling timeout) to compare mouse coordinates over time
                if (ob.hoverIntent_s != 1) {
                    ob.hoverIntent_t = setTimeout(function () {
                        compare(ev, ob);
                    }, cfg.interval);
                }
                // else e.type == "onmouseout"
            } else {
                // unbind expensive mousemove event
                $(ob).unbind("mousemove", track);
                // if hoverIntent state is true, then call the mouseOut function after the specified delay
                if (ob.hoverIntent_s == 1) {
                    ob.hoverIntent_t = setTimeout(function () {
                        delay(ev, ob);
                    }, cfg.timeout);
                }
            }
        };
        // bind the function to the two event listeners
        return this.mouseover(handleHover).mouseout(handleHover);
    };
})(jQuery);
$(function () {
    var config = {
        sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)
        interval: 200, // number = milliseconds for onMouseOver polling interval
        over: doOpen, // function = onMouseOver callback (REQUIRED)
        timeout: 200, // number = milliseconds delay before onMouseOut
        out: doClose // function = onMouseOut callback (REQUIRED)
    };
    function doOpen() {
        $(this).addClass("hover");
        $('ul:first', this).css('visibility', 'visible');
    }
    function doClose() {
        $(this).removeClass("hover");
        $('ul:first', this).css('visibility', 'hidden');
    }
    $("ul.dropdown li").hoverIntent(config);
    $("ul.dropdown li ul li:has(ul)").find("a:first").append(" &raquo; ");
    $("ul.dropdown li ul li:has(ul)").find("span:first").append(" &raquo; ");
});

CSS3：

.main_nav {
    background-color:#ffffff;
    text-align:center;
    float:left;
    height:50px;
}
.main_nav ul{
    list-style:outside none none !important;
    text-align: center;
    display: inline;
    width: 80%;
}
/*
    LEVEL ONE
*/
ul.dropdown                         { position: relative; white-space: nowrap;text-wrap: none;}
ul.dropdown li                      { font-weight: bold; float: left;  background: #ffffff; color: #4b2c17; }
ul.dropdown a:hover                 { color: #ffffff; }
ul.dropdown a:active                { color: #ffa500; }
ul.dropdown li a                    { display: block; padding: 4px 8px; border-right: 1px solid #333;
                                      color: #222; }
ul.dropdown li:last-child a         { border-right: none; } /* Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li:hover                { background: rgb(214, 210, 0); color: #ffffff; position: relative; }
ul.dropdown li.hover a              { color: black; }
ul.dropdown li:hover h4             {background: #ffffff;color: #4b2c17;}

/*
    LEVEL TWO
*/
ul.dropdown ul                      { visibility: hidden; position: absolute; top: 100%; left: 0; padding-left: 0px !important;}
ul.dropdown ul li                   { font-weight: normal; background: #ffffff; color: #4b2c17;
                                      border-bottom: 1px solid #222; float: none; }
                                    /* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a                 { border-right: none; width: 100%; display: inline-block; }
/*
    LEVEL THREE
*/
ul.dropdown ul ul                   { left: 100%; top: 0; }
ul.dropdown li:hover > ul           { visibility: visible; }
/*
    LEVEL Four
*/
ul.dropdown ul ul ul                { left: 100%; top: 0; }
ul.dropdown ul ul li:hover > ul         { visibility: visible; }

和 HTML：

<div class="main_nav">
    <ul class="dropdown">
        <li><a href="/main">Home</a></li>
        <li><a href="/edituser">User</a>
            <ul class="sub_menu">
                <li class="subnavhead"><h3>New Users</h3></li>
                <li><a href="/register">Add New User</a></li>
                <li><a href="/validateuser">Validate Users</a></li>
                <li class="subnavhead"><h3>Current Users</h3></li>
                <li><a href="/edituser">Edit User Information</a></li>
            </ul>
        </li>
        <li class="topnav"><a href="#">Head 2</a>
            <ul class="sub_menu">
                <li><a target="new" href="#">Subhead 1</a></li>
                <li class="subnavhead"><h4><span>Section Group</span></h4>
                    <ul class="thirdnav">
                        <li><a href="#">Subgroup head 1</a>
                            <ul class="thirdnav">
                                <li><a href="#">Subgroup item 1</a></li>
                                <li><a href="#">Subgroup item 2</a></li>
                          </ul>
                        </li>
                        <li><a href="#">Subgroup head 2</a>
                           <ul class="thirdnav">
                               <li><span>Subgroup item head 1</span>
                                    <ul class="thirdnav">
                                        <li><a href="#">third level 1</a></li>
                                        <li><a href="#">third level 2</a></li>
                                    </ul>
                               </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

这些代码应该生成一个多级菜单，能够跟踪突出显示的内容;但是，其中有几个异常行为，我目前无法修复。

首先是主导航栏的宽度。 无论我尝试定义的宽度参数如何，我都无法让菜单展开以填充菜单栏，甚至 80%。

第二个是下拉菜单组件上 LI 的宽度。 如您所见，我能够防止行换行，但是如图所示，<li>不会拉伸最长文本的宽度。 除此之外，你会看到亮点不一致，我不知道为什么。 我尝试了多种变体，但没有成功。

最后一个问题是为什么那个愚蠢的>>出现在 sugroup head 2 下的最后一个 html 链接上。 逻辑不符合这一点，但它似乎出现了。

任何帮助将不胜感激！

谢谢！Jon