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.
.menuulli: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
<ulclass="main-nav"><li><ahref="#">main nav-1</a></li><li><ahref="#">main nav-2</a><ulclass="sub-nav"><li><ahref="#">sub-nav-2.1</a></li><li><ahref="#">sub-nav-2.2</a></li><li><ahref="#">sub-nav-2.3</a></li></ul></div></li><li><ahref="#">main nav-3</a><li><ahref="#">main nav-4</a></ul>
css
ul.main-nav > li { position: relative; display: block; float: left; margin: 015px;}
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:hoverul.sub-nav { display: block; z-index: 999; }
check this one for live demo http://jsfiddle.net/q9YZf/
Post a Comment for "Displaying Submenus On Hover Without Javascript"