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를 새로운 오전

는 첫 번째 이미지는 내가 지금 무엇입니까 본 메뉴 스타일이지만, 나는이

Answer 1

내가 아들 찾아 달성 할 수있는 방법, 그림 2와 같이 메뉴 스타일이 필요합니다 Suckerfish 방법 드롭 다운 메뉴를 만드는 가장 좋은 방법. 멀티 레벨 드롭 다운 섹션을 확인하십시오.

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

Answer 2

가장 일반적인 접근법은 서브 상향 링크에서의 절대 위치를 사용한다. 브라우저 콘솔을 사용하여 다른 메뉴에서 수행 된 작업을 검사하십시오.