Question

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

我有一个选项正常工作，但在主页图标中，我不希望在悬停时显示的背景在图像的边框处闪烁，这是不需要的效果。

就是这样：.menu1 a：悬停， .Menu ul li：悬停 {}

HTML code：

<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

完成

在浏览下拉菜单时，将悬停效果保留在主菜单上？

1 个答案: