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