我用CSS开发了一个子菜单。 jQuery和我的意图是它是垂直子菜单,但我得到一个水平菜单。
我已经尝试在CSS中显示“播放”,但它不起作用,例如#menu ul li ul li a {display: inline-block;}
。
有人知道将这个子菜单垂直放置的技巧吗?
我的jsfiddle完整示例:
http://jsfiddle.net/jcak/9EcnL/7/
我的HTML
<section id="menu-container">
<nav id="menu">
<ul>
<li><a href="index.html">Home</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
<li><a href="procuts.html">Procuts</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</nav>
</section>
我的css:
#menu ul li ul li {display: none;}
#menu-container
{
background:green;
width:100%;
height:46px;
float:left;
z-index:7;
}
#menu
{
width:960px;
height:auto;
margin:0 auto 0 auto;
}
#menu ul
{
list-style-type:none;
}
#menu ul li
{
display: inline-block;
float:left;
height:46px;
position: relative;
line-height:46px;
font-weight:300;
}
#menu ul li a
{
text-decoration:none;
color:#ccc;
display:block;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
#menu ul li a:hover
{
color:#fff;
}
#menu ul li ul {
position: absolute;
left: 0;
-webkit-padding-start: 0;
width: 300px;
}
#menu ul li ul li
{
color:#fff;
}
答案 0 :(得分:2)
默认情况下,ul
将是垂直的。
float:left
正是使整个菜单水平而不是。
继续删除它并查看菜单的行为。
答案 1 :(得分:1)
#menu ul li
{
display: inline-block;
height:46px;
position: relative;
line-height:46px;
font-weight:300;
}