title: dont need Css Hover effect on submenu items
body: <p>I want hover functionality only on Main Menu Items: FIRMS, Projects and Contact</p>
  
  <p>Currently when I hover on the rest of the body, it shows main menu items.
  I want the hover effect only when the mouse is over Firms, Projects and Contact.</p>
  
  <p>See my code below. I don't want a hover effect on sub-menu class items. What modifications are needed?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.sub-menu{
     
  }
  /* Layout */
  
  a {
   -moz-transition:color 0.3s ease-out;
   -webkit-transition:color 0.3s ease-out;
   -o-transition:color 0.3s ease-out;
   transition:color 0.3s ease-out;
  }
  
  
  /* HEADER MENU */
  
  #topmenu {
   margin:0 auto;
   padding:0 15px;
   position:relative;
   width:80%;
      float:right;
      height: auto;
      top: 20px;
      /* old previos top:100px;*/
  }
  #topmenu ul {
   margin:0;
   padding:0;
  }
  #topmenu ul li {
   float:left;
   position:relative;
   font-size:10px;
   list-style:none;
   margin:0;
   padding:0;
   width:auto;
   text-align:center;
   text-transform:uppercase;
   
  }
  #topmenu ul li:first-child {
   
  }
  #topmenu ul li a {
   margin-right: 60px;
   text-decoration:none;
   display:block;
  }
  #topmenu ul li a:hover {
   color:#999;
  }
  #topmenu ul li:hover &gt; a {
   color:#999;
  }
  
  
  
  #topmenu ul li ul.sub-menu {
      height: 100px;
   float:left;
      height:auto;
   list-style:none;
      z-index: 999;
      background-color: white;
   position:absolute;
   left:0px;
       width: 200px;
   opacity:0;
   visibility:visible;
   -moz-transition:opacity 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
   -webkit-transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
   -o-transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
   transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
  }
  #topmenu ul li ul.sub-menu li {
   border:none;
   border-bottom:1px solid #ccc;
   clear:both;
   margin-top:10px;
   padding:0;
      width: 100%;
   -moz-transition:opacity 0.1s 0.15s ease-out, margin 0.3s 0.1s ease-out;
   -webkit-transition:opacity 0.1s 0.15s ease-out, margin 0.3s 0.1s ease-out;
   -o-transition:opacity 0.15s 0.15s ease-out, margin 0.3s 0.1s ease-out;
   transition:opacity 0.15s 0.15s ease-out, margin 0.3s 0.1s ease-out;
  }
  
  #topmenu ul li ul.sub-menu li a {
  
      font-size: 14px;
      line-height: 35px;
      margin-right: 0px; 
  }
  #topmenu #topnav li:hover ul.sub-menu {
   opacity:1;
   visibility:visible;
  }
  #topmenu #topnav li:hover ul.sub-menu li {
   margin-top:0;
   opacity:1;
      
  }
  #topmenu #topnav li:hover ul.sub-menu li a {
   color:black;
   -moz-transition:color 0.1s ease-out;
   -webkit-transition:color 0.1s ease-out;
   -o-transition:color 0.1s ease-out;
   transition:color 0.1s ease-out;
  }
  #topmenu #topnav li:hover ul.sub-menu li a:hover {
   
   -moz-transition:color 0.3s ease-out;
   -webkit-transition:color 0.3s ease-out;
   -o-transition:color 0.3s ease-out;
   transition:color 0.3s ease-out;
  }
  #topmenu #topnav li:hover ul.sub-menu li:hover {
   
  
  }
  #topmenu #topnav li:hover ul.sub-menu li:hover &gt; a {
   color:#999;
  }
  
  @media screen and (max-width: 480px) {
      #topmenu ul li .sub-menu li
      {
              line-height: 35px;
      margin-left: -20px;
      border-bottom: 1px solid gray;
      width: 230px;
      }
        #topmenu ul li .sub-menu li a
      {
      width: 100%;
      line-height: 25px;
      float: left;
      }
       #topmenu ul li a{
          line-height: 0px;
       }
          
  #topmenu ul {
  overflow: hidden;
      height: 250px;
      position : inherit;
      margin-top: 20px;
      }
      #topmenu ul li 
      {
          text-align:left;
          width:100%;
          float:left;
      }
   #topmenu ul li a{
              width: 100%;
              float:left
              
      }
      
      .header-wrapper .menu-nav {
      float: left;
      
      }
      .menu-mymenu-container
      {
          margin: 0 !important;
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="topmenu" class="collapse navbar-collapse"&gt;
    &lt;div class="menu-mymenu-container"&gt;
              &lt;ul class="menu-nav nav navbar-nav" id="topnav" style="display: block;"&gt;
                  &lt;li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-17 first-child" id="menu-item-17"&gt;&lt;a href="http://localhost/architect/firm/"&gt;FIRM&lt;/a&gt;
                      &lt;ul class="sub-menu"&gt;
                           &lt;li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-118 first-child" id="menu-item-118"&gt;&lt;a href="http://localhost/architect/firm/profilemm/"&gt;Profile&lt;/a&gt;&lt;/li&gt;
                           &lt;li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-117" id="menu-item-117"&gt;&lt;a href="http://localhost/architect/philosophy/"&gt;Philosophy&lt;/a&gt;&lt;/li&gt;
                           &lt;li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-116" id="menu-item-116"&gt;&lt;a href="http://localhost/architect/structure/"&gt;Structure&lt;/a&gt;&lt;/li&gt;
                           &lt;li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-115" id="menu-item-115"&gt;&lt;a href="http://localhost/architect/services-sectors/"&gt;SERVICES + SECTORS&lt;/a&gt;&lt;/li&gt;
                           &lt;li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-114" id="menu-item-114"&gt;&lt;a href="http://localhost/architect/sustainability/"&gt;Sustainability&lt;/a&gt;&lt;/li&gt;
                           &lt;li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-113 last-child" id="menu-item-113"&gt;&lt;a href="http://localhost/architect/client-list/"&gt;Client List&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;/li&gt;
                  &lt;li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-18" id="menu-item-18"&gt;&lt;a href="http://localhost/architect/projects/"&gt;PROJECTS&lt;/a&gt;
                  &lt;ul class="sub-menu"&gt;
                   &lt;li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-142 first-child" id="menu-item-142"&gt;&lt;a href="http://localhost/architect/key-projects/"&gt;Key Projects&lt;/a&gt;&lt;/li&gt;
                   &lt;li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-143" id="menu-item-143"&gt;&lt;a href="http://localhost/architect/residential/"&gt;Residential&lt;/a&gt;&lt;/li&gt;
                   &lt;li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-140" id="menu-item-140"&gt;&lt;a href="http://localhost/architect/commercial/"&gt;Commercial&lt;/a&gt;&lt;/li&gt;
                   &lt;li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-139" id="menu-item-139"&gt;&lt;a href="http://localhost/architect/mixed-use/"&gt;Mixed Use&lt;/a&gt;&lt;/li&gt;
                   &lt;li class="menu-item menu-item-type-post_type &lt;menu-item&gt;    &lt;/menu-item&gt;-object-page menu-item-138" id="menu-item-138"&gt;&lt;a href="http://localhost/architect/education/"&gt;Education&lt;/a&gt;&lt;/li&gt;
                   &lt;li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-137" id="menu-item-137"&gt;&lt;a href="http://localhost/architect/hospitality/"&gt;Hospitality&lt;/a&gt;&lt;/li&gt;
                   &lt;li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-136" id="menu-item-136"&gt;&lt;a href="http://localhost/architect/retail/"&gt;Retail&lt;/a&gt;&lt;/li&gt;
                   &lt;li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-135" id="menu-item-135"&gt;&lt;a href="http://localhost/architect/masterplanning/"&gt;Masterplanning&lt;/a&gt;&lt;/li&gt;
                   &lt;li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-141 last-child" id="menu-item-141"&gt;&lt;a href="http://localhost/architect/projects/past-highlights/"&gt;Past Highlights&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-19 last-child" id="menu-item-19"&gt;&lt;a href="http://localhost/architect/contact/"&gt;CONTACT&lt;/a&gt;
              &lt;ul class="sub-menu"&gt;
                   &lt;li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-133 first-child" id="menu-item-133"&gt;&lt;a href="http://localhost/architect/general-information/"&gt;General Information&lt;/a&gt;&lt;/li&gt;
                   &lt;li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-134 last-child" id="menu-item-134"&gt;&lt;a href="http://localhost/architect/careers/"&gt;Careers&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;                
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://jsfiddle.net/JeZap/380/" rel="nofollow">http://jsfiddle.net/JeZap/380/</a></p>