[英]how do I make a sub sub menu with css?
http://i.imgur.com/DbMCI.jpg http://i.imgur.com/DbMCI.jpg
http://i.imgur.com/i9r6N.jpg http://i.imgur.com/i9r6N.jpg
Please see image above, what I want to do is push "gloves" and "boots" tab to the left of "blah UGG" 请看上面的图片,我要做的是将“手套”和“靴子”选项卡推到“ blah UGG”的左侧
I tried to set the sub menu to position relative and the sub sub menu to position absolute but then the sub sub menu disappears, how do I push the sub sub menu to the left of the sub menu? 我试图将子菜单设置为相对位置,并将子子菜单设置为绝对位置,但是子子菜单消失了,如何将子子菜单推到子菜单的左侧?
Here are my HTML: 这是我的HTML:
<div id="nav-bar" class="cf">
<nav class="cf">
<ul class="topmenu">
<li class="hometop"><a href="#"class="hometop">Home</a></li>
<li ><a href="#" >Catagory</a>
<ul class="submenu">
<li><a href="#">Blah Blah</a></li>
<li><a href="#">Blah UGGdfddfdf</a>
<ul>
<li>Boots</li>
<li>Gloves</li>
</ul>
</li>
</ul>
</li>
<li ><a href="#">About</a></li>
<li ><a href="#">How To Order</a></li>
</ul>
</nav>
</div>
Here is my css: 这是我的CSS:
.cf ul li{
float:left;
margin: 0;
padding: 0;
list-style:none;
font-family:"open sans", sans-serif;
}
.cf li a {
display:block;
padding:0 1em;
line-height: 2.5em;
color:#FFFFFF;
}
.cf li a:hover {
background-color:#ffa627;
}
li{
position:relative;
}
ul.submenu {
float:none;
background: #222;
position:absolute;
left:-9000em;
z-index:1;
width:200px;
height:auto;
}
.topmenu li:hover ul{
left:0;
}
ul.submenu li {
float:none;
font-size: 12px;
position:relative;
}
.submenu li ul li {
float:none;
color:#FFFFFF;
display:block;
padding:0 1em;
line-height: 2.5em;
}
#nav-bar nav {
background-color: #222;
}
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
You might want to consider changing the float: left;
您可能需要考虑更改
float: left;
to float: right
: float: right
:
.cf ul li{
float:right;
margin: 0;
padding: 0;
list-style:none;
font-family:"open sans", sans-serif;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.