Question

我正在使用这个本地不支持子菜单的模板，但我非常喜欢它的设计：zStartup

我的菜单的HTML结构是：

Rules -> Create Rule

子菜单版本的CSS，如模板中的：

<div id="menu">
        <nav>
            <div class="wrap-nav">
               <ul>
                 <li><a href="#">Home</a></li>

      <li><a href="#">Projects</a>
       <ul class="sub-menu">
        <li><a href="#">Blog</a></li>
     <li><a href="#">Services</a>
   <ul class="sub-menu">
   <li><a href="#">ONE</a></li>
 <li><a href="#">TWO</a></li>
</ul>
 </li>

   </ul>

   </li>        
       </ul>
            </div>
        </nav>
    </div>

我添加了以下内容以容纳带有不良效果的子菜单，如图所示：

nav {
    display: inline-block;
    z-index: 1111;
    position: relative;
    float: right;
}
ul.menu {
    margin: 28px 10px 0px 0px;
    display: inline-block;
}
ul.menu li {
    float: left;
    line-height: 30px;
    margin: 0px 0px 0px 48px;
}
ul.menu li:hover,
ul.menu li.current {} ul.menu li a {
    font-size: 25px;
    line-height: 30px;
    color: #f2f2f2;
    display: inline-block;
}
ul.menu li a:hover,
ul.menu li.current a {
    color: #ff9000;
}

显示：块;高度：40px;字体大小：0.89em;填充：5px 30px; }

宽度：200px是一个绝望的举动，因为它拒绝垂直显示子菜单（我假设显示：块会做的伎俩）。

无论如何，上面的代码显示了以下结果，这很难看：

任何输入？

Answer 1

您的代码中有几个问题。以下是一些可以帮助您的信息：

规则＃1：始终正确格式化代码。相信我会有所作为！
您在css中使用的是menu课程，但您的html中没有（这是id而不是class）。
我向您展示了纯css中子菜单的机制，您将拥有制作自己所需的一切。

ul {
  /* We are removing default styles of ul */
  list-style: none;
  padding: 0;
  margin: 0;
}

ul li {
  /* Applies to all li */
  display: block;
  float: left;
  position: relative; /* this will make the sub-menu positionned relatived to the hovered li */
}

ul li + li {
  margin-left: 28px; /* just to space your li */
}

li ul {
  display: none; /* Hides the submenu */
  text-align: right; /* Display sub-menu text on the right */
}

ul li a {
  /* Your styles for the links here I let browser's defaults */
}

ul li a:hover {
  /* Your styles for the links when hovered */
  color: #ff9000;
}

li ul li + li {
  margin-left: 0; /* Remove the margin between li that we applied above */
}

li:hover > ul {
  display: block; /* On hover show sub-menu */
  position: absolute;
}

li:hover li {
  float: none; /* Remove floating for sub-menu li so that li displays one above the other */
}

ul ul ul {
  right: 100%; /* position sub-menu of sub-menu to the left of the parent submenu */
  top: 0;
}

ul ul ul li {
  margin-right: 8px; /* Just so that li inside submenu of submenu don't touch parent submenu's li (it depends on the style you want for your menu) */
}

ul::after {
  /* Clearfix because we've used float on ul */
  content: '';
  display: block;
  clear: both;
}

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Projects</a>
      <ul class="sub-menu">
        <li><a href="#">Blog</a></li>
        <li><a href="#">Services</a>
          <ul class="sub-menu">
            <li><a href="#">ONE</a></li>
            <li><a href="#">TWO</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>

插入带有css错误的子菜单

1 个答案: