html - 与在带有样式表的 ul 中使用 ul 冲突

Question

唯一的问题是，当我将鼠标悬停在“部分”链接上时，列表会以内联显示的形式出现。我希望它以列表的形式出现，我的意思是每个链接都位于另一个链接之下。只有该部分的列表。我试过这个样式表，但它不适合。

这是我的html

<div class="nav">
  <ul class="navbar" >
    <li><a href="Home.aspx">Home</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Sections</a>
        <ul class="SectionList">
          <li><a href="#">haha</a></li>
          <li><a href="#">haha</a></li>
          <li><a href="#">haha</a></li>
        </ul>
     </li>
     <li><a href="#">Appointment</a></li>
     <li><a href="Registeration.aspx">Registration</a></li>
  </ul>
</div>

这是我的样式表

ul.navbar
{
  list-style-type:none;
  padding:6px 0 6px 0;
  margin:0;
}

ul.navbar li
{
  display:inline;
  float:left;
}

.SectionList
{
  display:none;
  padding: 0;
  margin: 0;
}

ul.SectionList li
{
  padding:0;
  margin:0;
}

.navbar li:hover .SectionList
{
  display:block;
}

Answer 1

查看您想要的输出的 fiddle ，您需要处理它的外观和感觉。 http://jsfiddle.net/PthNP/

ul.navbar
{
list-style-type:none;
padding:6px 0 6px 0;
margin:0;

}

ul.navbar li
{
display:inline;
float:left;
}

.SectionList
{
display:none;
padding: 0;
margin: 0;
}

ul.SectionList li
{
padding:0;
margin:0;
}

.navbar li:hover .SectionList
{
display:block;
   width:50px;

}

.SectionList li
{
    width:100px;
    display:block;
}