Displaying Submenus On Hover Without Javascript

I have a webpage that uses jquery to display a submenu div while a user is hovering over an a:link in the main parent menu. $('.menu ul li').hover(function() { $(this).find('

Solution 1:

Use the :hover CSS pseudo-class.

.menu ul li:hover .dropnav {
    opacity: 1;
    /* display: block; ? */
}

Solution 2:

Here is a pretty solid example of a CSS based menu. There is JavaScript that goes with it, if you are looking for backwards compatibility to IE6.

http://qrayg.com/learn/code/cssmenus/

Solution 3:

HTML

<ul class="main-nav">
      <li><a href="#">main nav-1</a>        
      </li>
      <li><a href="#">main nav-2</a>       
          <ul class="sub-nav">
            <li><a href="#">sub-nav-2.1</a></li>
            <li><a href="#">sub-nav-2.2</a></li>
            <li><a href="#">sub-nav-2.3</a></li>
          </ul>
        </div>
      </li>
     <li><a href="#">main nav-3</a>
     <li><a href="#">main nav-4</a>   
    </ul>

css

ul.main-nav > li { position: relative; display: block; float: left;  margin: 0 15px;}
ul.main-nav > li > a {display: block; line-height: 40px; }
ul.sub-nav { display:none; position: absolute; top: 40px; left: 0; min-width: 200px;}
ul.main-nav > li:hover ul.sub-nav { display: block; z-index: 999; }

check this one for live demo http://jsfiddle.net/q9YZf/