1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Dropdown menu dissapears

Discussion in 'CSS' started by kevina, Sep 9, 2011.

0
  1. #1
    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!
     
    kevina, Sep 9, 2011 IP
  2. BabBarDeL

    BabBarDeL Peon

    Messages:
    84
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Hi Kevin,

    Let me know in which browser you find that error ? I checked with Firefox 5 and looks ok.
     
    BabBarDeL, Sep 9, 2011 IP
  3. vpsrack

    vpsrack Peon

    Messages:
    34
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    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.
     
    vpsrack, Sep 9, 2011 IP
  4. Peter Davis

    Peter Davis Peon

    Messages:
    68
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    first tell me about your browser you are using.
     
    Peter Davis, Sep 29, 2011 IP