서브 메뉴가있는 순수한 CSS 수직 메뉴

나는 내 연구를 수행했고 내가 찾고있는 것을 복제 할 수있었습니다. 물론 좀 더 구체적인 수직적이고 순수한 CSS 메뉴 만 있으면됩니다.서브 메뉴가있는 순수한 CSS 수직 메뉴

내 하위 메뉴 팝업이 인터넷의 대부분 예제처럼 li이 아닌 왼쪽의 10px로 나타나길 원합니다. 또한 가장 단순하고 순수한 CSS 유형의 메뉴를 찾고 있습니다.

<div id="nav"> 
    <ul class="top-level"> 
     <li><a href="#">This is a long text</a> 
      <ul class="sub-level"> 
       <li><a href="#">Sub Menu Item 1</a></li> 
       <li><a href="#">Sub Menu Item 2</a></li> 
       <li><a href="#">Sub Menu Item 3</a></li> 
       <li><a href="#">Sub Menu Item 3</a></li> 
      </ul> 
     </li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Contact me here</a></li> 
     <li><a href="#">Help</a> 
      <ul class="sub-level"> 
       <li><a href="#">Sub Menu Item 1</a></li> 
       <li><a href="#">Sub Menu Item 2</a></li> 
       <li><a href="#">Sub Menu Item 3</a></li> 
      </ul> 
     </li> 
    </ul>

내 CSS :

#nav {border:1px solid cyan;} 
    /* top level menu */ 
    #nav ul.top-level {border:1px solid red;} 
    #nav ul.top-level li {position:relative;} 

    /* sub level menu */ 
    #nav ul.sub-level {border:1px solid yellow;} 
    #nav ul.sub-level {display:none;} /* hide */ 

    /* hover the sub menu*/ 
    #nav ul.top-level li:hover .sub-level {display: block; position:absolute; top:5px;}

는 어떻게해야합니까 나는를 가져 가면 그렇게 하위 수준의 메뉴가 표시 여기

내가 지금까지 한 일이다 a li이 아닌 HTML 앵커 및 클릭 한 숫자의 왼쪽에있는 10 픽셀 0x앵커? 감사합니다. .

출처

2012-05-07 Marco

그것을 위해 JS를 사용하는 것. 그것은 CSS4로 가능할 것입니다 ... 멀리 먼 길입니다. 리를 가리키면 메뉴를 열 때 아무 문제가 없습니다. 앵커를 리의 정확한 높이/너비로 만들 수 있으며 차이가별로 없습니다. – sg3s

이 하나를 시도하고 나는 그것이 도움이 될 것입니다 생각

HTML

<div id="nav"> 
    <ul class="top-level"> 
     <li><a href="#">This is a long text</a> 
      <ul class="sub-level"> 
       <li><a href="#">Sub Menu Item 1</a></li> 
       <li><a href="#">Sub Menu Item 2</a></li> 
       <li><a href="#">Sub Menu Item 3</a></li> 
       <li><a href="#">Sub Menu Item 3</a></li> 
      </ul> 
     </li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Contact me here</a></li> 
     <li><a href="#">Help</a> 
      <ul class="sub-level"> 
       <li><a href="#">Sub Menu Item 1</a></li> 
       <li><a href="#">Sub Menu Item 2</a></li> 
       <li><a href="#">Sub Menu Item 3</a></li> 
      </ul> 
     </li> 
    </ul> 
</div>

CSS

#nav {font-size:0.75em; width:150px;} 
#nav ul {margin:0px; padding:0px;} 
#nav li {list-style: none;} 

ul.top-level {background:#FFFFFF;} 
ul.top-level li { 
border: #FF0000 solid; 
border-width: 1px; 
} 
#nav ul.sub-level {border:1px solid yellow;} 
#nav a { 
color: #000000; 
cursor: pointer; 
display:block; 
height:25px; 
line-height: 25px; 
text-indent: 10px; 
text-decoration:none; 
width:100%; 
} 
#nav a:hover{ 
text-decoration:underline; 
} 

#nav li:hover { 
background: #f90; 
position: relative; 
} 
ul.sub-level { 
    display: none; 
} 
li:hover .sub-level { 
    background: #999; 
    border: #fff solid; 
    border-width: 1px; 
    display: block; 
    position: absolute; 
    left: 75px; 
    top: 5px; 
} 
ul.sub-level li { 
    border: none; 
    float:left; 
    width:150px; 
} 

#nav .sub-level { 
    background: #FFFFFF; 
}

당신은 순수 CSS로, 당신이 가진 것을 할 수 없다

출처

2012-05-07 06:24:17 Jhilom

서브 메뉴가있는 순수한 CSS 수직 메뉴

답변

관련 문제