Question

我有一个由HTML中的无序列表组成的导航栏。在我的列表中，我有另一个嵌套列表，它作为下拉菜单行动（或应该行动）。我会让标记说明一切：

<ul>
    <li><a href="#">Produkter</a>
        <ul class="dropdowncontent">
            <li><a href="#">Moderkort</a></li>
            <li><a href="#">Processorer</a></li>
            <li><a href="#">Hårddiskar</a></li>
            <li><a href="#">Grafikkort</a></li>
        </ul>
    </li>
    <li><a href="#">Butiker</a></li>
    <li><a href="#">Kontakt</a></li>
    <li><a href="#">Vanliga frågor</a></li>
</ul>

首先，我想知道我是否应该使用一个类（我目前正在做的），或者我是否应该使用ID？

其次，我有一个问题，就是给我的下拉菜单一个宽度，我希望它与list-item＆＃34; Produkter＆＃34;的宽度相同。这是我的CSS：

body {
margin:0;
font-family:Arial, Helvetica, sans-serif;
}

ul {
list-style-type:none;
margin:0;
padding:0;
width:100%;
overflow:hidden;
background-color:black;
}

ul li {
float:left;
}

ul li a {
display:block;
color:white;
text-decoration:none;
text-align:center;
padding:14px 16px;
-webkit-transition-duration:0.4s;
transition-duration:0.4s;
}

ul li a:hover {
background-color:#333;
}

ul li ul.dropdowncontent {

}

请注意，下拉菜单（嵌套无序列表）的CSS选择器为空。这是因为我根本不知道如何设计它。

非常感谢帮助。真诚的，马克斯。

Answer 1

我设法解决了我自己的问题，但我仍然想要一些意见。这就是我所做的：

首先，我给我的列表项目固定宽度为150px。
```
ul li {
float:left;
width:150px;
}
```

然后，我将我的下拉菜单定位为绝对（我不知道为什么会这样，如果有人请向我解释这一点，我会非常高兴）。然后，我给下拉菜单提供了与list-items相同的宽度。我还将下拉菜单显示为块级元素。这是：

ul li ul.dropdowncontent {
position:absolute;
display:block;
width:150px;
font-size:80%;
}

谢谢大家的回答。

Answer 2

尝试使用CSS代码，无需更改html结构。

body {
margin:0;
font-family:Arial, Helvetica, sans-serif;
}

ul {
list-style-type:none;
margin:0;
padding:0;
width:100%;
background-color:black;
min-height: 46px;
}

ul li {
float:left;
position: relative;
}

ul li a {
display:block;
color:white;
text-decoration:none;
text-align:center;
padding:14px 16px;
-webkit-transition-duration:0.4s;
transition-duration:0.4s;
}

ul li a:hover,
ul li:hover > a {
background-color:#333;
}

ul li ul.dropdowncontent {
position: absolute;
top: 100%;
left: 0;
width: 100%;
display: none;
background-color: #333;
min-width: 150px; // Added otherwise only with parent width dose not possible to show entire link text.
}
ul li:hover > ul.dropdowncontent {
display: block;
}

如何为我的下拉菜单提供父<li> -element的继承宽度？

2 个答案: