Gå til innhold

Få en dropdown-meny midtstillt og med bilde bak.


Anbefalte innlegg

Skrevet

Hepp!

 

Jeg prøver å få min første dropdown-meny midtstillt og med bakgrunnsbilde, men jeg får ikke til noen av delene :p

 

Har prøvd å feilsøkt css filen min, og skiftet plass på text-align f.eks.

 

Hva er feil?

 

 

CSS

/* Navigasjons style */

#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}

#nav a {
display: block;
width: 5em;
}

#nav li {
float: left;
width: 5em;
}

#nav li ul {
position: absolute;
width: 1em;
left: -999em;
}

#nav li:hover ul {
left: auto;
}

/* body styleing */

body {
text-align: center;
margin: 0;
}

a {
font-family:Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
text-decoration: none;
}

/* div formating */

#top {
 background-image: url(bak.jpg);
 text-align: center;
 width: 100%;
}

 

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>simen</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">


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>


<ul id="nav">
<div id="top">

<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></li>
 	<li><a href="#">Kissing gouramis</a></li>
 	<li><a href="#">Pike-heads</a></li>
 	<li><a href="#">Giant gouramis</a></li>
 </ul>
</li>
 </div>

</ul>


</body>
</html>

Videoannonse
Annonse
Skrevet (endret)

Fjernet float: left; av #nav li, og da fikk jeg bakgrundsbilde og alt på midten, men da blir jo de to forskjellige elementene under hverandre, isdenfor siden av hverandre.

Endret av Gakkakk

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...