Question

在没有更改所有菜单项的情况下，尝试仅使用灰色背景悬停时将服务链接设为橙色。

将鼠标悬停在服务上后，我无法点击示例链接。

    .menu
            {
            margin:0;
            padding:0;
             }

    .menu ul {

            padding-top: 40px;
            padding-left: 0px;
            line-height: 0px;
            margin-bottom: 0px;
            float: right;
        }

        ul li {
            display: inline;
        }


        ul li a:visited {
            text-decoration: none;
        }

        ul li a:hover, .menu ul li .current{
            color: #f7823b;
        }

        ul li {
          display: block;
          position: relative;
          float: left;
        }
        li ul { display: none; }

        ul li a {
            float: left;
            font-size: 20px;
          display: block;
          text-decoration: none;
          color: #ffffff;
          padding: 20px;
          margin-left: 1px;
          white-space: nowrap;

        }

        li:hover ul {
          display: block;

        }
        li:hover li {
          float: none;
          font-size: 11px;
        }
        ul ul li:hover a { background: #818285; }
        /*li:hover li a:hover { background: #818285;    width:100%; }*/

        ul ul {
            position: absolute;
            z-index: 500;
            margin:0;
            padding-top: 0px;
        }

        ul ul li a
        {
            padding: 20px 0px 20px 5px;
            width: 100%;
            background: #818285;
        }

    <div class="socialmedia">
      <a href="https://www.facebook.com/cyclonestrategies"><img class="button" src="http://lifeafterclass.com/cyclone/images/header/facebook.png" <="" img=""></a>
        <a href="https://twitter.com/CycloneStrategy"><img class="button" src="http://lifeafterclass.com/cyclone/images/header/twitter.png" <="" img=""></a>
        <a href="http://www.stumbleupon.com/stumbler/CyclonStrategies">
        <img class="button" src="http://lifeafterclass.com/cyclone/images/header/stumbleupon.png" <="" img=""></a>
        <a href="http://www.linkedin.com/company/cyclone-strategies-llc">
        <img class="button" src="http://lifeafterclass.com/cyclone/images/header/linkedin.png" <="" img=""></a>
    </div>

    <div class="menu">
        <ul id="menu">
            <li><a href="/">Home</a></li>
            <li><a href="/about-us"> About</a></li>
            <li class="special"><a href=""> Services</a>
            <ul>
            <li><a href="/digital-advertising">Digital Advertising</a></li>
            <li><a href="/promotion-management">Promotion Management</a></li>
            <li><a href="/social-media">Social Media</a></li>
            </ul>
        </li>
        <li><a href="/examples">Examples</a></li>
            <li><a href="/blog"> Blog</a> </li>
            <li><a href="contact-us"> Contact Us</a></li>
        </ul>

    </div>

        <div style="clear:both"></div>
</div>

我已经尝试了一切 - 任何帮助都表示赞赏。谢谢！ http://jsfiddle.net/8ARm5/

Answer 1

由于li包含的服务有一个类special，您可以在悬停时使用它来定位元素。

.special:hover{
  color: orange;
  background: grey;
}

Answer 2

尝试在li而不是a元素上添加鼠标悬停：

li:hover > a {
   color: #f7823b;
}

即使您在子菜单中指向链接，链接也会保持样式定义。看看：http://jsfiddle.net/8ARm5/5/

CSS下拉菜单错误 - 无法定位特定元素

2 个答案: