css - 插入带有 css 错误的子菜单

Question

我使用的模板本身不支持子菜单，但我真的很喜欢它的设计:zStartup

我的菜单的 HTML 结构是:

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

无子菜单版本的 CSS，如模板中所示:

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

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

 ul.menu li ul { display:none; list-style:none;top:30px; left:auto; float:right; text-align:left;position:relative; width:200px !important; border:1px solid blue;z-index:10000; }

 ul.menu li:hover > .sub-menu { display:block;    } 
.sub-menu li {display:block;}
 .sub-menu li a {

显示: block ；高度:40px；字体大小:0.89em；填充:5px 30px；

width:200px 是一个孤注一掷的举动，因为它拒绝垂直显示子菜单(我假设 display:block 可以解决问题)。

无论如何，上面的代码显示了以下结果，这是丑陋的:

有什么意见吗？

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>