menu dọc css thuần túy với menu phụ

Question

Tôi đã nghiên cứu và có thể sao chép những gì tôi đang tìm kiếm, tốt - tôi chỉ cần trợ giúp với trình đơn CSS, menu dọc, cụ thể hơn.

Tôi muốn cửa sổ bật lên menu phụ xuất hiện 10px bên trái của thuộc tính không phải là thuộc tính li như hầu hết các ví dụ được tìm thấy trên internet. Tôi cũng đang tìm kiếm CSS đơn giản, tinh khiết nhất, loại menu - Không có gì lạ mắt.

Dưới đây là những gì tôi đã làm như vậy cho đến nay:

<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 của tôi:

#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;} 

Làm thế nào để làm cho nó để các tiểu menu cấp bật lên khi tôi di a Neo HTML, không phải là li và 10px bên trái của liên kết a được nhấp? Cảm ơn.

Answer 1

Hãy thử này và tôi nghĩ rằng nó sẽ giúp

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; 
}