我正在尝试创建一个向右浮动的子菜单。但是,我碰到了一堵砖墙,只能让它内联浮动。
http://jsfiddle.net/jspring/yD9N4/
您可以在此处看到(尽管它比正常宽一些)子菜单仅显示在父列表项内。如果有人可以帮助我让它向右浮动,那就太好了!
<ul class="cl-menu">
<li>Link 1
<ul>
<li><a href="#">Sub Link 1</a>
</li>
<li><a href="#">Sub Link 2</a>
</li>
</ul>
</li>
<li>Link 2
<ul>
<li><a href="#">Sub Link 1</a>
</li>
<li><a href="#">Sub Link 2</a>
</li>
</ul>
</li>
</ul>
.cl-menu{
list-style:none outside none;
display:inline-table;
position:relative;
width:100%;
}
.cl-menu li{
list-style:none outside none;
border-bottom:1px solid #cccccc;
padding:5px 1px;
text-align:center;
}
.cl-menu > li:hover{
/*background-color:#303030;*/
background-color:#66819C;
color:#FFF;
font-weight:bold;
text-decoration:underline;
opacity:1;
}
.cl-menu li ul{
display:none;
}
.cl-menu li:hover ul{
display:block;
opacity:0.8;
background-color:#FFF;
margin-top:4px;
font-weight:normal !important;
}
.cl-menu li ul li{
border-bottom:1px solid #cccccc !important;
border-top:none !important;
border-left:none !important;
border-right:none !important;
}
.cl-menu li ul li a{
color:#000;
text-decoration:none;
}
.cl-menu li ul li a:hover{
color:#390;
text-decoration:underline;
}
.cl-menu ul:after{
content:"";
clear:both;
display:block;
}