我有一个包含元素的导航栏,其中两个是下拉菜单。我修改了导航栏上元素的大小,但我无法在下拉的元素上执行此操作。当下拉下降时,它太宽,但是当我将鼠标悬停在元素上时,只有一部分是固定宽度"我指定的是突出显示,其余的不是。我希望它们都是100px而侧面没有多余空间,我该怎么做?
代码:
.topnav {
list-style-type: none;
margin: 0 auto;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
align-items: center;
}
.topnav ul {
list-style-type: none;
margin: 0 auto;
}
.topnav li {
float: left;
}
.topnav li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
width: 100px;
}
.topnav li a:hover,
.dropdown:hover .dropbtn {
background-color: #111;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.topnav .dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav .dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}

<div class="topnav">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li class="dropdown"><a href="javascript:void(0)" class="dropbtn">Products</a>
<div class="dropdown-content">
<a href="#">Computers</a>
<a href="#">Tablets</a>
<a href="#">Cell Phones</a>
<a href="#">Wearable Technologies</a>
<a href="#">Accessories</a>
</div>
</li>
<li class="dropdown"><a href="javascript:void(0)" class="dropbtn">Brands</a>
<div class="dropdown-content">
<a href="#">Apple</a>
<a href="#">Samsung</a>
<a href="#">Lenovo</a>
<a href="#">Dell</a>
<a href="#">HP</a>
<a href="#">Sony</a>
<a href="#">Panasonic</a>
<a href="#">Motorola</a>
<a href="#">HTC</a>
</div>
</li>
<li><a href="deals.html">Deals</a></li>
</ul>
</div>
&#13;
JSFiddle:https://jsfiddle.net/29r9d18a/22/
答案 0 :(得分:0)
从min-width: 160px
CSS类中删除.dropdown-content
。
答案 1 :(得分:0)
更改此min-width
的{{1}}并添加.dropdown-content
并添加max-width: 100px;
。
喜欢这个
word-break: break-word;
以下是工作代码。
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: auto;
max-width: 100px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
word-break: break-word;
z-index: 1;
}
&#13;
.topnav {
list-style-type: none;
margin: 0 auto;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
align-items: center;
}
.topnav ul {
list-style-type: none;
margin: 0 auto;
display: inline-block;
-webkit-padding-start: 0;
}
.topnav li {
float: left;
}
.topnav li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
width: 100px;
}
.topnav li a:hover,
.dropdown:hover .dropbtn {
background-color: #111;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: auto;
max-width: 100px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
word-break: break-word;
z-index: 1;
}
.topnav .dropdown-content a {
color: black;
padding: 12px 5px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav .dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
&#13;