Question

请看一下这个小提琴：

CODES：

HTML

 <nav id="navigation">
                    <ul class="menu">
                        <li><a href="#">home</a></li>
                        <li><a href="#">about</a></li>
                        <li><a href="#">products</a></li>
                            <ul>
                                <li><a href="#">Line 1</a></li>
                                <li><a href="#">Line 2</a></li>
                                <li><a href="#">Line 3</a></li>
                                <li><a href="#">Line 4</a></li>
                                <li><a href="#">Line 5</a></li>
                            </ul>
                        <li><a href="#">help</a></li>
                        <li><a href="#">join us</a></li>
                        <li><a href="#">contact</a></li>
                     </ul>
</nav>

CSS：

#navigation{
float: left;
list-style: none;
font-family: Arial;
font-size: 20px;
position: absolute;
}

#navigation li{
list-style: none;
float:left;
padding-left: 28px;
}

#navigation ul ul{
    left: 0;
    top: 100%;
    position: absolute;
    float: none;
    list-style: none;
}

#navigation ul ul li{
    display: none;
    left: 0;
    float: none;
    z-index: 1000;
}

#navigation ul li:hover > ul{
    display:block;
}

如您所见，这里发生了两个主要问题：

1 - 当我将鼠标悬停在＆＃34;产品＆＃34;上时，子菜单不显示。

2 - 即使它出现，子也没有正确定位。

请帮忙！

Answer 1

您必须隐藏ul而不是li元素。对于定位，您必须在position: relative上设置#navigation li。

#navigation {
    float: left;
    list-style: none;
    font-family: Arial;
    font-size: 20px;
    position: absolute;
}
#navigation li {
    position: relative;
    list-style: none;
    float:left;
    padding-left: 28px;
}
#navigation ul ul {
    display: none;
    left: 0;
    top: 100%;
    width: 6em;
    position: absolute;
    float: none;
    list-style: none;
}
#navigation ul ul li {
    left: 0;
    float: none;
    z-index: 1000;
}
#navigation ul li:hover > ul {
    display:block;
}

https://jsfiddle.net/wd9wj7oe/5/

Answer 2

下拉菜单中的标记错误

而不是

<ul>
   <li>item 1</li>
   <li>item 2</li>
     <ul>
        <li>subitem 1</li>
        <li>subitem 2</li>    
        <li>subitem 3</li>
     </ul>
   <li>item 3</li>
</ul>

到

<ul>
       <li>item 1</li>
       <li>item 2
         <ul>
            <li>subitem 1</li>
            <li>subitem 2</li>    
            <li>subitem 3</li>
         </ul>
       </li>
       <li>item 3</li>
    </ul>

ul{
    padding: 0;
}

#navigation {
    float: left;
    list-style: none;
    font-family: Arial;
    font-size: 20px;
    position: absolute;
}
#navigation li {
    list-style: none;
    float:left;
    padding-left: 28px;
    position: relative;
}
#navigation ul li:hover > ul {
    display: block;
}
#navigation ul ul {    
    position: absolute; left: auto;  top: 100%;    
    list-style: none;
    display: none;    
    z-index: 1000;
}
#navigation ul ul li {    
    float: none;    
    padding: 0;
    
}

<nav id="navigation">
    <ul class="menu">
        <li><a href="#">home</a>

        </li>
        <li><a href="#">about</a>

        </li>
        <li><a href="#">products</a>

        
        <ul>
            <li><a href="#">Line 1</a>

            </li>
            <li><a href="#">Line 2</a>

            </li>
            <li><a href="#">Line 3</a>

            </li>
            <li><a href="#">Line 4</a>

            </li>
            <li><a href="#">Line 5</a>

            </li>
        </ul>
        </li>
        <li><a href="#">help</a>

        </li>
        <li><a href="#">join us</a>

        </li>
        <li><a href="#">contact</a>

        </li>
    </ul>
</nav>

水平下拉菜单不起作用

2 个答案: