导航栏下拉菜单不能正常显示
问题描述：
我希望导航栏上的下拉菜单足够宽，其中的文本可以正常显示，但它受限于鼠标悬停的按钮的大小以激活它。我希望下拉宽度大于按钮的宽度。导航栏下拉菜单不能正常显示
标题在浏览器中显示得很好，所以不太确定为什么它在小提琴中没有对齐。
#center-title {
width: 200px;
font-size: 30px;
color: white;
position: fixed;
left: 50%;
transform: translateX(-50%);
text-align: center;
}
#cog {
width: 20px;
height: 20px;
margin-right: 50px;
margin-top: 15px;
}
#dropdown {
float: right;
position: relative;
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);
}
#dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
#dropdown-content a:hover {
background-color: #f1f1f1
}
#dropdown:hover #dropdown-content {
display: block;
}
nav {
background-color: #2b569a;
width: 100%;
height: 50px;
margin-top: 0;
}<nav>
<div class="center">
<h1 id="center-title"> Blocs </h1>
</div>
<div id="dropdown">
<img id="cog" src="/static/images/cog2.png" alt="" />
<div id="dropdown-content">
<a href="profile.html"> Profile </a>
<a href="settings.html"> Settings </a>
<a href="logs.html"> Logs </a>
<a href="emails.html"> Email list </a>
</div>
</div>
</nav>
答
添加right: 0;到#dropdown-content。
#center-title {
width: 200px;
font-size: 30px;
color: white;
position: fixed;
left: 50%;
transform: translateX(-50%);
text-align: center;
}
#cog {
width: 20px;
height: 20px;
margin-right: 50px;
margin-top: 15px;
}
#dropdown {
float: right;
position: relative;
display: inline-block;
}
#dropdown-content {
display: none;
position: absolute;
right: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0#2);
}
#dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
#dropdown-content a:hover {
background-color: #f1f1f1
}
#dropdown:hover #dropdown-content {
display: block;
}
nav {
background-color: #2b569a;
width: 100%;
height: 50px;
margin-top: 0;
}<nav>
<div class="center">
<h1 id="center-title"> Blocs </h1>
</div>
<div id="dropdown">
<img id="cog" src="/static/images/cog2.png" alt="" />
<div id="dropdown-content">
<a href="profile.html"> Profile </a>
<a href="settings.html"> Settings </a>
<a href="logs.html"> Logs </a>
<a href="emails.html"> Email list </a>
</div>
</div>
</nav>
答
您可以使用显示：而不是使用浮动的和显示器挠性，：inline-block的对于布局。
检查这个片段
. #center-title {
width: 200px;
font-size: 30px;
color: white;
position: fixed;
left: 50%;
transform: translateX(-50%);
text-align: center;
}
#cog {
width: 20px;
height: 20px;
margin-right: 50px;
margin-top: 15px;
}
.center {
margin: auto;
}
#dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
right: 20px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0#2);
}
#dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
#dropdown-content a:hover {
background-color: #f1f1f1
}
#dropdown:hover #dropdown-content {
display: block;
}
nav {
background-color: #2b569a;
width: 100%;
height: 50px;
margin-top: 0;
display: flex;
justify-content: flex-end;
align-content: center;
}<nav>
<div class="center">
<h1 id="center-title"> Blocs </h1>
</div>
<div id="dropdown">
<img id="cog" src="/static/images/cog2.png" alt="" />
<div id="dropdown-content">
<a href="profile.html"> Profile </a>
<a href="settings.html"> Settings </a>
<a href="logs.html"> Logs </a>
<a href="emails.html"> Email list </a>
</div>
</div>
</nav>
</div>希望它可以帮助
你不必为你的'center'类的任何CSS？ –
@BviLLe_Kid给出了这个问题的描述，我不会担心'.center'类缺失。 JSFiddle和粘贴代码不一样更有趣。 – hungerstar
@hungerstar你在哪里看到他们不一样？ –