Dropdown meny i css

Cardi · 13. juni 2008

Har laget en liten dropdown meny i CSS men problemet er det at når jeg holder over slik at dropdown menyen dukker opp så går den "bak" et annet element som da i dette tilfellet er wrapperen. Noen som ser hvorfor? Det som er uthevet er da dropdown menyen.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd">

<head>

<title>Cardi - About</title>

</head>

<body>

<li><a class="m1" href="#">about me</a></li>

<li><a class="m1" href="#">gallery</a>

<ul>

<li><a class="m1" href="#">latest work</a></li>

<li><a class="m1" href="#">portfolio</a></li>

<li><a class="m1" href="#">photos</a></li>

<li><a class="m1" href="#">design</a></li>

<li><a class="m1" href="#">movies</a></li>

</ul>

</li>

<li><a class="m1" href="#">contact</a></li>

</ul>

</div>

<h1>Portfolio</h1>

</div>

</div>

</body>

</html>

CSS:

* { margin: 0; padding: 0; }

body {

background-color: #222222;

}

div.main

{

background-image: url(bilder/main.png);

width: 748px;

height: 418px;

top: 188px;

z-index: 1;

position: absolute;

}

div#wrapper {

position: relative;

left: 50%;

width: 758px;

margin-left: -374px;

border: none;

padding-top: 10px;

}

p, h1 {font-family: "Geneva", Arial, Helvetica, sans-serif; margin-left: 20px; margin-right: 20px;}

p {font-size: smaller; color: grey; padding: 10px 0px 10px 0px; margin-left: 65px;}

h1 {text-decoration: none; font-size: 18px; color: #2b6d9e; padding: 40px 0px 10px 30px; }

img.logo {

position: absolute;

float: right;

top: 100px;

right: 70px;

}

img.blue {

position: absolute;

margin-left: -128px;

top: 236px;

}

#nav {

color: #4ca9ee;

font-family: "Geneva", Arial, Helvetica, sans-serif;

font-size: 14px;

margin-top: 130px;

padding-top: 10px;

margin-left: 65px;

list-style: none;

}

a:link.m1,a:active.m1,a:visited.m1 {

color: #4ca9ee;

text-decoration: none;

}

a:hover.m1 {

color: #FFF;

text-decoration: none;

}

.m1 {

padding-right: 60px;

}

#nav a {

display: block;

width: 10em;

}

#nav li {

float: left;

width: 10em;

}

#nav li ul {

position: absolute;

width: 10em;

left: -999em;

}

#nav li:hover ul {

left: auto;

}

Endret 13. juni 2008 av Cardi

Logg inn

Dropdown meny i css

Anbefalte innlegg

Cardi

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer