我花了更多的时间来做这件事而不是我愿意承认。我似乎无法弄清楚这一点。我正在尝试构建一些我认为非常简单的东西。我有一个横向菜单。当有人在一个给定的链接上盘旋时,我希望子菜单是垂直的。
这就是我现在在RetirePhoenixArizona.com处得到的:
HTML
<nav class="secondary-navigation">
<div class="container">
<ul id="secondary-menu">
<li><a href="google.com">Link 1</a>
<ul class="secondary-submenu">
<li><a href="http://www.google.com">Sub Menu 1</a></li>
<li><a href="http://www.google.com">Sub Menu 2</a></li>
</ul>
</li>
<li><a href="facebook.com">Link 2</a></li>
<li><a href="google.com">Link 3</a></li>
<li><a href="facebook.com">Link 4</a></li>
</ul>
</div>
</nav>
CSS
#secondary-menu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
#secondary-menu li {
float: left;
width: 25%;
}
#secondary-menu li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#secondary-menu li a:hover {
background-color: #111;
}
#secondary-menu ul {
display: none;
}
#secondary-menu li:hover > ul {
position: relative;
display: inline;
width: 200px;
height: 45px;
position: absolute;
margin: 40px 0 0 0;
}
#secondary-menu li:hover > ul li {
float: none;
width: 100%;
}
答案 0 :(得分:1)
删除子菜单li上的浮动
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
width: 25%;
position: relative;
}
a {
display: block;
background: #333;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
ul ul {
display: none;
}
li:hover > ul {
display: block;
position: absolute;
left: 0;
top: 40px;
right: 0;
}
li:hover > ul li {
float: none;
width: 100%;
}
答案 1 :(得分:0)
我只是做一个响应式水平菜单... here 如果你不需要响应删除所有关注容器,bar1,bar2,bar3,图标,更改,@ media屏幕和(max-width:680px)和javascript