hallo
ich habe ein menü erstellt das aufklappt.jedoch wird das menü das aufklappt ist zu weit weg und ich schaffe es nicht weiter nach links zu schieben..
und nebenbei bei dem menü was aufklappt ist ein weisser strich der mich stört den bekomm ich auch nicht weg......bitte helft mir hier der code:
also beim letzten menüpunkt also apokalypse dort öffnet sich das zweite untermenü
html code:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="author" content="">
<meta name="keywords" content="">
<link href="styles/apokalypse.css" type="text/css" rel="stylesheet">
<link href="favicon.ico" type="image/x-icon" rel="shortcut icon">
<title>Apokalypse</title>
<!--[if lt IE 9]>
<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div id="background">
<div id="seitenformat">
<div id="header" align="center"><img id="headerbild" src="images/header.jpg" alt="Startseite" title="Apokalypse" /></div>
<div id="nav">
<ul>
<li><a href="index.html"><span></span>Startseite</a></li>
<li><a href="kontakt.html"><span></span>Kontakt</a></li>
<li><a href="information.html"><span></span>Informationen</li>
<li><a href="apokalypse.html"><span></span>Apokalypse</a>
<ul>
<li class="zombie"><a href="zombie.html">Zombieapokalypse</a></li>
<li class="strom"><a href="strom.html">Stromkatastrophe</a></li>
<li class="fallout"><a href="fallout.html">Atomkatastrophe</a></li>
<li class="alien"><a href="alien.html">Angriffskatastrophe</a></li>
</ul>
</ul>
</li>
</div>
</div>
</div>
</body>
</html>css code:
Code
#headerbild{
width: 1190px;
height: 105px;
border-radius:6px;
margin-top: 5px;
}
#header{
background-image: url(image/bg_list.gif) ;
border-radius:5px;
height: 110px;
}
#background{
background-image: url(../images/zombie.jpg);
border-radius:8px;
}
#seitenformat{
width: 1200px;
margin: 0 auto;
}
#nav{
width: 170px;
}
#nav ul{
list-style: none;
}
#nav li{
width: 150px;
text-align: left;
font-family: fantasy;
font-size: small;
font-style: italic;
background-image: url(image/bg_menu.gif);
padding-top: 10px;
padding-left: 10px;
margin-right: 10px;
margin-bottom: 5px;
padding-bottom: 8px;
margin-left: -40px;
border-left: 25px orange solid;
border-radius:8px;
}
/*Span-Elemente*/
#nav span {
border-color: transparent #aaa transparent transparent; /*Dreieckfarbe */
border-style:solid; /*Randstyle*/
border-width:7px; /*Dreiecksgrösse*/
width:0; /*Breite (muss 0 sein)*/
height:0; /* Höhe (muss 0 sein*/
display:inline-block; /* Anzeigeart */
float:right; /* rechtsbündig */
margin-right:7px; /* Rand rechts */
position:relative; /* Positionierung */
transition:all 0.5s; /* Transition */
-moz-transition:all 0.5s;
-o-transition:all 0.5s;
-webkit-transition:all 0.5s;
}
/*Span im Hoverzustand */
#nav a:hover span {
border-color: transparent #fff transparent transparent ; /* Dreieckfarbe */
transform:rotate(180deg); /* Rotation 180° */
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
}
/* Links Submenu */
#nav ul ul li a {
color:#476EA8; /* Schriftfarbe */
font-size:15px; /* Schriftgrösse */
}
/* Links Submenu Hoverzustand */
#nav ul ul li a:hover {
color:#153363; /*Schriftfarbe */
letter-spacing: 1px; /*Buchstabenabstand*/
background: #F0F4FA; /*Hintergrundfarbe */
}
#nav ul ul li {
width:170px; /* Breite */
background:#DCE1E8; /*Hintergrundfarbe*/
border:1px solid #D5D7DB; /*Rand*/
border-top:0; /*Rand oben*/
}
/*Verhalten der Unterlisten bei Hover */
#nav ul li:hover ul {
display:block; /* Blockanzeige der Unterlisten */
}
/*Submenulisten*/
#nav ul ul {
position:absolute; /* Absolute Positionierung */
left:180px; /*Abstand Links (breite des Hauptmenüs) */
top:0; /*Abstand oben */
border-top:1px solid #e9e9e9; /* oberer Rand */
display:none; /* Keine Anzeige, wenn li nicht gehovert */
}
/* Links Hoverzustand */
#nav a:hover {
background: RGBA(255,255,255,0.05); /* Hintergrundfarbe */
color:#fff; /* Schrifrfarbe */
font-style: italic; /* Kursiv */
}
#nav a {
color:#f9f9f9; /* Schriftfarbe */
display:block; /* Block-Anzeige, jedes Element neue Zeile */
text-decoration:none; /*keine Unterstreichung*/
transition:1s; /* Fliessende Bewegung */
-moz-transition:1s;
-webkit-transition:1s;
-o-transition:1s;
font-family:Playfair Display; /* Schriftart */
font-weight: bold; /* Fett */
font-size:16px; /* Schriftgrösse */
padding-left:10px; /* Abstand links */
}
#nav ul li {
position:relative; /*relative Positionierung der
Listenpunkte, damit Unterpunkte
absolut positioniert werden können.*/
}bitte ich verzweifle.
