我试图在悬停菜单的一个特定子项时更改菜单 css 样式。不熟悉 jQuery答案

【问题标题】：I'm trying to change the menu css style while hovering one specific child of the menu. Not familiar with jQuery我试图在悬停菜单的一个特定子项时更改菜单 css 样式。不熟悉 jQuery
【发布时间】：2016-01-09 13:15:17
【问题描述】：

jQuery 似乎是要走的路，所以也许你们可以告诉我如何实现我想要的。我正在为 tumblr 网站创建一个下拉菜单。我现在差不多完成了，但是：当下拉菜单展开时，Tumblr 帖子不会下降，事实上，即使 z-axis=1，我的菜单也会粘在帖子后面。解决方案很简单，如果将鼠标悬停在整个菜单上，请在菜单下方添加一些边距，但是当我将鼠标悬停在没有子菜单的子菜单上时也会发生这种情况。为了使它更好看，我想在整个菜单上添加边距，就在悬停有孩子的孩子时 (class="aboutus")。这不能由 CSS 完成，我知道，但对 jQuery 几乎一无所知。我猜这可能并不难，但是...

我不是这方面的专家，事实上我在 2 周前就开始学习 html 和 css，因此感谢您的帮助。

HTML

<div class="menu-wrap">
<nav class="menu">
    <ul class="clearfix">
        <li class="twitter"><a href="https://twitter.com/correocaminos">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
        <li class="aboutus">
            <a href="/aboutus">SOBRE NOSOTROS&nbsp;<span class="arrow">&#9660;</span></a>
            <ul class="sub-menu">
                <li><a href="/asociacioncultural">ASOCIACIÓN CULTURAL</a></li>
                <li><a href="/equipo">EQUIPO</a></li>
            </ul>
        </li>
        <li><a href="/revista">LA REVISTA</a></li>
        <li><a href="/unete">ÚNETE</a></li>
        <li class="issuu"><a href="https://issuu.com/correocacultural">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
    </ul>
</nav>
</div>

CSS

.clearfix:after {
display:block;
clear:both;
}

/*----- Menu Outline -----*/
.menu-wrap {
    width:100%;
    box-shadow:0px 1px 3px rgba(0,0,0,0.2);
    background:{TitleColor};
}

.menu {
    width:100%;

}

.menu:hover {
    margin:0 0 70px 0;
}

.menu li {
    margin:0 auto;
    list-style:none;
    font-family: {TitleFont}, "Helvetica Neue", HelveticaNeue, Arial, sans-serif;
    font-weight: {TitleFontWeight};
}

.menu a {
    transition:all linear 0.15s;
    color: {AccentColor};
    text-decoration: none;
}

.menu li:hover > a, .menu .current-item > a {
    text-decoration:none;
}

.menu .arrow {
    font-size:15px;
    line-height:0%;
}

/*----- Top Level -----*/
.menu > ul > li {
    float:left;
    display:inline;
    position:relative;
    font-size:20px;
    z-index: 1;
}

.menu > ul > li > a {
    padding:10px 20px;
    display:inline-block;
}

.menu > ul > li:hover > a, .menu > ul > .current-item > a {
    background:{AccentColor};
    color: {TitleColor};
}

/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
    z-index:1;
    opacity:1;
}

.sub-menu {
    width:120%;
    padding:5px 0px;
    position:absolute;
    top:26px;
    left:0px;
    z-index:1;
    opacity:0;
    transition:opacity linear 0.15s;
    box-shadow:0px 2px 3px rgba(0,0,0,0.2);
    background:{TitleColor};
}

.sub-menu li {
    display:block;
    font-size:18px;
}

.sub-menu li a {
    padding:10px 20px;
    display:block;
}

.sub-menu li a:hover, .sub-menu .current-item a {
    background:{AccentColor};
    color: {TitleColor};
}
.twitter {
    background-image: url('http://i.imgur.com/g5BqVFr.png');
    background-repeat: no-repeat;
    background-position: 50% 8px;
}
.menu > ul > .twitter:hover > a {
    background-image: url('http://i.imgur.com/1IVH284.png');
    background-repeat: no-repeat;
    background-position: 50% 8px;
}
.issuu {
    background-image: url('http://i.imgur.com/NsM9xT2.png');
    background-repeat: no-repeat;
    background-position: 50% 8px;
}
.menu > ul > .issuu:hover > a {
    background-image: url('http://i.imgur.com/kbGIHN4.png');
    background-repeat: no-repeat;
    background-position: 50% 8px;
}

编辑：网页如下：http://correocaminos.tumblr.com

    .clearfix:after {
    display:block;
    clear:both;
}
 
/*----- Menu Outline -----*/
.menu-wrap {
    width:100%;
    box-shadow:0px 1px 3px rgba(0,0,0,0.2);
    background:{TitleColor};
}
 
.menu {
    width:100%;
    
}

.menu:hover {
    margin:0 0 70px 0;
}
 
.menu li {
    margin:0 auto;
    list-style:none;
    font-family: {TitleFont}, "Helvetica Neue", HelveticaNeue, Arial, sans-serif;
    font-weight: {TitleFontWeight};
}
 
.menu a {
    transition:all linear 0.15s;
    color: {AccentColor};
    text-decoration: none;
}

.menu li:hover > a, .menu .current-item > a {
    text-decoration:none;
}
 
.menu .arrow {
    font-size:15px;
    line-height:0%;
}
 
/*----- Top Level -----*/
.menu > ul > li {
    float:left;
    display:inline;
    position:relative;
    font-size:20px;
    z-index: 1;
}
 
.menu > ul > li > a {
    padding:10px 20px;
    display:inline-block;
}
 
.menu > ul > li:hover > a, .menu > ul > .current-item > a {
    background:{AccentColor};
    color: {TitleColor};
}
 
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
    z-index:1;
    opacity:1;
}
 
.sub-menu {
    width:120%;
    padding:5px 0px;
    position:absolute;
    top:26px;
    left:0px;
    z-index:1;
    opacity:0;
    transition:opacity linear 0.15s;
    box-shadow:0px 2px 3px rgba(0,0,0,0.2);
    background:{TitleColor};
}
 
.sub-menu li {
    display:block;
    font-size:18px;
}
 
.sub-menu li a {
    padding:10px 20px;
    display:block;
}
 
.sub-menu li a:hover, .sub-menu .current-item a {
    background:{AccentColor};
    color: {TitleColor};
}
.twitter {
    background-image: url('http://i.imgur.com/g5BqVFr.png');
    background-repeat: no-repeat;
    background-position: 50% 8px;
}
.menu > ul > .twitter:hover > a {
    background-image: url('http://i.imgur.com/1IVH284.png');
    background-repeat: no-repeat;
    background-position: 50% 8px;
}
.issuu {
    background-image: url('http://i.imgur.com/NsM9xT2.png');
    background-repeat: no-repeat;
    background-position: 50% 8px;
}
.menu > ul > .issuu:hover > a {
    background-image: url('http://i.imgur.com/kbGIHN4.png');
    background-repeat: no-repeat;
    background-position: 50% 8px;
}

<div class="menu-wrap">
    <nav class="menu">
        <ul class="clearfix">
            <li class="twitter"><a href="https://twitter.com/correocaminos">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
            <li class="aboutus">
                <a href="/aboutus">SOBRE NOSOTROS&nbsp;<span class="arrow">&#9660;</span></a>
 
                <ul class="sub-menu">
                    <li><a href="/asociacioncultural">ASOCIACIÓN CULTURAL</a></li>
                    <li><a href="/equipo">EQUIPO</a></li>
                </ul>
            </li>
            <li><a href="/revista">LA REVISTA</a></li>
            <li><a href="/unete">ÚNETE</a></li>
            <li class="issuu"><a href="https://issuu.com/correocacultural">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
        </ul>
    </nav>
</div>

【问题讨论】：

把它放在小提琴/codepen中，这样我们就可以看到一个工作示例。
完成。这是我第一次对 StackOverflow 发表评论，所以真的不知道这是否是您要问的。此外，代码中的颜色是指 tumblr 输入，因此要查看完整的工作示例，您可以访问网站。

标签： jquery html css menu tumblr

【解决方案1】：

我已经更改了一些 css

.clearfix:after {
  clear:both;
  content:'';
  display: table;
}

.sub-menu {
    width:120%;
    padding:5px 0px;
    position:absolute;
    top:46px;
    left:0px;
    z-index:1;
    opacity:0;
    transition:opacity linear 0.15s;
    box-shadow:0px 2px 3px rgba(0,0,0,0.2);
    background:{TitleColor};
}

https://jsfiddle.net/rejhz9fv/2/

【讨论】：