title: HTML/CSS menu hover links
body: <p>I have problem with my menu hover links. I have a menu
  HTML:</p>
  
  <pre><code>  &lt;div class="menu"&gt;
              &lt;ul id="nav"&gt;
                  &lt;li&gt;&lt;div&gt;&lt;a href="#"&gt;HOME&lt;/a&gt; &lt;div class="hover"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;div&gt;&lt;a href="#"&gt;ABOUT&lt;/a&gt;&lt;div class="hover"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;div&gt;&lt;a href="#"&gt;PORTFOLIO&lt;/a&gt;&lt;div class="hover"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;div&gt;&lt;a href="#"&gt;SERVICE&lt;/a&gt;&lt;div class="hover"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;div&gt;&lt;a href="#"&gt;BLOG&lt;/a&gt;&lt;div class="hover"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;div&gt;&lt;a href="#"&gt;CONTACT&lt;/a&gt;&lt;div class="hover"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.menu {
      width: 950px;
      height: 50px;
      float: right;
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-weight: bold;
      font-size: 12px;
      margin-top: 80px;
      border: 1px #FFF solid;
  }
  
  .menu #nav {
      list-style: none;   
  }
  
  .menu #nav li {
      display: inline-block;
      padding: 0px 30px 0px 30px;
  }
  
  .menu #nav li a {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-weight: bold;
      font-size: 12px;
      color: #FFF;
      text-decoration: none;
  }
  
  .menu #nav li a:hover {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-weight: bold;
      font-size: 12px;
      color: #FFF;
      text-decoration: none;
      color: #ca6666;
  }
  
  .menu #nav li a .hover {
      display:none;
  }
  
  
  .menu li a:hover + .hover {
      background-image:url(images/hover.png);
      background-position:center;
      width: 96px;
      height: 33px;
      color: #ca6666;
      font-weight: bold;  
      display: block;
      margin-top: -20px;
  }
  
  .clear {
      clear: both;
  }
  </code></pre>
  
  <p>and I want to make my links independent from others. For example now, when I hover over links my menu expands and it's not looking great. I want to make my hover links independent from others when I hover my menu not expands. How can I do that?</p>