---
title: "Problem med implementering av CSS-meny"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/125687-problem-med-implementering-av-css-meny"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "lillebror"
published: "2005-04-03T22:06:30.000Z"
updated: "2005-04-06T22:18:20.000Z"
replies: 10
views: 446
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/125687-problem-med-implementering-av-css-meny"
---

# Problem med implementering av CSS-meny

## #1 — lillebror, 2005-04-03T22:06Z

Gokväll!

Jag håller på med att implementera en CSS-meny (<http://www.tanfa.co.uk/css/examples/menu/hs7.asp>) på min [sida](http://www.flygfyren.nu/menutest.php) och har kommit en bra bit på väg nu. Dock har jag stött på några problem eller bieffekter som jag vill kalla det.

På sidan jag angav ovan med ett exempel på hur menyn ser ut i dagsläget, kan man se en **CONTENT-div** ligga uppe i den blå himlen med texten TEST i, vilket är helt fel placering för den. **Content-diven** utgör den vita stora delen mellan footern och headern. När jag lagt till menyn uppstår detta synnerligen konstiga problem att **content-diven** flyttas upp i headern. 

Så här ser CSS-koden ut:

```
#menu {
width: 100%;
/*background: #eee;*/
background: transparent;
float: left;
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
/*background-color: #FF0000;*/
/*width: 12em;*/
float: left;
}

#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu h2 {
color: #fff;
background: #FF0000;
text-transform: uppercase;
width: auto;
}

#menu a {
color: #FF0000;
background: #efefef;
text-decoration: none;
}

#menu a:hover {
color: #a00;
background: #fff;
}

#menu li {position: relative; width: 100%;}

#menu ul ul {
position: absolute;
z-index: 500;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
```

Så här ser php/html-koden ut:

```
<?php
include('/sökväg/inc/header.php');

if funktion<=funktion {
?>

<div id="content">TEST</div>

<?php
} else {
#echo "<div id='content'>";
#echo "<p class='text'>Denna sida kräver att du är registrerad!</p>";
#echo "</div>";
#}
?>
<div id="content">
<p class="notregistered">Denna sida/funktion kräver att du är <strong><a href="./registration.php">registrerad</a></strong> medlem!</p>
</div>
<?php
}
?>

<?php
include('/sökväg/inc/footer.php');
?>
```

Så här ser delar ur headern ut:

```
<div id="menula">
	<?php 
	######### LÄSER IN MENY ##############################################
	#show_menu($_SESSION["username"]);?>
	<div id="menu">
<ul>
  <li><h2>Artiklar</h2>

    <ul>
      <li><a href="http://www.seoconsultants.com/css/menus/horizontal/" title="SEO Consultants Directory Example">Visa artiklar</a></li>
      <li><a href="http://www.tanfa.co.uk/css/examples/menu/hs7.asp">Skriv artikel</a><!-- fully working sample -->
        <!--<ul>
          <li><a href="http://www.tanfa.co.uk/css/examples/menu/tutorial-h.asp" title="Horizontal Menu Tutorial">tanfa Tutorial</a>
            <ul>
              <li><a href="http://www.tanfa.co.uk/css/examples/menu/hs1.asp" title="Horizontal Menu - Page 1">Stage 1</a></li>

              <li><a href="http://www.tanfa.co.uk/css/examples/menu/hs2.asp" title="Horizontal Menu - Page 2">Stage 2</a></li>			
              <li><a href="http://www.tanfa.co.uk/css/examples/menu/hs3.asp" title="Horizontal Menu - Page 3">Stage 3</a></li>
              <li><a href="http://www.tanfa.co.uk/css/examples/menu/hs4.asp" title="Horizontal Menu - Page 4">Stage 4</a></li>
              <li><a href="http://www.tanfa.co.uk/css/examples/menu/hs5.asp" title="Horizontal Menu - Page 5">Stage 5</a></li>			
              <li><a href="http://www.tanfa.co.uk/css/examples/menu/hs6.asp" title="Horizontal Menu - Page 6">Stage 6</a></li>
            </ul>
          </li>

        </ul>-->
      </li>
    </ul>
  </li>
</ul>

						
</div>	
	</div>
```

Diven med id "menula" fick jag döpa om till det eftersom menyn använde sig av menu, där av det något konstiga namnet. Hur som helst...diven "menula" utgör den blå raden på sidan som jag i sin tur placerar diven menu i eftersom det är på den platsen jag vill ha CSS-menyn. Nu misstänker jag starkt  :e att konflikten skapas någonstans i detta skede. Jag har inte lyckats felsöka allting än och med min kunskapsnivå så är det väldigt lätt att missa något som för en duktig person kan förefalla solklart. Jag hoppas någon har örnögon och kan se vad som är fel :)

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

## #2 — lillebror, 2005-04-05T15:49Z

Jag bytte css-meny och denna jag använder mig nu är både enklare och verkar fungera bättre.

Dock har jag ett problem. Så här ser huvudkoden ut:

```

<div id="menu">
<ul class="nav" style="position: relative;">

<li><strong>Browsers</strong>
<ul>
<li><a href="http://mozilla.org/">Mozilla</a></li>
<li><a href="http://mozilla.org/products/firefox/">Firefox</a></li>
<li><a href="http://mozilla.org/products/camino/">Camino</a></li>
<li><a href="http://kmeleon.sourceforge.net/">K-meleon</a></li>
<li><a href="http://galeon.sourceforge.net/">Galeon</a></li>
<li><a href="http://netscape.com/">Netscape</a></li>
<li><a href="http://microsoft.com/">Internet Explorer</a></li>

<li><a href="http://opera.com/">Opera</a></li>
<li><a href="http://apple.com/safari/">Safari</a></li>
<li><a href="http://konqueror.org/">Konqueror</a></li>
</ul></li>

<li><strong>Browsers</strong>
<ul>
<li><a href="http://mozilla.org/">Mozilla</a></li>
<li><a href="http://mozilla.org/products/firefox/">Firefox</a></li>
<li><a href="http://mozilla.org/products/camino/">Camino</a></li>
<li><a href="http://kmeleon.sourceforge.net/">K-meleon</a></li>
<li><a href="http://galeon.sourceforge.net/">Galeon</a></li>
<li><a href="http://netscape.com/">Netscape</a></li>
<li><a href="http://microsoft.com/">Internet Explorer</a></li>

<li><a href="http://opera.com/">Opera</a></li>
<li><a href="http://apple.com/safari/">Safari</a></li>
<li><a href="http://konqueror.org/">Konqueror</a></li>
</ul></li>

</ul>
</div>
```

Så här css-koden ut:

```
/*Nav bar styles*/

ul.nav,
.nav ul{
margin: 0;
padding: 0;
cursor: default;
list-style-type: none;
display: inline;
}

ul.nav{
display: table;
}

ul.block{
width: 100%;
table-layout: fixed;
}

ul.nav>li{
display: table-cell;
position: relative;
padding: 2px 6px;
}
/*
ul.nav>li:hover{
padding-right: 1px;
}*/

ul.nav li>ul{
display: none;
position: absolute;
max-width: 40ex;
margin-left: -6px;
margin-top: 2px;
}

ul.nav li:hover>ul{
display : block;
}

.nav ul li a{
display: block;
padding: 2px 10px;
}

/*Menu styles*/

ul.nav,
.nav ul,
.nav ul li a{
background-color: #fff;
color: #369;
}

ul.nav li:hover,
.nav ul li a:hover{
background-color: #369;
color: #fff;
}

ul.nav li:active,
.nav ul li a:active{
background-color: #036;
color: #fff;
}

ul.nav,
.nav ul{
border: 1px solid #369;
}

.nav a{
text-decoration: none;
}
```

Nu till problemet. I den bifogade bilden ser man hur menyn ligger precis på kanten till det gråa och det vita. Menyn vill jag ska ligga helt och hållet i meny-diven (det gråa fältet) men den verkar ha hamnat lite på sniskan. Någon som vet vad som kan vara fel baserat på koden? :)

Bilagor:

- [div.jpg](https://www.webforum.nu/a/5998.jpg)

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

## #3 — lillebror, 2005-04-05T17:17Z

Nu hade jag precis "tweakat" iordning menyn i Firefox och började känna mig nöjd med integrationen i övriga sidan. Sedan var det som att bli avrättad när jag öppnade menyn och sidan i Internet Explorer. Då såg menyn plötsligt ut som 7 svåra år. Jag bli så förbannad att Microsoft inte ska klara av något som Firefox klarar betydligt bättre.

Nu kanske jag får skrota hela idén med menyn då 50 % av användarna kommer få se denna bedrövelse om jag väljer att ha den kvar. Ni kan se resultatet på den bifogade bilden!

Bilagor:

- [meny ie vs firefox.jpg](https://www.webforum.nu/a/5999.jpg)

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

## #4 — lillebror, 2005-04-05T18:54Z

Eftersom de css-baserade menyer som jag nu provat inte fungerar bra samtidigt i både IE och Firefox har jag tittat på ett alternativ som jag haft ögona på tidigare. Menyn är designad av projectseven.com och heter MenuMagic II. Någon som har erfarenhet av denna meny (se bifogad bild)? Är den värd de pengar den kostar?

Bilagor:

- [menumagic.jpg](https://www.webforum.nu/a/6001.jpg)

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

## #5 — OlleBoop, 2005-04-05T19:24Z

Kolla på <http://www.htmldog.com/articles/suckerfish/> och <http://www.alistapart.com/articles/hybrid/> innan du slänger ut pengar på nåt.

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

## #6 — Tibbling, 2005-04-05T19:32Z

Hur går det brorsan? Löser det sig med menyerna? :q

/J

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

## #7 — lillebror, 2005-04-05T20:25Z

> **Tibbling skrev:**
>
> Hur går det brorsan? Löser det sig med menyerna? :q
> /J

Det går sådär  x(

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

## #8 — lillebror, 2005-04-05T20:29Z

Vad är det specifikt i CSS-koden som gör att IE tolkar det hela så annorlunda?

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

## #9 — lillebror, 2005-04-05T21:13Z

Jag har verkligen kört fast  :e Nästlande CSS-satser är verkligen inte min grej just nu. Det är rörigt värre i mitt huvud när jag försöker få till denna meny. 

Det började bra med en meny (<http://www.phoenity.com/newtedge/horizontal_nav/>) som jag lyckades implementera. Sedan visade det sig dessvärre att den inte var kompatibel med IE  :( 

Nåväl...jag fick ett länktips av OlleBoop till htmldog.com där jag nu har försökt att få till ett menyexempel de har. Det fungerar väl relativt bra förutom att jag inte får till utseendet på den nya. 

Jag har bifogat en bild av den tidigare och den nuvarande menyn (av Suckerfish) där man tydligt kan se skillnaderna i utseende.

Bifogar den senaste koden för html och css. Om någon har tips på vad som bör ändra i CSS-koden mottages det tacksamt eftersom jag själv gått bet!  :stud

HTML:

```
<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>
				<ul>
					<li><a href="#">Belontia</a></li>
					<li><a href="#">Betta</a></li>
					<li><a href="#">Colisa</a></li>
					<li><a href="#">Macropodus</a></li>
					<li><a href="#">Malpulutta</a></li>
					<li><a href="#">Parosphromenus</a></li>
					<li><a href="#">Pseudosphromenus</a></li>
					<li><a href="#">Sphaerichthys</a></li>
					<li><a href="#">Trichogaster</a></li>
					<li><a href="#">Trichopsis</a></li>
				</ul>
			</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>
```

CSS:

```
#nav, #nav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
}

#nav a {
	display: block;
	width: 10em;
	font-weight: none;
	color: #000;
	text-decoration: none;
}

#nav li { /* all list items */
	float: left;
	width: 10em; /* width needed or else Opera goes nuts */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;	
	list-style-type: none; 
}

#nav li ul { /* second-level lists */
	position: absolute;
	background: #fff;
	width: 10em;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	border: solid 1px #00A0DB;
	background: #fff;
}

#nav li ul ul { /* third-and-above-level lists */
	margin: -1em 0 0 10em;
}

#nav li:hover ul ul, #nav li.sfhover ul ul {
	left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}
```

Bilagor:

- [föregående och nuvarande meny.jpg](https://www.webforum.nu/a/6002.jpg)

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

## #10 — lillebror, 2005-04-05T22:30Z

**Lägesrapport:** Äntligen börjar jag se ljuset i tunneln. Har fått hyffsad ordning på menyn. Har ett litet problem som framgår av den bifogade filen med röd pil.

Någon som vet hur man får menytexten att ligga dikt an mot vänsterkanten på ramen?

Bilagor:

- [detgårframåt.jpg](https://www.webforum.nu/a/6003.jpg)

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

## #11 — OlleBoop, 2005-04-06T22:18Z

Kan du inte posta den kod du använder alt länka till sidan?

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/125687-problem-med-implementering-av-css-meny