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

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？

其次，我在为下拉菜单设置宽度时遇到问题，我希望该宽度与列表项“Produkter”的宽度相同。这是我的 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

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

1. 首先，我为列表项设置了 150 像素的固定宽度。

   ul li {
   float:left;
   width:150px;
   }
   

然后，我将我的下拉菜单定位为绝对(我不知道为什么会这样，如果有人能向我解释一下，我会很高兴)。然后，我给下拉菜单设置了与我的列表项相同的宽度。我还将下拉菜单显示为 block 级元素。在这里:

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

谢谢大家的回答。