CSS和jQuery的UL和李菜單樣式

Question

present output 

output needed 

css文件從螢火複製

.menu-bar li ul a { 
    color: #231F20; 
    display: block; 
    font-size: 12px; 
    font-style: normal; 
    margin: 0; 
    padding: 6px 0 0 10px; 
    text-align: left; 
} 
style.css (line 1670) 
.menu-bar li ul a { 
    color: #231F20; 
    display: block; 
    font-size: 12px; 
    font-style: normal; 
    margin: 0; 
    padding: 6px 0 0 10px; 
    text-align: left; 
} 
style.css (line 126) 
.menu-bar ul li a { 
    color: #231F20; 
    display: block; 
    float: left; 
    height: 20px; 
    padding: 3px 14px 0; 
    text-decoration: none; 
    width: auto; 
} 
style.css (line 77) 
a { 
    color: #990099; 
    text-decoration: none; 
} 
style.css (line 2132) 
* { 
    margin: 0; 
    padding: 0; 
} 
style.css (line 1) 
Inherited fromli 
.menu-bar li li { 
    color: #231F20; 
    word-wrap: break-word; 
} 
style.css (line 111) 
.menu-bar ul li { 
    border-style: solid; 
    font-size: 12px; 
} 
style.css (line 67) 
Inherited fromul 
.menu-bar ul { 
    list-style-type: none; 
} 
style.css (line 62) 
Inherited fromli 
.menu-bar ul li { 
    border-style: solid; 
    font-size: 12px; 
} 
style.css (line 67) 
Inherited fromul 
.menu-bar ul { 
    list-style-type: none; 
} 
style.css (line 62) 
Inherited fromdiv.header_wrap 
.header_wrap { 
    border-style: solid; 
} 
style.css (line 44) 
Inherited frombody 
body { 
    font-family: Verdana; 
    font-size: 12px; 
} 
style.css (line 23) 

HTML代碼

<ul style="border:none"> 
<li><a href="<?php echo site_url()?>/videos" target="">Videos</a></li> 
<li><a href="<?php echo site_url()?>/photoView" target="">Photos</a> 
    <ul> 
    <li><a href=#>State</a></li> 
    <li><a href=#>Activity</a></li> 

     <ul> 
<li><a href=#>Alabama</a></li> 
<li><a href=#>Alaska</a></li> 
<li><a href=#>>Arizona</a></li> 
<li><a href=#>Arkansas</a></li> 
<li><a href=#>California</a></li> 
<li><a href=#>Colorado</a></li> 
<li><a href=#>>Connecticut</a></li> 
<li><a href=#>Delaware</a></li> 

    </ul> 
     <ul> 
     <li><a href=#>Mobilization</a></li> 
<li><a href=#>Training</a></li> 
<li><a href=#>Industry Interaction</a></li> 
<li><a href=#>On Job Training</a></li> 
<li><a href=#>Placements</a></li> 
    </ul> 
    </ul> 
<!--<ul style="border:none"> 
<li>States</li> 
<li>Activity</li> 
</ul>--> 
</li> 
</ul> 

我是新來的CSS，第一印象是我現在得到本菜單的風格，但我需要在圖2所示的菜單風格，我怎麼能做到這一點

Answer 1

我找到兒子口魚方法的最佳途徑，使下拉菜單。檢查多級下拉框部分。

http://www.htmldog.com/articles/suckerfish/dropdowns/

Answer 2

最常用的方法是在子UL的使用絕對定位。使用瀏覽器控制檯來檢查它是如何在其他菜單進行