come posso creare un sotto-sotto-menu con css?

http://sofit.miximages.com/submenu/DbMCI.jpg

http://sofit.miximages.com/submenu/i9r6N.jpg

Si prega di vedere l’immagine sopra, quello che voglio fare è spingere la scheda “guanti” e “stivali” a sinistra di “blah UGG”

Ho provato a impostare il sottomenu alla posizione relativa e il sottomenu secondario alla posizione assoluta, ma poi il sottomenu secondario scompare, come faccio a premere il sottomenu secondario a sinistra del sottomenu?

Ecco il mio HTML:

 

Ecco il mio 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; } 

Potresti prendere in considerazione la possibilità di cambiare il float: left; float: right :

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

Non hai bisogno di tutti quei tag nidificati e gli aggiornamenti rapidi. Guarda questa codepen .
Ogni volta che hai elementi flottati, usa l’ overflow: hidden sul genitore. Questo rende il genitore adatto ai contenuti dei suoi figli.