Rekire: Problemchen mit CSS-Menü

Beitrag lesen

SELF-Forum

Problemchen mit CSS-Menü

Rekire
– Informationen zu den Bewertungsregeln

Hallo,

Ich habe begonnen einen kleine Website zu entwerfen und kämpfe im Moment mit dem Menü.
Ich möchte das man auch aufklappbare Untermenüs benutzen kann und darin besteht bei mir das Problem. Ich hab es bereits Geschafft das das Untermenü da angezeigt wird wo es stehen soll, aber die restlichen Links sowie der Inhalt wird verschoben. Ich bin für jeden Rat dankbar!

(Ich habe das Menü komplett selber gemacht deshalb könnten da dumme Fehler drin sein)

  
<!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=UTF-8" />  
<title>Hallo Welt</title>  
<style type="text/css">  

~~~~~~css
  
body {  
 margin:0;  
}  
.logo h1 {  
 font-size:80pt;  
 font-style:italic;  
 font-weight:bold;  
 margin:0;  
 color:#00C161;  
}  
.logo {  
 font-family: "Times New Roman", Times, serif;  
 font-style:italic;  
 background:#333 url(top.jpg) right no-repeat;  
 height:200px;  
 padding-left:10pt;  
}  
.logo h2 {  
 margin-top:-10pt;  
 color:#ffc;  
}  
li {  
 display:inline;  
}  
li a {  
 display:block;  
 padding:1pt;  
 margin:1pt 2pt;  
 width:80pt;  
 display:block;  
 text-align:center;  
 float:left;  
 text-decoration:none;  
 color:#FF6;  
 background-image:url(link.png);  
}  
li a:hover, li a:focus {  
 background-color:#09F;  
}  
li ul {  
 display:none;  
}  
li:hover ul {  
 display:block;  
 width:200px;  
 position:relative;  
}  
ul {  
 list-style:none;  
 margin:0;  
 padding:0;  
}  
p {  
 padding:5pt;  
}  

~~~~~~html
  
</style>  
</head>  
<body>  
<div class="logo">  
 <h1>Hallo Welt</h1>  
 <h2>Startseite</h2>  
 <ul>  
  <li><a href="./">Startseite</a></li>  
  <li><a href="impressum.todo">Impressum</a></li>  
  <li><a href="mehr.todo">Mehr</a></li>  
  
  <li class="subs">  
   <a href="nochmehr.todo">Noch Mehr!</a>  
   <ul style="top:23px; float:left; left:-115px;">  
    <li><a href="#">Unterlink 1</a></li>  
    <li><a href="#">Unterlink 2</a></li>  
    <li><a href="#">Unterlink 2</a></li>  
   </ul>  
  </li>  
  
  <li><a href="nix.todo">test</a></li>  
 </ul>  
</div>  
<div style="clear:both">  
<p>Hier ist platz für Inhalte</p>  
</div>  
</body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln