在浏览下拉菜单时保持主菜单上的悬停效果？

Question

我想在浏览下拉菜单时在主菜单上保持悬停效果。

我有一个选项可以工作，但是在主页图标上，我不想在悬停时显示的背景在图像的边界处闪烁，这是不需要的效果。

就是这样：.menu1 a:hover, .Menu ul li:hover a{}

HTML代码：

<div class="Menu">


<span class='span-logo'>
<img src='log7.png'/>
</span>


<div class="ner">


<ul>


        <li class="home">
             <a href="#" ><img onmouseout="this.src='home.png'" onmouseover="this.src='home1.png'" src="home.png" width="25"; height="25"; alt="" /></a></li>


            <li><a class="menu1" href="#">Item1</a></li>
            <li class="menu1" class="drop">
                <a href="#">Item2</a>

                <div class="dropdownContain">
                    <div class="dropOut">
                        <div class="triangle"></div>
                        <ul>
                            <li>Blog 1</li>
                            <li>Blog 2</li>
                            <li>Blog 3</li>
                            <li>Blog Blog 4</li>
                        </ul>
                    </div>
                </div>

            </li>
            <li class="menu1"><a href="#">Item3</a></li>


<li class="menu1" class="drop">
                <a href="#">Item4</a>

                <div class="dropdownContain">
                    <div class="dropOut">
                        <div class="triangle"></div>
                        <ul>
                            <li>Blog 1</li>
                            <li>Blog 2</li>
                            <li>Blog Blog 3</li>
                            <li>Blog Blog 4</li>
                        </ul>
                    </div>
                </div>

            </li>
<li class="menu1"><a  href="#">Item5</a></li>
<li class="menu1"><a href="#">Item6</a></li>


</ul>
</div>
</div>

CSS代码：

.Menu {
    background: #44474B;
    display: block;
    position: fixed;
    width:900px;
    right: 0;
    top: 0;
    height: 55px;
    min-width: 100%;
    z-index: 9999;
   -webkit-box-shadow: 0px 0px 8px 0px #000000;

   -moz-box-shadow: 0px 0px 8px 0px #000000;

    box-shadow: 0px 0px 8px 0px #000000;

}

.Menu a{ padding:11px 18px; list-style:none; color:#FFF; text-decoration:none; 
        -webkit-transition: all .3s linear 0s;
    -moz-transition: all .3s linear 0s;
    -ms-transition: all .3s linear 0s;
    -o-transition: all .3s linear 0s;
    transition: all .3s linear 0s;}
.Menu ul{ float:left;}
.Menu li{position:relative; z-index:10; float:left; list-style:none; margin:0 15px; }



.menu1 a:hover, .menu1 ul li:hover a{border-radius:6px;
background: #ffa84c; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: -moz-linear-gradient(top,  #ffa84c 0%, #ff7b0d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffa84c), color-stop(100%,#ff7b0d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffa84c 0%,#ff7b0d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffa84c 0%,#ff7b0d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffa84c 0%,#ff7b0d 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffa84c 0%,#ff7b0d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#ff7b0d',GradientType=0 ); /* IE6-8 */

}

谢谢！

Answer 1

请替换下面 css 行

.menu1 a:hover, .menu1 ul li:hover a

和

.menu1 a:hover, .menu1 ul li:hover a, .menu1:hover > a

完成

在浏览下拉菜单时保持主菜单上的悬停效果？

Keep the hover effect on main menu, while browsing dropdown menu?

html

css

onhover

drop-down-menu