-4

メニュー

テキストの上にカーソルを合わせると、下の青いブロックが青い線に沿って移動します。相対位置を介して青いブロックを上部 20px に設定すると、テキストも下に移動します。

CSS だけでこれを行う方法はありますか、それとも上半分を透明な gif に設定し、下半分を青色に設定した背景画像を使用する必要がありますか?

これまでに試したコードは次のとおりです。

#menu ul {
    list-style:none;
    margin:0;
    padding:10px;
    text-align:center;
}
#menu ul li {
    display:block;
    float:left;
    list-style:none;
    margin-right: 40px;
    font-family: Arial, Helvetica, sans-serif;
    color: #FFF;
    font-size: 14px;
    padding-top: 5px;
    padding-bottom: 5px;
    height: 39px;
}
#menu ul li a {
    display:block;
    margin:0px;
    padding:0px;
    color:#FFF;
    text-decoration:none;
    font-family: Arial, Helvetica, sans-serif;
    margin-right: 5px;
    margin-left: 5px;
    padding-left: 10px;
    padding-right: 10px;
}
#menu ul li a:hover {
    color:#fff;
    margin-bottom:5px;
    padding-bottom:5px;
}
#menu ul li a.active,
#menu ul li a.active:hover {
    color:#fff;
    background-color: #0488C5;
    font-weight:bold;
}

まだまだ勉強中なので、間違っていたらすみません！

4

3 に答える 3

2

デモについては、ここをクリックしてください。

​<ul>
    <li><a href="#" class="active">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Products</a></li>
</ul>

ul {
    width: 100%;
    border-bottom: 3px solid blue;
    overflow: hidden;
}

li {
    float: left;  
    margin: 0 20px 0 20px;                
}

li a {
    border-bottom: 20px solid #fff;
    display: block;
}

li a:hover, .active {
    border-bottom: 20px solid blue;
}

次に、そのページで適用できる「アクティブ」などの別のクラスにホバー状態を使用できます。

ニーズに合わせてこの例を微調整できるはずです。

画像は必要ありません。CSSはあなたのためにこれを行うことができる以上のものです。

于 2012-09-13T10:00:41.757 に答える
1

...................................。

ライブデモ

こんにちは今これは使用することが可能ですafter in css

簡単な例としてこれは

HTML

<ul>
  <li><a href="#">Home</a></li>
   <li><a href="#">Home</a></li>
   <li><a href="#">Home</a></li>
   <li><a href="#">Home</a></li>
   <li><a href="#">Home</a></li>
   <li><a href="#">Home</a></li>
</ul>

Css

   ul{
list-style:none;
  border-bottom:solid 10px blue;
}
li{
display:inline-block;
  vertical-align:top;
  background:red; 
}
li a{
text-decoration:none;
  display:inline-block;
  vertical-align:top;
  position:relative;
  padding-left:10px;
  padding-right:10px;
  padding-bottom:10px;
}

li:hover a:after{
content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:10px;
  background:blue;
}

LIveデモ

于 2012-09-13T10:01:36.023 に答える
0

順序付けされていないリストに3つのアンカーを配置し、リスト表示をなしに設定してリスト項目をフローティングにすることにより、それらをインラインで表示します。さらに、各アンカーに空のスパンを追加します。これは、：hover疑似セレクターでスタイルを設定できます。

CSSを学びましょう、その楽しみです！

于 2012-09-13T09:57:50.857 に答える