viperclub
Neues Mitglied
Ich habe eine Navigationsliste:
Ich habe den code nicht selber gemacht , und wenn ich den Code wie oben einfüge geht er nicht, aber wenn er alleine steht:
geht er! Woran kann das liegen? Das Problem ist, dass es nicht ausklappt!
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);
}
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>