• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Navigationsliste

viperclub

Neues Mitglied
Ich habe eine Navigationsliste:

HTML:
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


<link rel="stylesheet" media="all" type="text/css" href="pro_dropline.css" />
<!--[if IE]>
<link rel="stylesheet" media="all" type="text/css" href="pro_dropline_ie.css" />
<![endif]-->
    </head>
    <body>
    <center>
<div class="nav">
<div class="table">

<ul class="current"><li><a href="#nogo"><b>Home</b>
</a></li></ul>



<ul class="select"><li><a href="#nogo"><b>RALLYE</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub">
    <ul class="sub">
        <li><a href="#nogo">RALLYE-DAKAR</a></li>
        <li><a href="#nogo">FIA WORLD RALLY CHAMPIONSHIP (WRC)</a></li>
        <li><a href="#nogo">INTERCONTIENTAL RALLY CHALLENGE (IRC)</a></li>
    </ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>

<ul class="select"><li><a href="#nogo"><b>NASCAR</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub show">
    <ul class="sub">
        <li><a href="#nogo">The Hay Wain</a></li>
        <li><a href="#nogo">Brighton Beach</a></li>
        <li><a href="#nogo">Malvern Hall</a></li>
        <li><a href="#nogo">Salisbury Cathedral</a></li>
        <li><a href="#nogo">Weymouth Bay</a></li>
    </ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>


<ul class="select"><li><a href="#nogo"><b>FORMEL 1</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub">
    <ul class="sub">
        <li><a href="#nogo">The Girl with Green Eyes</a></li>
        <li><a href="#nogo">The Dream</a></li>
        <li><a href="#nogo">Woman in Blue</a></li>
        <li><a href="#nogo">The Yellow Dress</a></li>
        <li><a href="#nogo">The Piano Lesson</a></li>
    </ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>


<ul class="select"><li><a href="#nogo"><b>DTM</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub">
    <ul class="sub">
        <li><a href="#nogo">The Large Bathers</a></li>
        <li><a href="#nogo">Onions and Bottles</a></li>
        <li><a href="#nogo">Mardi Gras</a></li>
        <li><a href="#nogo">Still Life</a></li>
        <li><a href="#nogo">Boy in a Red Waistcoat</a></li>
    </ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>

</div>
</div>
<br />
<br />
<img src="header.jpg">
<img src="navbottom.jpg">

</center>
    </body>
</html>

Code:
.nav ul {display:inline-block;}
.nav ul {display:inline;}
.nav ul li {float:left;}
.nav {text-align:center;}
.nav .select a:hover b, 
.nav .select li:hover a b {float:none;}
Code:
.nav {
height:35px; 
background: url(navtop.jpg) repeat-x; 
position:relative; 
font-family:arial, verdana, sans-serif; 
font-size:11px; 
width:950px; 
z-index:500;
}

.nav .table {
display:table; 
margin:0 auto;
}

.nav .select,
.nav .current {
margin:0; 
padding:0; 
list-style:none; 
display:table-cell; 
white-space:nowrap;
}

.nav li {
margin:0; 
padding:0; 
height:auto; 
float:left;
}

.nav .select a {
display:block; 
height:35px; 
float:left; 
background: url(navup.jpg); 
padding:0 30px 0 30px; 
text-decoration:none; 
line-height:35px; 
white-space:nowrap; 
color:#ddd;
}

.nav .current a {
display:block; 
height:35px; 
float:left; 
background: url(navup.jpg); 
padding:0 0 0 15px; 
text-decoration:none; 
line-height:35px; 
white-space:nowrap; 
color:#fff;
}


.nav .current a b {
display:block; 
padding:0 30px 0 15px; 
background:url(navup.jpg) right top;
}

.nav .select a:hover, 
.nav .select li:hover a {
background: url(navup.jpg); 
padding:0 0 0 15px; 
cursor:pointer; 
color:#fff;
}

.nav .select a:hover b, 
.nav .select li:hover a b {
display:block; 
float:left; 
padding:0 30px 0 15px; 
background:url(navup.jpg) right top; 
cursor:pointer;
}

.nav .select_sub {
display:none;
}

/* IE6 only */
.nav table {
border-collapse:collapse; 
margin:-1px; 
font-size:1em; 
width:0; 
height:0;
}

.nav .sub {
display:table; 
margin:0 auto; 
padding:0; 
list-style:none;
}

.nav .sub_active .current_sub a, 
.nav .sub_active a:hover {
background:transparent; 
color:#f00;
}

.nav .select :hover .select_sub, 
.nav .current .show {
display:block; 
position:absolute; 
width:950px; 
top:35px; 
background:url(back_0.gif); 
padding:0; 
z-index:100; 
left:0; 
text-align:center;
}

.nav .current .show {
z-index:10;
}

.nav .select :hover .sub li a, 
.nav .current .show .sub li a {
display:block; 
float:left; 
background:transparent; 
padding:0 10px 0 10px; 
margin:0; 
white-space:nowrap; 
border:0; 
color:#444;
}

.nav .current .sub li.sub_show a {
color:#088; 
cursor:default; 
background:url(back_1.gif);
}

.nav .select :hover .sub li a:hover, 
.nav .current .sub li a:hover {
visibility:visible; 
color:#088; 
background:url(back_1.gif);
}
Ich habe den code nicht selber gemacht , und wenn ich den Code wie oben einfüge geht er nicht, aber wenn er alleine steht:
HTML:
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Motorsport.ch.tc - Alles rund um den Motosport</title>


<link rel="stylesheet" media="all" type="text/css" href="pro_dropline.css" />
<!--[if IE]>
<link rel="stylesheet" media="all" type="text/css" href="pro_dropline_ie.css" />
<![endif]-->

</head>

<body>
<div class="nav">
<div class="table">

<ul class="select"><li><a href="#nogo"><b>HOME</b>
</a></li></ul>

<ul class="select"><li><a href="#nogo"><b>RALLYE</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub">
    <ul class="sub">
        <li><a href="#nogo">Fishermen at Sea</a></li>
        <li><a href="#nogo">The Shipwreck</a></li>
        <li><a href="#nogo">The Vale of Ashburnham</a></li>
        <li><a href="#nogo">Crossing the Brook</a></li>
    </ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>

<ul class="select"><li><a href="#nogo"><b>NASCAR</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub show">
    <ul class="sub">
        <li><a href="#nogo">The Hay Wain</a></li>
        <li><a href="#nogo">Brighton Beach</a></li>
        <li><a href="#nogo">Malvern Hall</a></li>
        <li><a href="#nogo">Salisbury Cathedral</a></li>
        <li><a href="#nogo">Weymouth Bay</a></li>
    </ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>


<ul class="select"><li><a href="#nogo"><b>FORMEL 1 </b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub">
    <ul class="sub">
        <li><a href="#nogo">The Girl with Green Eyes</a></li>
        <li><a href="#nogo">The Dream</a></li>
        <li><a href="#nogo">Woman in Blue</a></li>
        <li><a href="#nogo">The Yellow Dress</a></li>
        <li><a href="#nogo">The Piano Lesson</a></li>
    </ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>


<ul class="select"><li><a href="#nogo"><b>DTM</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub">
    <ul class="sub">
        <li><a href="#nogo">The Large Bathers</a></li>
        <li><a href="#nogo">Onions and Bottles</a></li>
        <li><a href="#nogo">Mardi Gras</a></li>
        <li><a href="#nogo">Still Life</a></li>
        <li><a href="#nogo">Boy in a Red Waistcoat</a></li>
    </ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</div>

<br /><br /><br /><br />

</body>
</html>
geht er! Woran kann das liegen? Das Problem ist, dass es nicht ausklappt!
 
Werbung:
Werbung:
Hallo.

Entferne die divs aus deiner Liste die haben dort nichts zu suchen.
Verschachtle die Liste richtig, so wie es in vielen Tutorials gezeigt wird.

Dann klappt das auch mit dem Ausklappen.

Gruss
Elroy
 
Zuletzt bearbeitet:
Zurück
Oben