如何让我的横向导航栏下拉菜单? [英] How can I make my horizontal navigation bar a drop down menu?
问题描述
我已经尝试在下面的教程中制作横向下拉导航栏,但是它们从不是中心的,我无法弄清楚如何使它们居中。我试图以相反的方向前进,并将导航栏置于中心位置,然后尝试使其成为一个下拉菜单,尽管这似乎将所有内容都关闭。这是我的代码。
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.
编辑:我遇到的问题是,当页面加载时显示子菜单,以及一个项目符号,确定可以通过将列表风格设置为none来修复,但是我不知道CSS应该在哪里。
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.
我正在尝试创建一个菜单类似于这个。我明白这是使用joomla,我不是。
I'm trying to create a menu similar to THIS. I understand this uses joomla and I am not.
#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>
推荐答案
p>添加此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;
}
这篇关于如何让我的横向导航栏下拉菜单?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!