Question

我有一个菜单，当我悬停下拉时，我跟着this 和this但不幸的是我得到的结果不同于预期..我得到列表但它显示为水平线而不是垂直，就像这里的例子是我添加的代码，以便下拉

css
ul # menu li  ul .submenu{
    display:none;
}
ul # menu li : hover ul .submenu{
    display:block;
}

这是html

<div id="menu">
                        <ul id="menu-list">
                            <li id=""><a href="#">Home</a></li>
                            <li id="">
                                <a href="#">Menu</a>
                                <ul class="sub-menu">
                                    <li><a href="#">Sub Menu 1</a></li>
                                    <li><a href="#">Sub Menu 2</a></li>
                                    <li><a href="#">Sub Menu 3</a></li>
                                    <li><a href="#">Sub Menu 4</a></li>
                                </ul>
                            </li>
                            <li id=""><a href="#">Menu</a></li>

                            <li id=""><a href="#">Menu</a></li>
                            <li id=""><a href="#">Menu</a></li>
                        </ul>
                </div>

Answer 1

你走了：

Updated Fiddle

只是微小的变化。制作UL id = "menu"

                       <ul id="menu">
                        <li id="home"><a href="#">Home</a></li>
                        <li id="townoffice">
                            <a href="#">Menu</a>
                            <ul class="sub-menu">
                                <li><a href="#">Sub Menu 1</a></li>
                                <li><a href="#">Sub Menu 2</a></li>
                                <li><a href="#">Sub Menu 3</a></li>
                                <li><a href="#">Sub Menu 4</a></li>
                            </ul>
                        </li>
                        <li id="busines"><a href="#">Menu</a></li>

                        <li id="residents"><a href="#">Menu</a></li>
                        <li id="tourists"><a href="#">Menu</a></li>
                    </ul>

Answer 2

<强> HTML

<ul id="nav" class="sixteen columns">
    <li><a href="index.html">Home</a>

    </li>
    <li><a href="#">Portfolio</a>

        <ul>
            <li><a href="asia.html">Asia</a>

                <ul>
                    <li><a href="#">Korea</a></li>
                    <li><a href="#">China</a></li>
                    <li><a href="#">Japan</a></li>
                </ul>
            </li>
            <li><a href="europe.html">Europe</a>

                <ul>
                    <li><a href="#">France</a></li>
                    <li><a href="#">Germany</a></li>
                    <li><a href="#">Italy</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

<强> CSS

#nav {
    width:800px;
    margin:30px 50px;
   padding: 0;
    float:left;
}
#nav li {
    list-style: none;
    float: left;
    padding:0 10px;
   background-color:#367FB3;
    color:white;
}


#nav li a:hover {
   background-color:#52baff;
    color:#fff;
}
//daf adf
/*--temp--*/
 #nav ul ul li {
    clear:left;
}
#nav ul ul {
    position:absolute;
    left:14em;
    top:0;
}
#nav ul ul li a {
    display:block;
    padding: 3px 15px;
    color: #242424;
    text-decoration: none;
    font-size:13px;
    font-family:"Lato" !important;
}
/*--end temp--*/
 #nav li a {
    display: block;
    padding: 3px 15px;
    color: #242424;
    text-decoration: none;
    font-size:13px;
    font-family:"Lato" !important;
}
#nav a:hover {
    color:#367FB3;
}
#nav a:active {
    color:#367FB3;
}
#nav li ul {
    display: none;
    width: 14em;
    /* Width to help Opera out */
    background-color:transparent;
    z-index:666;
}
#nav li:hover ul, #nav li.hover ul {
    display: block;
    position: absolute;
    margin:0px -10px;
    padding:0px;
}
#nav li:hover ul ul {
    display:none;
}
#nav li ul li:hover ul {
    display:block
}
#nav li:hover li, #nav li.hover li {
    float: none;
    line-height:30px;
}
#nav li:hover li a, #nav li.hover li a {
    background-color:#367FB3;
    color:#fff;
    font-size:13px;
    font-family:"Lato" !important;
}
#nav li li a:hover {
    background-color:#52baff;
    color:#fff;
}

<强> FIDDLE

菜单悬停下拉列表

2 个答案: