0

現在、親メニューにはホバー時の不透明度の変化があり、これはサブメニュー (現在および前) にも転送されています。親の不透明度バンドだけが見えるように、サブメニューの背景を明確にしたいと思います。サブメニューに li クラスを使用して、親を管理している li クラスから除外する方法はありますか。いろいろ試しているのですが、うまく動かないようです。

デモ

HTML

<div>
    <ul id="mainmenu">
        <li class="liHome">
            <a class="maintextcolour" href="#item-x1y1" id="Home" rel=
            "none">INFO</a>
        </li>

        <li class="liServices">
            <a class="maintextcolour" href="#item-x1y2" id="Services" rel=
            "SubMenuY2">EXHIBITIONS</a>

            <ul class="submenu" id="SubMenuY2">
                <li class="sub1">
                    <a class="maintextcolour" href="#">CURRENT</a>
                </li>

                <li class="sub1">
                    <a class="maintextcolour" href="#">PREVIOUS</a>
                </li>
            </ul>
        </li>

        <li id="liEnvironment">
            <a class="maintextcolour" href="#item-x1y3" id="Environment"
            rel="none">CV</a>
        </li>

        <li id="liCareer">
            <a class="maintextcolour" href="#item-x1y4" id="Career" rel=
            "none">NEWS</a>
        </li>

        <li id="liContact">
            <a class="maintextcolour" href="#item-x1y5" id="Contact" rel=
            "none">MORE</a>
        </li>
    </ul>
</div>

CSS :

@charset  UTF-8;

/* CSS Document */
body {
    background-color: #666;
    background-size: 100%;
    background-repeat: no-repeat;
}

#mainmenu {
    margin: 0;
    padding: 0;
    list-style-type: none;
    position: relative;
}

#mainmenu li {
    clear: left;
    position: relative;
}

#mainmenu a {
    display: block;
    overflow: hidden;
    float: left;
    width: 100%;
    position: relative;
    opacity: 1;
    -webkit-transition: all .4s ease-in-out;
    padding-left: 20px;
}

#mainmenu li:hover a {
    background-position: 0 0;
    background-color: clear;
    background-color: rgba(255,255,255,0.5);
    width: 100%;
    opacity: 0;
    -webkit-transition: none;
}

#mainmenu li.active a {
    background-position: 0 0;
    background-color: clear;
    width: 100%;
}

.submenu {
    list-style-type: none;
    float: left;
    display: none;
    position: absolute;
    left: 135px;
    top: 0;
    width: auto;
}

#mainmenu li a:hover + .submenu,.submenu:hover {
    display: block;
}

.submenu li {
    display: inline-block;
    clear: none !important;
}

.submenu li a {
    float: right;
    margin-left: 10px;
}

.maintextcolour {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    color: #FFF;
    text-decoration: none;
}

.maintextcolour:hover {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    color: #0FF;
    text-decoration: none;
}

.headertext {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #FFF;
    text-decoration: none;
}
4

1 に答える 1

4

更新されたFiddle リンクは次のとおりです。次の css に色を追加しました。

#mainmenu > li:hover > a {
  background-position: 0 0;
  background-color:clear;
    color:#0fffff;
  background-color:rgba(255,255,255,0.5);
   width:100%;
   \
 opacity: 0;
    -webkit-transition: none;
}

これが欲しいと願っています。

于 2013-07-01T04:57:06.033 に答える