Question

1. Trying to make just the services link orange on hover with a gray background- can’t do it without changing all the menu items.

2. I can’t click on the examples link after hovering over services.

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

I’ve tried everything- any help is appreciated. Thanks!
http://jsfiddle.net/8ARm5/

Answer 1

Try to add hover on li not a element:

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

Doing so the link keeps style definition even if you points links in submenu.
Take a look: http://jsfiddle.net/8ARm5/5/