# List & CSS Based Dropdown Menu

**URL:** <https://forum.kirupa.com/t/list-css-based-dropdown-menu/254364>\
**Category:** web dev\
**Created:** [March 11, 2008, 10:51am UTC](https://forum.kirupa.com/t/list-css-based-dropdown-menu/254364 "2008-03-11T10:51:24Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![thedaveyb](https://avatars.discourse-cdn.com/v4/letter/t/4af34b/32.png) [@thedaveyb](https://forum.kirupa.com/u/thedaveyb)\
**Post date:** [March 11, 2008, 10:51am UTC](https://forum.kirupa.com/t/list-css-based-dropdown-menu/254364/1 "2008-03-11T10:51:24Z")

</div>

Hi People…

I am well aware of the suckerfish dropdowns for creating CSS and List based dropdown menus - problem is i need one activated by on-click - anyone know of anything like that?.

Have looked at some ajax alternatives but their all js heavy with the links embedded in the JS and i need the links to be a list based menu.

Ta muchly _scratches head_ :sc:

---

<div class="post-metadata">

**Author:** ![Nav2k4](https://avatars.discourse-cdn.com/v4/letter/n/7ba0ec/32.png) [@Nav2k4](https://forum.kirupa.com/u/Nav2k4)\
**Post date:** [June 10, 2008, 11:01am UTC](https://forum.kirupa.com/t/list-css-based-dropdown-menu/254364/2 "2008-06-10T11:01:40Z")

</div>

is there a way to make the menu hide on mouse out?

---

<div class="post-metadata">

**Author:** ![simplistik](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/simplistik/32/7747_2.png) [@simplistik](https://forum.kirupa.com/u/simplistik)\
**Post date:** [June 12, 2008, 1:14pm UTC](https://forum.kirupa.com/t/list-css-based-dropdown-menu/254364/3 "2008-06-12T13:14:56Z")

</div>

```auto

$(".drop").bind
(
	"mouseleave",
	function() { $(this).siblings("ul").slideUp('fast'); }
);

```

---

<div class="post-metadata">

**Author:** ![w1sh](https://avatars.discourse-cdn.com/v4/letter/w/7feea3/32.png) [@w1sh](https://forum.kirupa.com/u/w1sh)\
**Post date:** [June 12, 2008, 1:32pm UTC](https://forum.kirupa.com/t/list-css-based-dropdown-menu/254364/4 "2008-06-12T13:32:28Z")

</div>

You’re really really good at what you do simp.

C’mon newbs, let’s bow.

---

<div class="post-metadata">

**Author:** ![simplistik](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/simplistik/32/7747_2.png) [@simplistik](https://forum.kirupa.com/u/simplistik)\
**Post date:** [June 12, 2008, 1:56pm UTC](https://forum.kirupa.com/t/list-css-based-dropdown-menu/254364/5 "2008-06-12T13:56:07Z")

</div>

Thanks, I’m only ok at it though, but I had amazing “teachers”

[voetsjoeba & [URL=“http://www.kirupa.com/forum/member.php?u=11757”]icio](http://www.kirupa.com/forum/member.php?u=4337)

they’re the only reason i know what i know, respeck

---

<div class="post-metadata">

**Author:** ![w1sh](https://avatars.discourse-cdn.com/v4/letter/w/7feea3/32.png) [@w1sh](https://forum.kirupa.com/u/w1sh)\
**Post date:** [June 12, 2008, 1:58pm UTC](https://forum.kirupa.com/t/list-css-based-dropdown-menu/254364/6 "2008-06-12T13:58:56Z")

</div>

I just like the fact that someone poses a question and you are like, “Oh, yeah here, I scripted that complex crap in about 5 mins while being attacked by dogs”.

Now answer my quick questions. 😛

Off topic: Is there some secret behind your site? I tried looking at the source and all, but nothing… Curiouser and curiouser.

---

<div class="post-metadata">

**Author:** ![simplistik](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/simplistik/32/7747_2.png) [@simplistik](https://forum.kirupa.com/u/simplistik)\
**Post date:** [June 12, 2008, 2:05pm UTC](https://forum.kirupa.com/t/list-css-based-dropdown-menu/254364/7 "2008-06-12T14:05:06Z")

</div>

[QUOTE=w1sh;2341371]I just like the fact that someone poses a question and you are like, “Oh, yeah here, I scripted that complex crap in about 5 mins while being attacked by dogs”.

Now answer my quick questions. 😛

Off topic: Is there some secret behind your site? I tried looking at the source and all, but nothing… Curiouser and curiouser.[/QUOTE]  
:lol: well I had that code cause I created a variation of it on a site we launched a little bit ago 🙂 :thumb:

as for my site, there’s no secret it’s just blank atm. i didn’t have content up there so i just took down the splash too :lol:

---

<div class="post-metadata">

**Author:** ![w1sh](https://avatars.discourse-cdn.com/v4/letter/w/7feea3/32.png) [@w1sh](https://forum.kirupa.com/u/w1sh)\
**Post date:** [June 12, 2008, 2:11pm UTC](https://forum.kirupa.com/t/list-css-based-dropdown-menu/254364/8 "2008-06-12T14:11:05Z")

</div>

[quote=simplistik;2341366]Thanks, I’m only ok at it though, but I had amazing “teachers”

[voetsjoeba & [URL=“http://www.kirupa.com/forum/member.php?u=11757”]icio](http://www.kirupa.com/forum/member.php?u=4337)

they’re the only reason i know what i know, respeck[/quote]  
Voetsjoeba’s site is pretty cool. The man appreciates his Flash. Lacking in the tuts. ☹

---

<div class="post-metadata">

**Author:** ![w1sh](https://avatars.discourse-cdn.com/v4/letter/w/7feea3/32.png) [@w1sh](https://forum.kirupa.com/u/w1sh)\
**Post date:** [June 12, 2008, 2:14pm UTC](https://forum.kirupa.com/t/list-css-based-dropdown-menu/254364/9 "2008-06-12T14:14:00Z")

</div>

[quote=simplistik;2341377]  
as for my site, there’s no secret it’s just blank atm. i didn’t have content up there so i just took down the splash too :lol:[/quote]  
You should really use that domain and make a \<!-- Comment Site --\> with macros for pictures and urls for links.  
The l33t would appreciate it. :sc:

---

<div class="post-metadata">

**Author:** ![simplistik](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/simplistik/32/7747_2.png) [@simplistik](https://forum.kirupa.com/u/simplistik)\
**Post date:** [June 12, 2008, 2:22pm UTC](https://forum.kirupa.com/t/list-css-based-dropdown-menu/254364/10 "2008-06-12T14:22:41Z")

</div>

> [@w1sh;2341387](#):
>
> Voetsjoeba’s site is pretty cool. The man appreciates his Flash. Lacking in the tuts. ☹

If he put tutorials on his site people would ask to many questions and he can’t be bothered w/ all that :lol: he’s a busy man [whisper]helping me when i need it lol[/whisper]

---

<div class="post-metadata">

**Author:** ![Nav2k4](https://avatars.discourse-cdn.com/v4/letter/n/7ba0ec/32.png) [@Nav2k4](https://forum.kirupa.com/u/Nav2k4)\
**Post date:** [June 13, 2008, 9:12am UTC](https://forum.kirupa.com/t/list-css-based-dropdown-menu/254364/11 "2008-06-13T09:12:33Z")

</div>

simplistik thanx for your response, that solution does work the only problem is that the drop down menu goes back up when the mouse leaves the top level link. So the menu is not really accessible. [Here](http://nav.servehttp.com/menu.htm)is an example of what i mean…

This is how i set out your solution:

```auto
    $(document).ready(function(){
        $(".drop").toggle(
            function () {
                $(this).siblings("ul").slideDown('fast');
            },
            function () {
                $(this).siblings("ul").slideUp('10000');
            }
        );
        $(".drop").bind
(
    "mouseleave",
    function() { $(this).siblings("ul").slideUp('fast'); }
);
    });

```

---

<div class="post-metadata">

**Author:** ![simplistik](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/simplistik/32/7747_2.png) [@simplistik](https://forum.kirupa.com/u/simplistik)\
**Post date:** [June 13, 2008, 12:35pm UTC](https://forum.kirupa.com/t/list-css-based-dropdown-menu/254364/12 "2008-06-13T12:35:46Z")

</div>

hmm yea, here i changed the js and the markup

```auto

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-language" content="en-US" />
<title>Page Title</title>
<style type="text/css" media="screen">
	ul, li { list-style: none; margin: 0; padding: 0; }
	ul li { margin: 0 0 0 20px; float: left; }
	ul li li { margin: 0; float: none; }
	ul ul { display: none; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>

	$(document).ready(function(){
		$(".drop").toggle(
			function () {
				$("ul", this).slideDown('fast');
			},
			function () {
				$("ul", this).slideUp('10000');
			}
		);
		$(".drop").bind
		(
			"mouseleave",
			function() { $("ul", this).slideUp('fast'); }
		);
	});

</script>

</head>
<body>
	<ul>

	    <li class="drop"><a href="#">Menu</a>
			<ul>
			    <li><a href="#">Link 1</a></li>
			    <li><a href="#">Link 2</a></li>
			    <li><a href="#">Link 3</a></li>
		  	</ul>
		</li>

		<li class="drop"><a href="#">Menu 2</a>
			<ul>
			    <li><a href="#">Link 4</a></li>
			    <li><a href="#">Link 5</a></li>
			    <li><a href="#">Link 6</a></li>
		  	</ul>
		</li>

	</ul>

</body>
</html>

```

---

<div class="post-metadata">

**Author:** ![Nav2k4](https://avatars.discourse-cdn.com/v4/letter/n/7ba0ec/32.png) [@Nav2k4](https://forum.kirupa.com/u/Nav2k4)\
**Post date:** [June 14, 2008, 12:31am UTC](https://forum.kirupa.com/t/list-css-based-dropdown-menu/254364/13 "2008-06-14T00:31:28Z")

</div>

Yep that fixed the issue, but the problem is now the links on the menu dont work using that mark up

[Here](http://nav.servehttp.com/menu.htm)is an example

```auto

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-language" content="en-US" />
<title>Page Title</title>
<style type="text/css" media="screen">
    ul, li { list-style: none; margin: 0; padding: 0; }
    ul li { margin: 0 0 0 20px; float: left; }
    ul li li { margin: 0; float: none; }
    ul ul { display: none; }
</style>
<script src="jquery-latest.js"></script>
<script>

    $(document).ready(function(){
        $(".drop").toggle(
            function () {
                $("ul", this).slideDown('fast');
            },
            function () {
                $("ul", this).slideUp('10000');
            }
        );
        $(".drop").bind
        (
            "mouseleave",
            function() { $("ul", this).slideUp('fast'); }
        );
    });

</script>

</head>
<body>
    <ul>

        <li class="drop"><a href="#">Menu</a>
            <ul>
                <li><a href="http://google.com">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
              </ul>
        </li>

        <li class="drop"><a href="#">Menu 2</a>
            <ul>
                <li><a href="#">Link 4</a></li>
                <li><a href="#">Link 5</a></li>
                <li><a href="#">Link 6</a></li>
              </ul>
        </li>

    </ul>

</body>
</html>

```

The link is active but when clicked nothing happens… interesting if you right click and open in new tab it works fine so im not sure whats going on with that

---

<div class="post-metadata">

**Author:** ![simplistik](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/simplistik/32/7747_2.png) [@simplistik](https://forum.kirupa.com/u/simplistik)\
**Post date:** [June 18, 2008, 1:30pm UTC](https://forum.kirupa.com/t/list-css-based-dropdown-menu/254364/14 "2008-06-18T13:30:52Z")

</div>

change it to:

```auto

	$(document).ready(function(){
		$(".drop").click(
			function () {
				$(this).children("ul").slideDown('fast');
			},
			function () {
				$(this).children("ul").slideUp('10000');
			}
		);
		$(".drop").bind
		(
			"mouseleave",
			function() { $("ul", this).slideUp('fast'); }
		);
	});

```

---

<div class="post-metadata">

**Author:** ![Nav2k4](https://avatars.discourse-cdn.com/v4/letter/n/7ba0ec/32.png) [@Nav2k4](https://forum.kirupa.com/u/Nav2k4)\
**Post date:** [June 19, 2008, 12:36am UTC](https://forum.kirupa.com/t/list-css-based-dropdown-menu/254364/15 "2008-06-19T00:36:40Z")

</div>

yep that worked thank you

---

<div class="post-metadata">

**Author:** ![Nav2k4](https://avatars.discourse-cdn.com/v4/letter/n/7ba0ec/32.png) [@Nav2k4](https://forum.kirupa.com/u/Nav2k4)\
**Post date:** [June 24, 2008, 4:21am UTC](https://forum.kirupa.com/t/list-css-based-dropdown-menu/254364/16 "2008-06-24T04:21:02Z")

</div>

hmm there seems to be an issue with ie7, the menu doesnt auto resize if one of the menu items disappears. On the other browsers it seems to work fine.

Here is what happens in IE7  
 ![](http://naveedious.googlepages.com/ie7.jpg)

And here is the Firefox example  
 ![](http://naveedious.googlepages.com/ffx.jpg)

In firefox it resizes the menu if one of the options disappears, any ideas on how to fix this for IE7?

This is the css im using for IE7

```auto
ul, li { list-style: none; margin: 0; padding: 0; }
	ul li { margin: 0 0 0 20px; float: left; }
	ul li li { margin: 0; float: none; }
	ul ul { display: none; border: 1px solid #369; padding: 4px 6px; margin: 15px 0 0 -35px; z-index: 1; position:absolute; }

```

---

<div class="post-metadata">

**Author:** ![fasterthanlight](https://avatars.discourse-cdn.com/v4/letter/f/ecc23a/32.png) [@fasterthanlight](https://forum.kirupa.com/u/fasterthanlight)\
**Post date:** [June 24, 2008, 1:23pm UTC](https://forum.kirupa.com/t/list-css-based-dropdown-menu/254364/17 "2008-06-24T13:23:29Z")

</div>

Got a link?