CSS 하위 메뉴의 스타일을 지정하는 방법은 무엇입니까?

Question

나는 this example을 따르려고했으나 내 필요에 따라 작동하지 못하게되어 도움이 될만한 도움이되었습니다.

UPDATE : 좋아, 내 하위 메뉴가 더 나은 yourkishore 덕분에 위치 내가 좀 어떻게 지금 중첩 된 메뉴를 처리하기 위해 해결,하지만 내 하위 메뉴는 여전히 내 텍스트의 맨 아래에 바로 나타나고있다?

** Updated jsFiddle **

HTML :

<ul id="menubar"> 
    <div id="title">title</div> 
    <li>File 
     <ul> 
     <li>Photoshop CC</li> 
     <li>Illustrator CC Adobe</li> 
     <li>My Web Design 
      <ul> 
      <li>HTML</li> 
      <li>CSS</li> 
      </ul> 
     </li> 
     </ul> 
    </li> 
    <li>Config</li> 
</ul> 
<div id=other></div> 

CSS 그것은 당신의 바이올린에서 잘 작동

html, body {height:100%;width:100%;margin:0;} 
#menubar { 
    background: #eeeeee; 
    height:25%; 
    list-style-type: none; 
    width:100%; 
    display: inline-table; 
    margin:0; 
    padding:0; 
    z-index:99; 
} 
#menubar #title { 
    display:inline-block; 
    padding:0 5%; 
    font-size:140%; 
    font-weight:bold; 
    float:left; 
    height:100%; 
    display: inline-flex; 
    align-items: center; 
} 
#menubar li { 
    height:100%; 
    position:relative; 
    float:left; 
    padding:0 1%; 
    list-style-type: none; 
    white-space:nowrap; 
    display: inline-flex; 
    align-items: center; 
} 
#menubar li:hover { 
    background-color:#7faddb; 
} 
#menubar li > ul { 
    background-color:white; 
    z-index:99; 
    display: none; 
    position:absolute; 
    list-style-type: none; 
    margin:0; 
    padding:0; 
} 
#menubar li:hover > ul { 
    display: block; 
} 
#other { 
    background-color:green; 
    position:absolute; 
    top:25%; 
    bottom:0; 
    left:0; 
    right:0; 
} 

Answer 1

이 HTML

<div id="title">title</div> 
<nav> 
<ul> 
    <li>File 
     <ul> 
     <li>Photoshop CC</li> 
     <li>Illustrator CC Adobe</li> 
     <li>My Web Design 
      <ul> 
      <li>HTML</li> 
      <li>CSS</li> 
      </ul> 
     </li> 
     </ul> 
    </li> 
    <li>Config</li> 
</ul> 
</nav> 
<div id=other></div> 

를 사용하여이 CSS를 사용

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote { 
    margin: 0; padding: 0; border: 0; 
} 

body { 

    font-family: Helvetica, sans-serif; font-size: 18px; line-height: 24px; 
} 

nav { 

    text-align: center; 
} 

nav ul ul { 
    display: none; 
} 

    nav ul li:hover > ul { 
     display: block; 
    } 


nav ul { 
    padding: 0 20px; 

    list-style: none; 
    position: relative; 
    display: inline-table; 
} 
    nav ul:after { 
     content: ""; clear: both; display: block; 
    } 

    nav ul li { 
     float: left; 
    padding:12px; 
    } 
     nav ul li:hover { 
      background: #505050; 

     } 
      nav ul li:hover a { 
       color: #171717; 
      } 

     nav ul li a { 
      display: block; padding: 25px 40px; 
      color: #994411; text-decoration: none; 
     } 


    nav ul ul { 
     background: #888888; border-radius: 0px; padding: 0; 
     position: absolute; top: 100%; 
    } 
     nav ul ul li { 
      float: none; 
      border-top: 1px solid #111; 
      border-bottom: 1px solid #575f6a; position: relative; 
     } 
      nav ul ul li a { 
       padding: 1px 40px; 
       color: #666; 
      } 
       nav ul ul li a:hover { 
        background: #333; 
       } 

    nav ul ul ul { 
     position: absolute; left: 100%; top:0; 
    } 
     #other { 
    background-color:green; 
    position:absolute; 
    top:25%; 
    bottom:0; 
    left:0; 
    right:0; 
    z-index:-1; 
} 

Answer 2

내부에 있기 때문에 메뉴 안에 표시됩니다. 마우스를 가져 가면 바깥에 나타나게하십시오. position이라는 속성을 설정해야합니다.

는 #menubar 리 당신은 poistion 추가해야 상대

다음 #menubar 리튬 당신이받은 위치 추가해야 UL : 절대.

메뉴는 항상이 중요한 속성에서 작동합니다. 이것이 없으면 중첩 목록이있는 메뉴가 없습니다. 그냥 css positionings을 배우십시오. 모두 제일 좋다.