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

请参阅小提琴，了解您需要处理其外观和感觉的所需输出。 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;
}

Answer 2

用萤火虫检查表明：

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

正在申请

display:inline

所有后代都是如此。要修复，请将其更改为：

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

将只选择第一个后代。 Here是CSS参考。

此外，您可能会从GRC pure CSS menus获得一些好主意，因此您无需完全重新发明轮子。祝好运。

与ul在样式表中使用ul冲突

2 个答案: