Drop down menu, i need help

deotpit · January 22, 2010, 7:37pm

Hi everyone,
I think i know how to create a drop down menu.
At the following code i create some area. When the mouse hovers above that area,
a “Drop down menu” appears at its right side, not inside its area.
If i want to select a menu item, the mouse leavs the area which is no more
at a “hover” event and so the nenu fades away and i cant select an item.
Could anyone explain me how to keep a menu visible after the mouse leaves
the area ? “Area”, i mean: An area which at the moment the mouse hovers on,
a menu appears.


<style type="text/css" media="all">
  #book 
   {
    border:1px solid red; 
    width:260px; 
    height:310px;
    float:left;
   }
  #book:hover #main_menu{display:block;}
  #main_menu
    {
     display:none;
     float:left;
     margin-left:500px;
    }
</style>
  
</head>

<body>
  <div id="book">
  <div id="main_menu">
    <ul>  
      <li><a href="#">item1</a></li>
      <li><a href="#">item2</a></li>
    </ul>
    </div>
  </div>
</body>
</html>

Thanks

RyanReese · January 22, 2010, 7:49pm

Hi, ignoring the not so great way this is setup, you could change it to padding

 #main_menu
    {
     display:none;
     float:left;[B]
     padding-left:500px;[/B]
    }

PaulOB · January 22, 2010, 7:50pm

You can’t move the child element away from the parent as it has to stay in contact to maintain the hover effect.

You could move the inner element instead while allowing the float to still stay in contact or add padding as in Ryans example above


#book {
    border:1px solid red;
    width:260px;
    height:310px;
    float:left;
}
#book:hover #main_menu {
    display:block;
}
[B]#main_menu {
    float:left;
    display:none;
}
#main_menu ul{margin-left:500px;}[/B]

Ie6 doesn’t understand hover on anything but anchors so you would need to use the suckerfish script or similar.

deotpit · January 22, 2010, 8:11pm

Hi,
Thanks a lot !
RyanReese’s code worked and i’m happy with that (and grateful too).
Far as ie6 is concerned, I tried to use a “csshover.htc” file but it failed to work so i gave up, intending to add a message warning not use ie6 with my page…
I’l read the link you added Paul O’B and see if this time i can handle ie6.
Thank you anyway for your response.

RyanReese · January 22, 2010, 9:11pm

You’re welcome

Paul gave a link for you to use. Basically it adds a class to any element being hovered upon that you choose (in suckerfishs case, <li>) and hten you just need to modify your hover rules to include actions for the class. Aka

#box:hover, #box.sfhover{ruleshere;}

deotpit · January 25, 2010, 2:16pm

Paul_O_B:

You can’t move the child element away from the parent as it has to stay in contact to maintain the hover effect.

You could move the inner element instead while allowing the float to still stay in contact or add padding as in Ryans example above
#book {
    border:1px solid red;
    width:260px;
    height:310px;
    float:left;
}
#book:hover #main_menu {
    display:block;
}
[B]#main_menu {
    float:left;
    display:none;
}
#main_menu ul{margin-left:500px;}[/B]
Ie6 doesn’t understand hover on anything but anchors so you would need to use the suckerfish script or similar.

Hi paul
I copied the code from that article you directed me to. Here is the code:


<style type="text/javascript">
sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</style>
<style type="text/css" media="all">
#nav, #nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

#nav a {
	display: block;
	width: 10em;
}

#nav li {
	float: left;
	width: 10em;
}
#nav li ul {
	position: absolute;
	width: 10em;
	left: -999em;
}

#nav li:hover ul , #nav li.sfhover ul  {
	left: auto;
}
</style>
</head>
<body>
<ul id="nav">
	<li><a href="#">Percoidei</a>
		<ul>
			<li><a href="#">Remoras</a></li>
			<li><a href="#">Tilefishes</a></li>
			<li><a href="#">Bluefishes</a></li>
			<li><a href="#">Tigerfishes</a></li>
		</ul>
	</li>

	<li><a href="#">Anabantoidei</a>
		<ul>
			<li><a href="#">Climbing perches</a></li>
			<li><a href="#">Labyrinthfishes</a></li>
			<li><a href="#">Kissing gouramis</a></li>
			<li><a href="#">Pike-heads</a></li>
			<li><a href="#">Giant gouramis</a></li>
		</ul>
	</li>

</ul>
</body>
</html>

It worked perfectly with “Google chrome” browser. With ie6 it didnt.
I guess something went wrong with the way i copied it, any idea i did wrong ?
Thanks.

RyanReese · January 25, 2010, 3:04pm

Chrome doesn’t need that suckerfish anyway :). Only IE6 doesn’t support :hover

Can you direct us to the site wehre this is at?

RyanReese · January 25, 2010, 3:05pm

Chrome doesn’t need that suckerfish anyway :). Only IE6 doesn’t support :hover

Can you direct us to the site wehre this is at?

PaulOB · January 25, 2010, 9:32pm

Hi,


<style type="text/javascript">

That should be a script tag not a style tag

The css needs adjusting as well as the suckerfish css is unstable.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<!--[if lt IE 7]>
<script type="text/javascript">

sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

</script>
<![endif]-->
<style type="text/css" media="all">
#nav, #nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
#nav a {
    display: block;
    width: 10em;
}
#nav li {
    float: left;
    width: 10em;
    position:relative;
}
#nav li ul {
    position: absolute;
    width: 10em;
    margin-left: -999em;
    left:0;
    top:100&#37;;
}
#nav li:hover ul, #nav li.sfhover ul {
    margin-left:0;
}
</style>
</head>
<body>
<ul id="nav">
    <li><a href="#">Percoidei</a>
        <ul>
            <li><a href="#">Remoras</a></li>
            <li><a href="#">Tilefishes</a></li>
            <li><a href="#">Bluefishes</a></li>
            <li><a href="#">Tigerfishes</a></li>
        </ul>
    </li>
    <li><a href="#">Anabantoidei</a>
        <ul>
            <li><a href="#">Climbing perches</a></li>
            <li><a href="#">Labyrinthfishes</a></li>
            <li><a href="#">Kissing gouramis</a></li>
            <li><a href="#">Pike-heads</a></li>
            <li><a href="#">Giant gouramis</a></li>
        </ul>
    </li>
</ul>
</body>
</html>

View source on my page for how you should do it.

deotpit · January 26, 2010, 7:01am

Thank you RyanReese and Paul O’B for grant me support with my first limp in css (to be honest, JS is what collapsed it this time…). Your correction Paul set it all right.

Topic		Replies	Views
Mouseout function help JavaScript	4	470	August 15, 2011
Maintaining Hover Effect on Drop Down Menu HTML & CSS	10	8262	October 8, 2014
Jquery hover issue, how would you solve this? JavaScript	1	656	October 8, 2014
CSS Dropdown Menu Issues HTML & CSS	7	2398	October 8, 2014
How do I get this dropdown menu to stay open? HTML & CSS	5	19250	May 31, 2022

Drop down menu, i need help

Related topics