I am currently coding a navigation bar where when the links are hovered, the background-color of the -element changes. Currently, the background-color in the navigation bar's dropdown menu does not cover the entire "box".
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: black;
}
ul li {
display: inline-block;
position: relative;
background-color: black;
}
ul li a {
display: block;
color: white;
text-decoration: none;
text-align: center;
margin: -left:0;
padding: 15px 25px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
ul li a:hover {
background-color: #333;
}
ul li ul#dropdowncontent {
display: inline-block;
position: absolute;
text-align: center;
min-width: 100%;
font-size: 70%;
z-index: 999;
width: 90px;
}
<ul>
<li><a href="#">Produkter</a>
<ul id="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>
You can also take a look at the code in this Jsfiddle: https://jsfiddle.net/fdvcmnx6/
答案 0 :(得分:1)
将下拉列表项设置为display: block
。
#dropdowncontent li {
display: block;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: black;
}
ul li {
display: inline-block;
position: relative;
background-color: black;
}
ul li a {
display: block;
color: white;
text-decoration: none;
text-align: center;
margin: -left:0;
padding: 15px 25px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
ul li a:hover {
background-color: #333;
}
ul li ul#dropdowncontent {
display: inline-block;
position: absolute;
text-align: center;
min-width: 100%;
font-size: 70%;
z-index: 999;
width: 90px;
}
/* Additional */
#dropdowncontent li {
display: block;
}
<ul>
<li><a href="#">Produkter</a>
<ul id="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>
答案 1 :(得分:1)
设置下拉列表width:100%
#dropdowncontent li {
display: block;
}