2

誰かが私を正しい方向に導いてくれることを願っています。私は CSS で :before と :after を使用する方法を学んでいたので、メニュー ナビゲーションを作成しようとしましたが、どういうわけか、右の影の画像を :before と :after として表示することで、思いどおりに作成することができましたが、すぐにメニューをロールオーバーすると、メニューが上がります。パディングとマージンを入れようとしまし!importantたが、何も機能しませんでした。

私の2番目の問題は<li>、リンクがありますが、テキスト<a>のロールオーバーの色のみを変更することです。メニュー全体の色を変えたいのですがうまくいきません。私のコードはこの JsFiddle にあります: <li>

HTML:

<div id="menu"> 
    <ul>
        <li class="proxima_bold"><a href="#">Menu1</a></li>
        <li class="proxima_bold"><a href="#">Menu2</a></li>
        <li class="proxima_bold"><a href="#">Menu3</a></li>
        <li class="proxima_bold"><a href="#">Menu4</a></li>

    </ul>
</div>​

CSS:

#menu {
  text-transform:uppercase;
  position:relative;
}

#menu ul{
    margin: 0; padding: 0;
    float: left;
    margin-top:-10px !important;
    color:#787878;
}
#menu ul li{
    display: inline;
    float: left; 
    padding: 20px 15px 20px 15px;
    color:#787878;
    background: url(http://www.example.com/p7lpz) no-repeat 0 20px;  
}

#menu ul li:hover{ 
  background: url(http://www.example.com/2v4ik) repeat-x; 
  padding:0;
  margin:0; 
  color: #7fc652 !important;
  cursor:pointer;
}

#menu ul li a {  
  color: #787878;
  display:inline-block;
}
#menu ul li a:hover {  
  color: #7fc652;
}

#menu ul li:hover:after, 
#menu ul li:hover:before{
  content: "";
  position:relative;
  top:0;
  width:15px;
  height:55px;
  display:inline-block;
  vertical-align:middle; 
}

#menu ul li:hover:after{ 
  right: -15px;
  background: url(http://www.example.com/9tly4) no-repeat 0 0;  
}

#menu ul li:hover:before{ 
  left: -15px;
  background: url(http://www.example.com/u969z) no-repeat 0 0;  
}

#menu ul li .selected{
    float: left; 
    text-decoration: none;
    font-weight:bold;
    color: white;
    padding: 0 20px 0 20px;
    color:#444;
    background: url(http://www.example.com/p7lpz) no-repeat 0 0; 
}

これを修正する方法を教えてください。

自分で修正しました。ありがとうございました。

4

1 に答える 1

0

これは、あなたの望むことですか？画像が何をすべきかわかりません。

jsfiddle

于 2012-10-03T21:04:46.317 に答える