html - 如何使用 CSS 制作子菜单？

Question

http://i.imgur.com/DbMCI.jpg

http://i.imgur.com/i9r6N.jpg

请看上图，我想要做的是把“手套”和“靴子”标签推到“blah UGG”的左边

我试图将子菜单设置为相对位置，将子子菜单设置为绝对位置，但是子子菜单消失了，如何将子子菜单推到子菜单的左侧？

这是我的 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>

这是我的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;
}

Answer 1

您可能需要考虑将其更改float: left;为float: right：

.cf ul li{
float:right;
margin: 0;
padding: 0;
list-style:none;
font-family:"open sans", sans-serif;

}

Answer 2

您不需要所有这些嵌套标签和 clearfixes。看看这个codepen。
每当您有浮动元素时，请overflow: hidden在其父级上使用。这使得父级适合其子级的内容。