Html 如何使我的水平导航栏成为下拉菜单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17666290/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make my horizontal navigation bar a drop down menu?
提问by user2585434
I've tried making horizontal drop down navigation bars following tutorials, however they are never centered and I can't figure out how to center them. I tried going in the opposite direction and centering my navigation bar first, and then attempting to make it a drop down menu, though this seems to throw everything off. This is the code I have.
我试过按照教程制作水平下拉导航栏，但是它们从来没有居中，我不知道如何将它们居中。我尝试朝相反的方向前进并首先将导航栏居中，然后尝试将其设为下拉菜单，尽管这似乎将所有内容都抛在了脑后。这是我的代码。
EDIT: The problem I am having is that the submenu is displayed when the page is loaded, along with a bullet point, which I'm sure can be fixed by setting the list-style to none, however I'm not sure where in the CSS this should be.
编辑：我遇到的问题是当页面加载时会显示子菜单以及一个项目符号，我确定可以通过将列表样式设置为无来修复它，但是我不确定在哪里这应该是 CSS。
I'm trying to create a menu similar to THIS. I understand this uses joomla and I am not.
我正在尝试创建一个类似于THIS的菜单。我知道这使用 joomla 而我不是。
#header {
height: 100px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#content {
max-width: 700px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
#footer {
height: 85px;
padding-top: 40px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#menu {
margin: 0 auto;
display: inline-block;
list-style: none;
padding: 0;
border-top: 1 solid #ccc;
border-left: 1 solid #ccc;
border-bottom: 1 solid #ccc;
}
#menu li {
float: left;
}
#menu li a {
display: block;
padding: 10px 10px;
text-decoration: none;
font-weight: bold;
}
#menu li a:hover {
color: #c00;
}<ul id="menu">
<li><a href="#">Home</a>
</li>
<li><a href="#">Kandi</a>
<ul>
<li><a href="#">Claim Kandi</a>
</li>
</li>
<li><a href="#">Events</a>
</li>
<li><a href="#">Artists</a>
</li>
<li><a href="#">Community</a>
</li>
<li><a href="#">Merchandise</a>
</li>
</ul>回答by Samuel Liew
Add this CSS:
添加这个CSS：
#menu, #menu ul {
margin:0 auto;
padding:0;
}
#menu li {
float: left;
position: relative;
list-style: none;
}
#menu > li:hover > ul {
display: block;
}
#menu > li > ul {
display: none;
position: absolute;
}
#menu li a {
white-space: nowrap;
}
回答by user2585434
use this css
使用这个 css
#menu{
position:absolute;
top:150px;
left:8%;
padding:0;
margin:0;
}
#menu ul{
padding:0;
margin:0;
line-height:30px;
}
#menu li{
position:relative;
float:left;
list-style:none;
background:rgba(0,0,0,1);
border-radius:5px;
}
#menu ul ul{
position:absolute;
visibility:hidden;
padding:0;
margin:0;
top:30px;
}
#menu ul li a{
text-align:center;
font:"Arial Black", Arial;
font-size:24px;
color:rgba(255,255,255,9);
width:150px;
height:30px;
display:block;
text-decoration:none;
}
#menu ul li:hover{
background-color:rgba(128,128,128,1);
text-decoration:none;
}
#menu ul li:hover ul{
visibility:visible;
z-index:1;
}
#menu ul li:hover ul li a{
background:rgba(0,0,0,9);
z-index:1;
border-bottom:1px solid rgba(160,160,164,1);
opacity:0.9;
text-decoration:none;
border-radius:5px;
}
#menu ul li ul li:hover{
background:rgba(128,128,128,1);
opacity:0.8;
text-decoration:underline;
}
with this html code
使用此 html 代码
<div id="menu">
<ul>
<li><a href="#">Home</a></li></ul>
<ul>
<li><a href="#">Video</a> <!--This is in main menu-->
<ul>
<li><a href="#">Technology</a></li> <!--This is in drop downmenu-->
<li><a href="#">Tutorial</a></li> <!--This is in drop downmenu-->
</ul>
</li>
</ul>
