Question

你们能指出我正确的方向吗？我想在this模板中添加侧边栏多级功能。因此，当我将鼠标悬停在主菜单中的一个项目上时，一些子项目向右滑动...最好只使用css并保留样式/颜色/外观等等...我在css上吮吸，请帮助。

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
 }

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

Answer 2

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

Answer 3

This is a good place to start。那里有很多不同的选择

CSS侧边栏多级菜单

3 个答案: