CSS側欄多級菜單

Question

你們可以指點我在正確的方向？我想添加邊欄多級功能到this模板。因此，當我將鼠標懸停在主菜單中的某個項目上時，有些子項目會向右滑動......最好只使用CSS並保留樣式/顏色/外觀等......我吸取CSS，請幫助。

Answer 1

Eric Meyer的pure CSS menu例子可能會有用。 （如果轉到鏈接頁面，將鼠標懸停在「css/edge」上可以看到彈出的菜單）。

Answer 2

你需要做這樣的事情：

<div class="menu"> 
     <ul> 
      <li class="list_item"> 
       <a href="#">Home</a> 
       <ul class="submenu"> 
        <li class="sub_list_item"><a href="#">Home</a></li> 
        <li class="sub_list_item"><a href="#">Home</a></li>      
        <li class="sub_list_item"><a href="#">Home</a></li> 
       </ul> 
      </li> 
     </ul> 
    </div> 

這將是有3個子列表項一個菜單項的基本結構。我沒有測試這個代碼，但是這裏有一些CSS開始。

ul.submenu { 
    display:none; 
} 
ul.submenu:hover{ 
display:block; 
} 
ul.submenu li.sub_list_item { 
width:100px; 
background:blue; 
color:#fff; 
line-height:30px; 
height:30px 
} 

這應該足以讓你開始。祝你好運。

Answer 3

This is a good place to start。那裏有很多不同的選項