Css and jquery ul and li menu style

Question

present output

output needed

css file copied from firebug

.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>

I am new to css , the first image is the present menu style that i am getting now, but i need the menu style as shown in the figure 2,How can i achieve this

Answer 1

Most common approach is use absolute positioning on the sub ul's. Use a browser console to inspect how it's done on other menus

Answer 2

I find the Son of Suckerfish method the best way to make dropdown menus. Check the Multilevel Dropdowns section.

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