是否有垂直菜单的CSS / JQuery代码段？

Question

我正在寻找与Facebook左侧菜单非常相似的东西。

• 干净而优雅
• 单杠，如果选中了高亮显示

Answer 1

它是一个列表菜单，最多包含3层。在悬停样式中只需更改背景颜色和柚木符合您的规格。这是我用来编程joomla的下拉菜单。当你把它放在一个div。在这里测试http://jsfiddle.net/DnNye/3/它仍然需要一些调整才能完全发挥作用，但这是一个开始。

---

HTML

<div id="navigation">
    <ul>
        <li>Home
            <ul>
                <li>Test1
                    <ul>
                        <li>Test1</li>
                        <li>Test2</li>
                        <li>Test3</li>
                    </ul>
                </li>
                <li>Test2</li>
                <li>Test3</li>
            </ul>
        </li>
        <li>About</li>
    </ul>
</div>

---

CSS

#navigation {width:150px; font-size:12px;}
#navigation ul {margin:0px; padding:0px; background-color:#666;}
#navigation ul li {
    height:25px;
    line-height:25px;
    list-style:none;
    padding-left:10px;
    color:#FFF;
    border-top:#fff solid;
    border-bottom:#fff solid;
    border-width:1px;
    cursor:pointer;
}
#navigation ul li:hover {background-color:#F90; position:relative;}

#navigation ul ul {
    display:none;
    position:absolute;
    left:75px;
    top:5px;
    border:#fff solid;
    border-width:1px;
    background-color:#999;
}
#navigation ul li:hover ul {display:block;}
#navigation ul ul li {border:none; width:150px; float:left; display:inline;}
#navigation ul ul li:hover {text-decoration:underline; border:none;}
#navigation li:hover ul li ul {display:none;}
#navigation ul > ul > ul ul li ul {left:110px; background-color:#0099CC;}
#navigation ul > ul ul li:hover ul {display:block;}

---

JAVASCRIPT对于某些Internet Explorers

// drop down list functionality for Internet Explore
// IE does not support the :hover in anything but links
// just need to duplacate the navigation in css and include .sfHover in place of :hover ex: #navigation ul ul li:hover becomes #navigation ul ul li:hover, navigation ul ul li.sfHover
sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i = 0; i < sfEls.length; i++) {
        sfEls[i].onmouseover = function() {
            this.className += " sfhover";
        };
        sfEls[i].onmouseout = function() {
            this.className = this.className.replace(new RegExp(" sfhover\\b"), "");
        };
    }
};
if (window.attachEvent) { window.attachEvent("onload", sfHover); }