0
  1. ホバー時にサービスリンクだけを灰色の背景でオレンジ色にしようとすると、すべてのメニュー項目を変更せずにそれを行うことはできません。

  2. サービスにカーソルを合わせた後、例のリンクをクリックできません。

        .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/

4

2 に答える 2

1

li含まれているサービスにはクラスがあるため、specialこれを使用してホバー時に要素をターゲットにすることができます。

.special:hover{
  color: orange;
  background: grey;
}
于 2013-02-03T23:07:02.587 に答える
0

linota要素にホバーを追加してみてください：

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

そうすることで、サブメニューでリンクを指定しても、リンクはスタイル定義を保持します。見てください：http://jsfiddle.net/8ARm5/5/

于 2013-02-03T23:36:33.240 に答える