---
title: "Problem med dropdown-lista"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/126302-problem-med-dropdown-lista"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Karlsson"
published: "2005-04-13T12:55:03.000Z"
updated: "2005-04-14T05:51:55.000Z"
replies: 5
views: 387
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/126302-problem-med-dropdown-lista"
---

# Problem med dropdown-lista

## #1 — Karlsson, 2005-04-13T12:55Z

Halloj där
Försöker göra en dropdown-meny med en lista. Grunden är en suckerfish-meny som jag tänkte anpassa. Har ingen url utan måste tyvärr posta koden här.
Problemen är;

- a-taggen täcker inte hela \<li\> i IE trots display: block och width 100%.
- Får inte hover att fungera på \<li\>, Skulle kunna tänka mig att byta bakgrunden på \<a\> i stället om det var så att \<a\> gick ända ut i kanterna på \<li\>

Nåväl, det är säkert andra saker jag grubblar på men det här är det då mina första och största problem

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Meny</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
*		{
		margin: 0;
		padding: 0;
		}
#menu	{
		width: 750px;
		position: absolute;
		left: 50%;
		margin-left: -375px;
		border: 1px solid gray;
		background: #508fc4;
		font-family: verdana, arial, helvetica, sans-serif;
		}
.top	{
		font-weight: bold; /* Sätter stylen för den översta raden i menyn */
		padding: 2px 5px;
		}
.under	{
		font-weight: normal; /* Sätter stylen för undermenyerna */
		padding: 5px;
		border-bottom: 1 px solid black;
		background: #2175bc;
		}
#nav a	{
		display: block;
		height: 100%;
		width: 7.5em;
		text-decoration: none;
		color: white;
		font-family: verdana, arial, helvetica, sans-serif;
		font-size: 0.75em;
		font-weight: noinherit;
		}
#nav a:hover {
		color: red;
		background: black;
		}
html>body #nav li a {
		width: auto;
		height: auto;
		}
#nav	{
		float: left;
		position: relative;
		top: 0;
		}
#nav li, #nav ul{
		float: left;
		width: 8em;
		}	
ul		{
		list-style: none;
		}
#nav li ul { /* second level lists */
		position: absolute;
		width: 8em;
		left: -999em;
		}
#nav li:hover ul {
		left: auto;
		}
#nav li:hover ul, #nav li.sfhover ul {
		left: auto;
		margin-left: -5px;
		background: black;
		}
#nav li:hover, #nav li:sfhover {
		background: black;
		}

</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--

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>
</head>

<body>
<div id="menu">
<ul id="nav"">
	<li class="top" style="width: 5em; border: 1px solid black;""><a href="#" style="border: 1px solid yellow;">START</a></li>
	<li class="top" style="border: 1px solid black;"><a href="#" style="border: 1px solid yellow;">MENYALT. 1</a>
		<ul>
			<li class="under"><a href="#">Undermeny</a></li>
			<li class="under"><a href="#">Undermeny</a></li>
			<li class="under"><a href="#">Undermeny</a></li>
			<li class="under"><a href="#">Undermeny</a></li>
			<li class="under"><a href="#">Undermeny</a></li>
			<li class="under"><a href="#">Undermeny</a></li>
		</ul>
	</li>
	<li class="top" style="border: 1px solid black;"><a href="#" style="border: 1px solid yellow;">MENYALT. 2</a>
		<ul>
			<li class="under"><a href="#">Undermeny</a></li>
			<li class="under"><a href="#">Undermeny</a></li>
		</ul>
	</li>
		<li class="top" style="border: 1px solid black;"><a href="#" style="border: 1px solid yellow;">MENYALT. 3</a>
		<ul>
			<li class="under"><a href="#">Undermeny</a></li>
			<li class="under"><a href="#">Undermeny</a></li>
		</ul>
	</li>

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

Snälla, bry er inte om färger och borders, det är bara till för min felsökning :-)

M.v.h Mikael

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

## #2 — hypatia, 2005-04-13T13:15Z

Tag bort width på #nav a så ska den sträcka ut sig även i IE, alt. sätt width till 100% där. :)

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

## #3 — Karlsson, 2005-04-13T13:17Z

Fanken också!
Skulle just in och redigera bort det, satte width: 100% så nu täcker den. Men jag får fortfarande inte bakgrunden att bytas på \<li\>. Men det går kanske inte, vad vet jag?

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

## #4 — Karlsson, 2005-04-13T13:48Z

Sådärja, jag löste det genom att sätta en border på 4 px på \<a\>, samma som background.

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

## #5 — Tinwëlint, 2005-04-13T19:46Z

Bara en liten fundering angående ditt val av doctype:

När du väljer xhtml1.1 borde du nog följa det här:

<http://www.w3.org/TR/xhtml11/conformance.html#strict>

Alltså skriva namespace i html-taggen.

Dessutom bör man nog skicka dokumentet som application/xml+xhtml istället för text/html och ha en xml-deklaration högst upp.

<http://www.w3.org/TR/2002/NOTE-xhtml-media-types-20020801/>

När man har gjort allt detta rätt vill inte IE tolka sidan som hypertextuppmärkning längre utan skriver ut xml-trädet.
För att undvika detta kan man till de webbläsare som inte klarar av application/xml+xhtml skicka dokumentet som xhtml1.0 (som får ha text/html) med mime-typen text/html. Detta beskrivs bland annat här:

<http://www.workingwith.me.uk/articles/scripting/mimetypes/>

Eller så tar man det lungt och skickar sidan som xhtml1.0 strict (och förlorar halva syftet med att köra xhtml:
<http://www.autisticcuckoo.net/arkiv.php?id=2005/03/14/xhtml-ar-dott>
<http://www.autisticcuckoo.net/arkiv.php?id=2005/04/08/doctype-deklaration-och-medietyp>
)

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

## #6 — Karlsson, 2005-04-14T05:51Z

Jag använde koden rakt av från htmldog.com, därav doctypen. Ska kolla närmare på det där nu.

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/126302-problem-med-dropdown-lista
