CSS侧边栏多级菜单

Question

你们能为我指明正确的方向吗？我想要在这个模板中添加侧边栏多级功能。所以当我悬停在主菜单中的某一项上时，一些子项会向右滑动...最好只使用css并保持样式/颜色/外观等不变。我很菜，求帮助。

- nacho10f

Answer 1

你需要做类似于这样的事情：

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

这应该足以让你开始了。祝你好运。

- codedude

Answer 2

Eric Meyer的纯CSS菜单示例可能会很有用。（如果您转到链接页面，请将鼠标悬停在“css/edge”上以查看弹出菜单）。

- Ash

Answer 3

这是一个很好的起点。那里有很多不同的选项

- pdr