Gå til innhold

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

Anonym5656

Anbefalte innlegg

Anonym5656

Anonym5656

Skrevet
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>

Lenke til kommentar

Videoannonse

Videoannonse
Annonse

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å
Gå til emneliste
×
×
  • Opprett ny...