Hi all, Thanks to Google, I found an seo friendly dropdown menu. I have the original script running on my server, however, there seems to be an error in it. See: http://tinyurl.com/4yyge7w When you "hover" a menu item, you see the dropdown menu. If you try to move your mouse to a menu item in the dropdown list, then most of the times the dropdown menu dissapears (because you loose focus on the li element for a couple of milliseconds). Can somebody help me and tell me what's wrong or how I can improve this script? Page code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Drop Down Menu</title> <style type="text/css" media="screen"> ul#menu { background: #000000; color: #FFFFFF; margin: 0; padding: 5px 0px; } ul#menu li { display: inline; margin: 2px 15px; position: relative; } ul#menu h2,ul#menu h3 { font-size: 16px; font-weight: bold; display: inline; } ul#menu li a { color: #FFFFFF; text-decoration: none; padding: 0px 5px; } ul#menu li a:hover { text-decoration: underline; } ul#menu li.subMenu a { background: transparent url(menu_open.gif) center right no-repeat; padding: 0 17px; } ul#menu li.subMenu a:hover { text-decoration: underline; } ul#menu div { display: none; } ul#menu li.subMenu div { border: 1px solid #ffffff; width: 270px; position: absolute; top: 22px; left: 15px; padding: 20px; background: #000000; color: #FFFFFF; } ul#menu li.hovered div { display: block; } ul#menu li.subMenu div a { color: #FFC; padding: 0px; background-image: none; text-decoration: underline; display: block; } ul#menu div h3 { color: #f80; font-weight: bold; font-size: 18px; } ul#menu div p { margin: 0px 0px 14px 0px; padding: 0px 12px; } </style> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { function showSubMenu(){ $(this).addClass("hovered"); } function hideSubMenu(){ $(this).removeClass("hovered"); } $("li.subMenu").hover(showSubMenu,hideSubMenu) }); </script> </head> <body> <ul id="menu"> <li> <h2><a href="#">Home</a></h2> </li> <li class="subMenu"> <h2><a href="#">Articles</a></h2> <div> <h3>Programming</h3> <p><a href="#">C-C++</a> <a href="#">Java</a> <a href="#">Visual Basic</a> <a href="#">PERL</a></p> <h3>Web Development</h3> <p><a href="#">PHP</a> <a href="#">ASP</a> <a href="#">JSP</a></p> </div> </li> <li class="subMenu"> <h2><a href="#">Useful Links</a></h2> <div> <h3>Resources</h3> <p><a href="#">Today's Topics</a> <a href="#">Unanswered topics</a> <a href="#">Rules</a></p> <h3>Community</h3> <p><a href="#">Groups</a> <a href="#">Album</a> <a href="#">Buddies</a></p> <h3>Link With Message</h3> <p>Check Out Go4Expert's New <a href="#">Jobs Board</a></p> </div> </li> </ul> </body> </html> Code (markup): Thanks!
This works for me. However if you are facing a problem then problem only occurs on IE version. If you took a close look at your manu there should be a gap between menu and the drop down, i am 100% sure there is a gap between them.