4

以下は私のコードです。現在、「About Us」にカーソルを合わせると、ドロップダウンメニューの下のすべてが開きます。マウスオーバーしたときにのみホバーするようにcssを変更するにはどうすればよいですか。つまり、「チーム」にホバーすると、その下にメニューが表示されるはずです。

また、左にシフトするように幅を調整するにはどうすればよいですか。

また、ドロップダウンメニューの長さが長い場合、コンテンツの下に隠れます。ドロップダウンメニューを非表示ではなく、ページの本文の上に配置したいです。

よろしくお願いします。

<style>
ul {
  font-family: Arial, Verdana;
font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
ul li {
  display: block;
  position: relative;
  float: left;
}
li ul { display: none; }
ul li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 1px solid #ffffff;
  padding: 5px 15px 5px 15px;
  background: #000061;
  margin-left: 1px;
  white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
  display: block;
  position: absolute;
}
ul li:hover li {
  float: none;
  font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
</style>

<body>
<ul id="menu">
  <li><a href=""><b>Home</b></a></li>
  <li><a href=""><b>About Us</b></a>
    <ul>
    <li><a href="">Team</a>
    <ul>
        <li><a href="">Profile</a></li>
        <li><a href="">Board</a></li>
    </ul>
    </li>
    </ul>
  </li>
<ul>
</body>

JSFiddle: http://jsfiddle.net/LWEry/

4

2 に答える 2

3

このような：

ul {
  font-family: Arial, Verdana;
font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
ul li {
  display: block;
  position: relative;
  float: left;
}
li ul { display: none; }
ul li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 1px solid #ffffff;
  padding: 5px 15px 5px 15px;
  background: #000061;
  margin-left: 1px;
  white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover > ul {
  display: block;
  position: absolute;
  width: 100%;
}
ul li:hover li {
  float: none;
  font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }

.sub-menu
 {
    position: absolute;
    top: 0;
    left: 100%;
 }

http://jsfiddle.net/3xWc​​u/2/

セレクターを1つ変えました。

から

li:hover ul

に

li:hover > ul

上記のフィドルを編集しました。Profile および Board li タグを含む ul にサブメニュー クラスを追加しました。

 <ul class="sub-menu">
    <li><a href="">Profile</a></li>
    <li><a href="">Board</a></li>
 </ul>

上記のCSSを追加しました。

于 2013-03-01T16:52:35.243 に答える
0

こんな感じですか？http://jsfiddle.net/3xWc​​u/

<style>
ul {
  font-family: Arial, Verdana;
font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
ul li {
  display: block;
  position: relative;
  float: left;
}
li ul { display: none; }
ul li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 1px solid #ffffff;
  padding: 5px 15px 5px 15px;
  background: #000061;
  margin-left: 1px;
  white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
  display: block;
  position: absolute;
  width: 100%;
}
ul li:hover li {
  float: none;
  font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
</style>

<body>
<ul id="menu">
  <li><a href=""><b>Home</b></a></li>
  <li><a href=""><b>About Us</b></a>
    <ul>
    <li><a href="">Team</a>
    <ul>
        <li><a href="">Profile</a></li>
        <li><a href="">Board</a></li>
    </ul>
    </li>
    </ul>
  </li>
<ul>
</body>
于 2013-03-01T16:49:39.117 に答える