插入子菜单用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 { 

display：block; height：40px; font-size：0.89em; padding：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>