Css和jquery ul和li菜单风格

Question

present output

output needed

从firebug复制的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 CODE

<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

我发现 Suckerfish之子方法是制作下拉菜单的最佳方式。检查多级下拉列表部分。

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

Answer 2

最常见的方法是在子ul上使用绝对定位。使用浏览器控制台检查在其他菜单上的操作方式