CSS下拉菜单显示不正确。

Question

我在处理css方面遇到了一些问题，真的很沮丧？

HTML:

<div id="nav">
    <ul>
        <li><a href="#">Home</a>
            <ul>
                <li><a href="#">More</a></li>
                <li><a href="#">Hawa</a></li>
            </ul>
        </li>
        <li><a href="#">Resume</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

CSS:

#nav {background: #008080;position:relative;}
#nav ul {list-style:none;display:flex;position:relative;}
#nav ul li {width: 50px;display:inline-table;padding: 10px 20px;position:relative;}
#nav ul li:hover {background:#333;}
#nav ul li:hover > ul {display: block;position:absolute;margin-left:0px;width:100%;}
#nav ul li a{text-decoration:none;font-family:Verdana;color:#fff;}
#nav ul ul {display:none;}
#nav ul ul li {background: #008080;}

我的问题是：

• 我的CSS下拉菜单与li元素没有对齐。

有人能帮我吗？

- Naveen Niraula

---

为锚点添加填充而不是列表，请查看我的更新。 - Gildas.Tambo

Answer 1

使用负边距值 http://jsfiddle.net/5tz0zszy/

我在CSS中做了一点更改。

#nav {
background: #008080;
position:relative;
}
#nav ul {
list-style:none;
display:flex;
position:relative;
}
#nav ul li {
width: 50px;
display:inline-table;
padding: 10px 20px;
position:relative;
}
#nav ul li:hover {
background:#333;
}
#nav ul li:hover > ul {
display: block;
position:absolute;
margin-left:-60px;width:100%;
}
#nav ul li a{
text-decoration:none;
font-family:Verdana;
color:#fff;
}
#nav ul ul {
display:none;
}
#nav ul ul li {
background: #008080;
} 

- Akshay

---

谢谢你的帮助兄弟 :)!! - Naveen Niraula

Answer 2

重置你的CSS *{box-sizing:border-box;padding:0; margin:0;}

给anchors添加内边距，而不是list

演示

*{box-sizing:border-box;padding:0; margin:0;}
#nav {background: #008080;position:relative;}
#nav ul {display:flex;position:relative;}
#nav ul li {list-style:none;float:left;position:relative;}
#nav ul li:hover {background:#333;}
#nav ul li > ul {position:absolute;}
#nav ul li:hover > ul {display: block;}
#nav a{text-decoration:none;font-family:Verdana;color:#fff;display:block;clear:both;padding: 10px 20px;}
#nav ul ul {display:none;position: absolute;left: 0;}
#nav ul ul li {background: #008080;display:block;width:100%;}

- Gildas.Tambo

---

谢谢，伙计，你帮了我！ - Naveen Niraula

Answer 3

尝试这个，你的子菜单列表上有一个“填充”问题。

#nav ul li:hover > ul {
     display: block;
     position:absolute;
     left:0px;
     width:100%;
     padding-left:0px;
}

- Ramiz Wachtler

Answer 4

只需简单添加以下内容：

#nav ul li:hover > ul {
    display: block;
    position:absolute;
    margin-left:0px;
    width:100%;
    left: 0;/*Add this*/
    padding: 0;/*Add this*/
    top: 40px;/*Add this*/
}

同时修改为display: block #nav ul li {width: 50px;display:block;padding: 10px 20px;position:relative;}。检查简历菜单。

fiddle

- Alex Char

---

谢啦，老兄！！不过我用的是 top:100% :)。还是很感激你的！！ - Naveen Niraula