Question

我正在尝试为我的网站创建一个导航栏。下拉给我带来麻烦。如何对齐子菜单以使其显示为正确的下拉？

      <div id="mainhead">
   <div id="title">
 <h1>StudiousEnough </h1>
</div>
    <li><a href="index.html" class="thispage">Home</a></li>
  <li><a href="" >class</a>
    <ul>
        <li><a href="#"> Class XI</a> </li>
        <li><a href="#"> CLass XII</a> </li>
    </ul>

  </li>

  <li><a href="#" >jee</a></li>
  <li><a href="aboutus.html" >about us</a></li>
</ul>

这是css：

#mainhead #mainnav ul {
list-style-type: none;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#mainhead #mainnav li {
display: block;
width: 25%;
background-color: #4D4D4D;
color: #FFFFFF;
text-align: center;
text-transform: uppercase;
float: left;
padding-bottom: 4px;
padding-top: 4px;
font-family: averia-libre;
font-style: normal;
font-weight: 700;
}
#mainhead #mainnav {
position: absolute;
width: 100%;
left: 0%;
right: 0%;
}

#mainhead #mainnav a{
display:block;
color: #ffffff;
text-decoration: none;
}

#mainhead #mainnav li:hover,#mainhead #mainnav li:focus,#mainhead #mainnav li:active {
background-color: #2535F3;
text-decoration: none;
 }

#mainhead #mainnav ul li ul{
display: none;
}
#mainhead #mainnav ul li:hover ul{
display:block;

}

Answer 1

请参阅fiddle

我已将以下CSS添加到您的CSS

<强> CSS

#mainhead #mainnav ul li ul li{
    width:100%;
    clear:both;
}

Answer 2

首先要检查你的HTML;你在这里有一些问题。列表项标记需要包含在无序列表父标记内。另外，我没有看到你的CSS中使用的html中存在的一些id和类。如果您始终格式化代码，缩进封闭的块，这将有助于您更快地发现所有错误。

我继续添加了一个id ='mainnav'的父div并清理了你的HTML，它主要是按照你的期望呈现的。要将子菜单列表项设置为“堆叠”，只需将宽度设置为100％清除是没有必要的。在这里查看关于jsfiddle的示例：

https://jsfiddle.net/pianopaul/r3bb8k24/5/

 <div id="mainhead">
   <div id="title">
     <h1>StudiousEnough </h1>
       <div id="mainnav">
         <ul class="menu">
             <li><a href="index.html" class="thispage">Home</a></li>
             <li><a href="" >class</a>
                 <ul class="submenu">
                     <li><a href="#"> Class XI</a> </li>
                     <li><a href="#"> CLass XII</a> </li>
                 </ul>
             </li>
             <li><a href="#" >jee</a></li>
             <li><a href="aboutus.html" >about us</a></li>
         </ul>
       </div>
    </div>
</div>

获取自定义导航栏下拉列表以正确对齐

2 个答案:

请参阅fiddle