0

タブにカーソルを合わせると変更されてうまく機能するCSSスライドドアナビゲーションメニューを構築してきましたが、リンクがアクティブなときに変更したいのですが、アクティブなルールが機能しないようです私のCSS。誰かが解決策について何か提案があれば、私はそれを大いに感謝します!

これはCSSコードです:

 .menu {
 position: absolute;
 float: left;
 color: #1e1e1e;
 width: 1000px;
 font-size:17px;
 margin-left: -35px;
 z-index: 2;
 }

 .menu ul {
 list-style-type: none;
 margin-top: 136px;
 position: absolute;
 color:#1e1e1e;
 margin-left: -5px;
 }

 .menu ul li {
 float: left;
 position: relative;
 padding-right: 0px;

 }

 .menu ul li a {
 text-align: left;
 display:block;
 text-decoration:none;
 color:#1e1e1e;
 text-align: right;
 }


 .menu ul li a:hover {
 color: #ffffff;
 text-decoration: bold;
 }


 .menu ul li ul {
 color: #ffffff;
 text-decoration: bold;
 }

 .menu ul li:hover ul {
 display: block;
 position: absolute;
 margin-top: 8px;
 text-decoration:bold;
 color: #ffffff;
 }

 .menu ul li:hover ul li a {
 display:block;
 background:#000000;
 color:#ffffff;
 width: 100px;
 text-align: left;
 text-decoration:bold;
 }

 .menu ul li:hover ul li a:hover {
 background:#000000;
 color:#fff;
 text-decoration:bold;

 }

.home span {
background: transparent url('images/home.gif') no-repeat top left; 
display: block;
line-height: 42px;
padding: 7px 0 0px 0px; 
width:110px;

}

.home:hover span {
background: transparent url('images/home.gif') no-repeat top right; 
display: block;
line-height: 42px;
padding: 7px 0 0px 0px; 
width:110px;
}

.home:active span {
background: transparent url('images/home.gif') no-repeat top right; 
display: block;
line-height: 42px;
padding: 7px 0 0px 0px; 
width:110px;
}

.necklaces span {
background: transparent url('images/necklaces.gif') no-repeat top left; 
display: block;
line-height: 42px; 
padding: 7px 0 5px 0px;
width:142px;

 }

.necklaces:hover span {
background: transparent url('images/necklaces.gif') no-repeat top right;  
display: block;
line-height: 42px; 
padding: 7px 0 5px 0px;
width:142px;
}

.necklaces:active span {
background: transparent url('images/necklaces.gif') no-repeat top right; 
display: block;
line-height: 42px; 
padding: 7px 0 5px 0px;
width:142px;
}

<!--.....................................-->

<!--This is the HTML code -->


<div class="menu" float="left">
<ul>


<li class="home">
<a href="http://html-link"><span>.</span></a>
</li>


<li class="necklaces">
<a href="http://html-link"><span>.</span></a>
</li>


</ul></div>`}
4

1 に答える 1

2

アクティブなリンクを強調表示する 3 つの方法の解決策を示す記事へのリンクを次に示します。

CSS で現在のページへのリンクを強調表示する 3 つの方法

個人的には、アクティブなリンクを強調表示するために jQuery を使用しています。

うまくいけば、これが問題の解決に役立ちます。

于 2012-03-11T09:03:18.400 に答える