하위 메뉴의 레이아웃 변경

Question

내 메뉴의 하위 메뉴를 만들려고하고 있지만 뭔가 잘못되었습니다. 하위 메뉴의 색상과 레이아웃이 바뀌는 것 같습니다. 내가 가이드에서 찾아 봤는데

* { margin:0; 
padding:0; 
} 

html {height: 100%;} 

body{ 
    position: relative; 
    height: 100%; 
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#fff)); 

} 

.navbox { 
    position: relative; 
    float: left; 
} 


ul.nav { 
    list-style: none; 
    display: block; 
    width: 200px; 
    position: relative; 
    top: :;0px; 
    left: 100px; 
    padding: 60px 0 60px 0; 
    background: url(shad2.png) no-repeat; 
    -webkit-background-size: 50% 100%; 
    display: inline-table; 
} 




li { 
    margin: 5px 0 0 0; 
} 

ul.nav li a { 
    -webkit-transition: all 0.3s ease-out; 
    background: #cbcbcb url() no-repeat; 
    color: #174867; 
    padding: 7px 15px 7px 15px; 
    -webkit-border-top-right-radius: 10px; 
    -webkit-border-bottom-right-radius: 10px; 
    width: 100px; 
    display: block; 
    text-decoration: none; 
    -webkit-box-shadow: 2px 2px 4px #888; 
} 
ul.nav li ul { display:none; 
} 
ul.nav li:hover ul { 
display:block; } 


<div class="navbox"> 
    <ul class="nav"> 

    <div class="navbox"> 
<ul class="nav"> 
<li><a href="#">Program</a> 
    <ul> 
<li><a href="#">Teknik</a></li> 
<li><a href="#">Naturvetenskap</a></li> 
<li><a href="#">El</a></li> 
</ul></li> 
    <li><a href="#">Nösnäs</a></li> 
    <li><a href="#">Schema</a></li> 
    <li><a href="#">Matsal</a></li> 
    </ul> 
</div> 

, 당신은 4 사진을 보면 http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu , 당신은 내가 코드를 내가 해봤이 있어도 그래도, 내 자신의 드롭 다운 모양하는 방법을 볼 수 있습니다 문제를 직접 해결할 수 있습니다. 그래서 문제는 레이아웃을 4 번째 그림에서와 같이 변경하려고 할 때, 서브 메뉴 드롭 다운 레이아웃을 변경하지 않으면 boxlayout 자체 아래에 이상한 찾고 상자가 생성됩니다.

도움 주셔서 감사합니다. :)

Answer 1

당신이이 일에 시작됩니다 유혹에 position:absolute을 추가하는 경우 :

ul.nav li:hover ul { 
    display:block; 
    position:absolute; 
} 

는 그런 배경 (색)과 다른 스타일을 추가하고이 예를 얻을 수 있습니다 :

http://jsfiddle.net/w1ll3m/zz83R/1/ (코드를 기반으로)

행운을 비네!