1

好的，所以我在这里有一个问题的 jsfiddle：http: //jsfiddle.net/WF3QX/1/

全屏结果在这里：http: //jsfiddle.net/WF3QX/1/embedded/result/

我试图摆脱将鼠标a:hover悬停在菜单 2 项上时弹出的子菜单上的 box-shadow 插图，但对此我一点运气都没有。我宁愿只针对第一个<ul> <li> <a>元素而不是<ul> <li> <ul> <li> <a>元素。我已经尝试了所有我能想到的方法，方法是使用>符号来抓住直接的孩子，但这似乎根本没有帮助。

HTML如下（在body标签内）：

<nav id="main_menu" class="nav center">
    <ul class="menu">
        <li><a accesskey="1" href="#">Menu 1</a></li>
        <li class="current">
            <a accesskey="2" href="#">Menu 2</a>
            <ul class="sub_menu">
                <li><a href="#">Sub 1</a></li>
                <li><a href="#">Sub 2</a></li>
                <li><a href="#">Sub 3</a></li>
            </ul>
        </li>
        <li><a accesskey="3" href="#">Menu 3</a></li>
        <li><a accesskey="4" href="#">Menu 4</a></li>
        <li><a accesskey="5" href="#">Menu 5</a></li>
        <li><a accesskey="6" href="#">Menu 6</a></li>
        <li><a accesskey="7" href="#">Menu 7</a></li>
    </ul>
</nav>

CSS如下：

nav#main_menu {
    height: 3em;
    width: 100%;
    background: #A92A23;
    font-size: .8em;
    font-family: "MissionGothic-Regular", "Mission Gothic Regular Regular", "mission_gothicregular";
    position: relative;
    margin-top: -.3em;
    border-bottom: .15em solid #7c211c;
    border-top: .15em solid #7c211c;
    z-index: 1001;
}
ul.menu {
    padding: 0;
    width: 100%;
    height: 3em;
    margin: 0px;
}
nav#main_menu li {
    display: inline;
    margin-left: -.2em;
}
nav#main_menu ul.menu li a {
    display: inline-block;
    width: 13.2%;
    text-align: center;
    text-decoration: none !important;
}
nav#main_menu ul.menu li > a {
    border-right: 1px solid #576979;
    color: #f2efe9;
    background: #A92A23;
    line-height: 3em;
    /* text-shadow: 1px 1px 0px #7c211c; */
    -o-transition: color .2s ease-out, background .5s ease-in;
    -ms-transition: color .2s ease-out, background .5s ease-in;
    -moz-transition: color .2s ease-out, background .5s ease-in;
    -webkit-transition: color .2s ease-out, background .5s ease-in;
    /* ...and now override with proper CSS property */
    transition:color .2s ease-out, background .5s ease-in;
}

nav#main_menu ul.menu li a {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    text-transform: uppercase;
}
nav#main_menu:first-child li {
    margin-left: 0px !important;
}
nav#main_menu ul.menu li:last-child a {
    border-right: 0;
}
nav#main_menu ul.menu li > a:hover, nav#main_menu ul.menu li > a:active, nav#main_menu ul.menu li.current > a {
    background-color: #f2efe9;
    color: #A92A23;
    -webkit-box-shadow: -0.2em 0px 0.15em -0.2em rgba(0, 0, 0, 0.8), inset 0px 0.7em 0.7em -0.5em rgba(0, 0, 0, 0.5);
    -moz-box-shadow: -0.2em 0px 0.15em -0.2em rgba(0, 0, 0, 0.8), inset 0px 0.7em 0.7em -0.5em rgba(0, 0, 0, 0.5);
    box-shadow: -0.2em 0px 0.15em -0.2em rgba(0, 0, 0, 0.8), inset 0px 0.7em 0.7em -0.5em rgba(0, 0, 0, 0.5);
}
nav#main_menu ul.menu li.current > a {
    height: 3.15em;
    border-left: none;
    border-right: none;
    z-index: 2;
}
nav#main_menu a#pull {
    display: none;
}
.desc, .h4_desc, .desc_bold {
    line-height: 1.5em;
}
li ul.sub_menu {
    display: none;
    position: absolute;
    left: 0;
    top: 3.1em;
    width: 100%;
    height: 0;
    background-color: #f2efe9 !important;
    border-bottom: .15em solid #605953;
    -webkit-transition: height .25s ease .1s;
    -moz-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
}
li.current ul.sub_menu li {
    overflow: hidden;
    padding: 0;
    float: none;
}
li.current:hover ul.sub_menu {
    height: auto;
    display: block;
}
li.current:hover ul.sub_menu li {
    overflow: hidden;
}
nav#main_menu ul.menu ul.sub_menu a { 
    padding: .5em .8em;
    border-left: none;
    border-right: none;
    width: auto !important;
    color: #A92A23 !important;
    background: none !important;
    border: none !important;
    height: 0;
}

我不希望这些 CSS 规则影响ul页面上的任何其他元素，所以我对它们的声明有点严格。

基本上，我真正想做的是当用户将鼠标悬停在高度上时ul.sub_menu，将transitioncss 代码放在高度上Menu 2，这是行不通的。但是我遇到的另一个问题是如何获得a:hover唯一的nav#main_menu ul.menu li a:hover元素而不是子a:hover元素 ul.sub_menu li？

4

2 回答 2

2

摆脱nav#main_menu ul.menu li > a:hover, nav#main_menu ul.menu li > a:active所以box-shadow类只保留nav#main_menu ul.menu li.current > a。

这里的工作示例：http: //jsfiddle.net/WF3QX/3/

更新：

使选择器更具体：

nav#main_menu ul.menu > li > a:hover, nav#main_menu ul.menu > li > a:active, nav#main_menu ul.menu > li.current > a

示例：http: //jsfiddle.net/WF3QX/5/

于 2013-09-02T23:55:53.947 回答
0

我认为您只是忘记首先使用额外的子选择器来定位正确的链接：

nav#main_menu ul.menu > li > a
于 2013-09-02T23:58:09.207 回答