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

firebug を使用した検査では、次のことがわかりました。

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 に答える