如何制作一个带有CSS的子子菜单？

Question

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

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

请参见上面的图像，我想要做的是推动“手套”和“靴子”选项卡中的“嗒嗒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。这使得父母适合其子女的内容。