---
title: "Meny med dropdown"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/184242-meny-med-dropdown"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Matsakii"
published: "2010-08-03T22:18:59.000Z"
updated: "2010-08-03T23:37:23.000Z"
replies: 5
views: 474
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/184242-meny-med-dropdown"
---

# Meny med dropdown

## #1 — Matsakii, 2010-08-03T22:18Z

Har en gammal sajt där en av menyerna ser ut som på bilden. Jag skulle vilja ha ungefär samma bilder/knappar men lägga på en dropdown/undersidor på dom.

Jobbar i Dreanweaver och undrar vilken metod som skulle funka bäst? Droppdown behöver inte innehålla bilder. Jag är inge duktig på javascript eller jquery tex. och vill inte ha flash.

Några bra tips? Kanske DHTML eller nått? eller ännu bättre en plugg till DW :)

Thanks!

Permalänk: https://www.webforum.nu/p/184242

## #2 — Gildebrand, 2010-08-03T22:30Z

Det går att göra enbart i css också om du vill, är inte alldeles för svårt. Är också mycket enkelt att göra i jQuery. Men som grundstruktur så föreslår jag att du skapar en punktlista (som du förstås stylar om). Sen lägger du in ett event, antingen i css eller jQuery som säger att den ska visa alla undergrupper till punklistan.

Återkommer om några minuter med exempel.

Permalänk: https://www.webforum.nu/p/2247126

## #3 — Matsakii, 2010-08-03T22:33Z

Tack. Glömde lägga upp bilden på menyn :) Är det svårt att behålla rollover effekten när man kör med jquery och CSS?

Bilagor:

- [dump.jpg](https://www.webforum.nu/a/21840.jpg)

Permalänk: https://www.webforum.nu/p/2247127

## #4 — Gildebrand, 2010-08-03T22:55Z

Är lite småtrött just nu så har inte riktigt orkat få ihop ett fint fungerande exempel i css, utan bara så att du förstår principen hur man gör, fint får du göra själv ;)

```
<html>
<head>
<style>

#dropdown
{
	margin: 5px;
	padding: 0;
}

#dropdown li
{
	float: left;
	list-style: none;
	position: relative;
	height: 22px;
	top: 0px;
}

#dropdown li:hover
{
	position: relative;
	background-color: white;
}

#dropdown ul
{
	display: none;
	top: 100%;
}

#dropdown li:hover ul
{
	display: inline;
}
</style></head>
<body>
<ul id="dropdown">
	<li>Hej
		<ul>
			<li>Hej 2</li>
			<li>Hej 2</li>
		</ul>
	</li>

	<li>Hej</li>
	<li>Hej</li>
</ul>
</div>
</body>
</html>
```

Permalänk: https://www.webforum.nu/p/2247128

## #5 — Gildebrand, 2010-08-03T23:08Z

Är egentligen enklare med jQuery, enligt mig iallafall.
Här kommer ett till principvisande exempel (återigen inte stylat eller något som helst, bara för dig att förstå hur du ska göra): 

```
<html>
<head>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#dropdown li').hover(function(){
		$('ul',this).css('visibility','visible');
	},function(){
		$('ul',this).css('visibility','hidden');
	});
});
</script>
<style>
#dropdown ul{
visibility: hidden;
}
</style>
<body>
<ul id="dropdown">
	<li>Hej
		<ul>
			<li>Hej 2</li>
			<li>Hej 2</li>
		</ul>
	</li>

	<li>Hej</li>
	<li>Hej</li>
</ul></body>
</html>
```

Permalänk: https://www.webforum.nu/p/2247131

## #6 — Matsakii, 2010-08-03T23:37Z

Tackar. Ska kolla lite på den.

Permalänk: https://www.webforum.nu/p/2247132

---

Tråden på webben: https://www.webforum.nu/amne/html-css/184242-meny-med-dropdown
