2

ナビゲーションメニュー用のCSSコードは次のとおりです。

#cssmenu *{
    z-index: 999
}
#cssmenu ul { margin: 0; padding: 0; text-align: center; }
#cssmenu li { margin: 0; padding: 0;}
#cssmenu a { margin: 0; padding: 0;}
#cssmenu ul {list-style: none;}
#cssmenu a {text-decoration: none;}
#cssmenu {
    height: 50px; 
    background-color: #74a5d4; /* main background color */
}
#cssmenu > ul > li {
    display: inline-block;
    margin-left: 15px;
    position: relative;
}
#cssmenu > ul > li > a {
    color: #FFFFFF; /* main link text color */
    font-size: 15px;
    line-height: 50px;
    padding: 16px 20px;
-webkit-transition: color .15s;
   -moz-transition: color .15s;
     -o-transition: color .15s;
        transition: color .15s;
}
#cssmenu > ul > li > a:hover {
    color: #ffffff; /* main link text hover color */
    background-color:#c3d021; /* main link background hover color */
}
#cssmenu > ul > li > ul {
    opacity: 0;
    visibility: hidden;
    padding: 16px 0 20px 0;
    background-color: #74a5d4; /*submenu link background color */
    text-align: left;
    position: absolute;
    top: 30px;
    left: 50%;
    margin-left: -90px;
    width: 180px;
-webkit-transition: all .3s .1s;
   -moz-transition: all .3s .1s;
     -o-transition: all .3s .1s;
        transition: all .3s .1s;
-webkit-border-radius: 5px;
   -moz-border-radius: 5px;
        border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
   -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
        box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}
#cssmenu > ul > li:hover > ul {
    opacity: 1;
    top: 50px;
    visibility: visible;
}
#cssmenu > ul > li > ul:before{
    content: '';
    display: block;
    border-color: transparent transparent rgb(250,250,250) transparent;
    border-style: solid;
    border-width: 10px;
    position: absolute;
    top: -20px;
    left: 50%;
    margin-left: -10px;
}
#cssmenu > ul ul > li { position: relative;}
#cssmenu ul ul a{
    color: #FFFFFF; /* submenu link text color */
    font-size: 13px;
    background-color: #74a5d4; /*submenu background color (behind links) */
    padding: 5px 8px 7px 16px;
    display: block;
-webkit-transition: background-color .1s;
   -moz-transition: background-color .1s;
     -o-transition: background-color .1s;
        transition: background-color .1s;
}
#cssmenu > ul > li:hover {
    background-color:#c3d021; /*background color that shows on the main menu link when hovering over the sub menu */
}
#cssmenu > ul > li:hover > a{
    color: #000000; /* main menu link hover text color */
}
#cssmenu ul ul ul {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: -16px;
    left: 206px;
    background-color:#74a5d4;
    padding: 16px 0 20px 0;
    text-align: left;
    width: 160px;
-webkit-transition: all .3s;
   -moz-transition: all .3s;
     -o-transition: all .3s;
        transition: all .3s;
-webkit-border-radius: 5px;
   -moz-border-radius: 5px;
        border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
   -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
        box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}
#cssmenu ul ul > li:hover > ul { opacity: 1; left: 196px; visibility: visible;}
#cssmenu ul ul a:hover{
    background-color: #c3d021; /*submenu link hover color */
    color:#000000;
}
#cssmenu > ul > li.active {
    background-color:#c3d021;
    color:#000000;
}

一番下のID：

#cssmenu > ul > li.active {
        background-color:#c3d021;
        color:#000000;
    }

ページがアクティブなときのアクティブ/現在のリンクを作成します。リンクの背景色を変更しますが、テキストの色は変更しません。私は何を間違っていますか？

アクティブなリンクの HTML は次のとおりです。

<li class="active"><a href="/home.php"><span>Homepage</span></a></li>
4

2 に答える 2

3

colorではなく、<a>それ自体に を適用する必要があります。<li>

#cssmenu > ul > li.active a {
color: black;
}

また、次の場合:

#cssmenu *{
position: relative; 
z-index: 999
}

z-indexは相対位置または絶対位置/固定位置を持つ要素にのみスタック コンテキストを作成できるため、position プロパティを含めるのを忘れました- 例外は css3 flex itemsです:

「Flex アイテムはインライン ブロック [CSS21] とまったく同じように描画しますが、「order」で変更されたドキュメントの順序が生のドキュメントの順序の代わりに使用され、「auto」以外の「z-index」の値がスタック コンテキストを作成することを除きます。 「位置」は「静的」です。」

于 2013-04-28T14:08:20.377 に答える
1

代わりに試してください：

a:link {
    //your styles
}a:visited {
    //your styles
}a:hover {
    //your styles
}a:hover {
    //your styles
}

そして、秩序が維持されていることを確認してください...

于 2013-04-28T14:10:51.143 に答える