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。那里有很多不同的选项