# Need CSS help - drop down menu

**URL:** https://boards.straightdope.com/t/need-css-help-drop-down-menu/486578
**Category:** Factual Questions
**Created:** [February 19, 2009, 6:47pm UTC](https://boards.straightdope.com/t/need-css-help-drop-down-menu/486578 "2009-02-19T18:47:04Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![Silver\_Tyger](https://avatars.discourse-cdn.com/v4/letter/s/fbc32d/32.png) [@Silver\_Tyger](https://boards.straightdope.com/u/Silver_Tyger)
#### Post date: [February 19, 2009, 6:47pm UTC](https://boards.straightdope.com/t/need-css-help-drop-down-menu/486578/1 "2009-02-19T18:47:04Z")

</div>

I don’t why I can’t find a script to do this. Maybe I’m just dense (certainly likely - I’m not really a web designer, although generally I can muddle through.)

I’m hand-coding my page, cuz that’s what I’m used to, but I can’t find a script that I can get to do what I want. Sigh, the jump up from HTML 4 is a big one.

What I want is, I thought, fairly simple. It’s a vertical menu that basically looks like a definition list. I want to be able to click on the titles and for the list entries to appear. I know I’ve seen it done. I don’t want any images or submenus. I’m using this for the archive for my webcomic site. I have two comics and I’d like to be able to display the comic names separately.

The one tricky thing, is that I want the list entries to be color-coded. I already have classes set up in my stylesheet for that.

Any web gurus want to help?

---

<div class="post-metadata">

### Author: ![ZipperJJ](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/zipperjj/32/211_2.png) [@ZipperJJ](https://boards.straightdope.com/u/ZipperJJ)
#### Post date: [February 19, 2009, 7:02pm UTC](https://boards.straightdope.com/t/need-css-help-drop-down-menu/486578/2 "2009-02-19T19:02:52Z")

</div>

Easiest way I do it is…

```auto

<html>
<head>
<script language="JavaScript">
	function ShowDiv(iID)
	{
		if (document.getElementById('dv'+ iID).style.display = 'block')
		{
			document.getElementById('dv' + iID).style.display = 'none';
		}else{
			document.getElementById('dv' + iID).style.display = 'block';
		}
	}
</script>
</head>
<body>
<a href="#" onClick="ShowDiv('1'); return false;">Title 1</a><br/>
<div id="dv1" style="margin-left: 5px;">
	Subtitle 1<br/>
	Subtitle 2<br/>
</div>
<br/>
<a href="#" onClick="ShowDiv('2'); return false;">Title 2</a><br/>
<div id="dv2" style="margin-left: 5px;">
	Subtitle 1<br/>
	Subtitle 2<br/>
</div>
</body>
</html>

```

Make any sense?

---

<div class="post-metadata">

### Author: ![ZipperJJ](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/zipperjj/32/211_2.png) [@ZipperJJ](https://boards.straightdope.com/u/ZipperJJ)
#### Post date: [February 19, 2009, 9:20pm UTC](https://boards.straightdope.com/t/need-css-help-drop-down-menu/486578/3 "2009-02-19T21:20:52Z")

</div>

Doh, just had a thought…

Those DIVs should have the style code style=“display: none;” on default.

Also, if you want to Google for more help, what you want is a DHTML menu not a CSS menu.

---

<div class="post-metadata">

### Author: ![Silver\_Tyger](https://avatars.discourse-cdn.com/v4/letter/s/fbc32d/32.png) [@Silver\_Tyger](https://boards.straightdope.com/u/Silver_Tyger)
#### Post date: [February 19, 2009, 9:39pm UTC](https://boards.straightdope.com/t/need-css-help-drop-down-menu/486578/4 "2009-02-19T21:39:07Z")

</div>

That should help. I just don’t have the knowledge base I need and I have the sneaking suspicion my teacher knows Dreamweaver and not, y’know, programming. She did appreciate that I was making the effort to do things the right way and not the way I know (honestly, what was wrong with tables? yeah, yeah, people with disabilities, fine…)

DHTML, CSS, Javascript… it’s all the same, right? 😃

Thanks so much!

---

<div class="post-metadata">

### Author: ![spinky](https://avatars.discourse-cdn.com/v4/letter/s/59ef9b/32.png) [@spinky](https://boards.straightdope.com/u/spinky)
#### Post date: [February 19, 2009, 10:14pm UTC](https://boards.straightdope.com/t/need-css-help-drop-down-menu/486578/5 "2009-02-19T22:14:48Z")

</div>

This may not serve your purposes, but I was recently browsing around CSS sites and discovered the existence of drop-down menuing systems that use absolutely no scripting to do their job – everything is CSS. It’s kind of impressive. There’s an example here: [Stu Nicholls | CSS PLAY | A css only dropdown menu](http://www.cssplay.co.uk/menus/final_drop.html)

---

<div class="post-metadata">

### Author: ![BorgHunter](https://avatars.discourse-cdn.com/v4/letter/b/7c8e57/32.png) [@BorgHunter](https://boards.straightdope.com/u/BorgHunter)
#### Post date: [February 19, 2009, 10:42pm UTC](https://boards.straightdope.com/t/need-css-help-drop-down-menu/486578/6 "2009-02-19T22:42:31Z")

</div>

**ZipperJJ** , your markup should make up its mind as to whether it is HTML or XHTML. It has elements of both but adheres to the standards of neither, and that’s a no-no.

Also, your \<script\> needs a type attribute.

Sincerely,  
Your Friendly Neighborhood W3C Pedant

---

<div class="post-metadata">

### Author: ![Arnold\_Winkelried](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@Arnold\_Winkelried](https://boards.straightdope.com/u/Arnold_Winkelried)
#### Post date: [February 20, 2009, 2:14am UTC](https://boards.straightdope.com/t/need-css-help-drop-down-menu/486578/7 "2009-02-20T02:14:30Z")

</div>

I’ve used this template for a site, and it has drop-down menus implemented in CSS (and the site works in IE6 and latest versions of all other browsers.)

> **[Multiflex-5.4 | Overview |](http://www.1234.info/webtemplates/multiflex5/demo/)**
>
> Your container description here

I would imagine that the solution is similar to what ntucker has provided.

---

<div class="post-metadata">

### Author: ![Gaudere](https://avatars.discourse-cdn.com/v4/letter/g/e495f1/32.png) [@Gaudere](https://boards.straightdope.com/u/Gaudere)
#### Post date: [February 20, 2009, 5:04am UTC](https://boards.straightdope.com/t/need-css-help-drop-down-menu/486578/8 "2009-02-20T05:04:31Z")

</div>

I use this css dropdown for my sites: [PVII Menu Tools](http://www.projectseven.com/tutorials/navigation/auto_hide/)
