0

メガメニューを作成しようとしています (フィドルを参照してください: http://jsfiddle.net/BKHNk/ ) が、メニューから飛び出す <div> にリンクを配置するときに問題が発生します。メニュー 1 の下のドロップダウンは私が望んでいるものですが、メニュー 2 に見られるようにテキストをリンクに変えるとすぐに、すべての書式設定がうまくいきません。問題は、リンクが属性を継承していることだと思いますが、それを防ぐ最善の方法がわかりません。

基本的に横幅は内容に応じて必要最小限の幅でお願いします。セクションのテキストは 1 行にする必要があります。サブセクションの項目はすべて、各サブセクションのテキスト (カンマは除く) をリンクとして、独自の行に配置する必要があります。繰り返しますが、基本的にメニュー 1 の外観とまったく同じです。

また、サブセクションの項目を順不同のリストに変更しようとしましたが、それはさらに複雑になり、そうする必要はないと思います。

2行目のすべてのテキストが折り返されている継承されているものと、それを防ぐ方法を誰かが理解するのを手伝ってくれますか? ありがとう！

以下の HTML コード:

<ul id="menu">
  <li> <a href="#">Menu 1</a>
    <div class="dropdown">
      <div class="section">Section goes here</div>
      <div class="subsection">Subsection 1, Subsection 2, Subsection 3</div>
      <div class="rule"></div>
    </div>
  </li>
  <li> <a href="#">Menu 2</a>
    <div class="dropdown">
      <div class="section"><a href="#">Section goes here</a></div>
      <div class="subsection"><a href="#">Subsection 1</a>, <a href="#">Subsection 2</a>, <a href="#">Subsection 3</a></div>
      <div class="rule"></div>
    </div>
  </li>
</ul>

以下のCSS：

#menu {
  font-family: sans-serif;
  list-style:none;
  height: 32px;
  width: 200px;
  background: #888;
}
#menu li {
  float:left;
  display:block;
  text-align:center;
  position:relative;
  padding: 5px;
  margin:5px;
}
#menu li a {
  color: black;
  display:block;
  text-decoration:none;
}
#menu li:hover a {
  color:#ccc;
}
.dropdown {
  margin:4px auto;
  float:left;
  position:absolute;
  left:-999px;
  text-align:left;
  padding:10px;
  background:#aaa;
  width: auto;
  white-space:nowrap;
}
#menu li:hover .dropdown {
  left:0px;
  top:auto;
}
.rule {
  height: 2px;
  width: 100%;
  background-color: red;
}
.section {
  font-weight:bold;
}
.subsection {
font-size: 75%;
}
4

1 に答える 1

1

この行が問題を引き起こしています：

#menu li a {
  color: black;
  display:block;
  text-decoration:none;
}

これにより、リスト項目の子であるすべてのリンクがブロックとして表示され、表示されている垂直方向のスタックが発生します。

そのセレクターを に変更すると、準備完了#menu li > aです。JSFiddle で表示します。これが行うことは、リスト項目の直接の子であるリンクにのみスタイリングを適用することです。

于 2013-01-08T01:12:44.640 に答える