1

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

这是我的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;
}
4

2 回答 2

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;
}
于 2012-12-25T06:40:48.707 回答
0

用萤火虫检查表明：

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

正在申请

display:inline

给所有的后代。要修复，请将其更改为：

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

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

此外，您可能会从GRC 纯 CSS 菜单中获得一些好主意，这样您就不必完全重新发明轮子。祝你好运。

于 2012-12-25T07:17:57.373 回答