Nickbytheriver: CSS Menu bricht um bei kl. Fenstern

Beitrag lesen

ok, HTML z.B.:

<div class="menu">
    <ul class="levelone">
      <li><a href="home.html"><b>Home</b></a></li>
      <li><a href="1.html"><b>1</b></a></li>
      <li><a href="2.html"><b>2</b></a></li>
      <li><a href="3.html"><b>3</b></a></li>
      <li class="right"><a href="99.html"><b>99</b></a></li>
    </ul>
  </div>

die Css:

menue {
height:35px;
width:98%;
min-width:10em;
background:url(../img/menue/black_0.gif);
position:relative;
margin-left:-10px;
margin-top: -10px;
font-family:arial, verdana, sans-serif;
font-size:11px;
z-index:1;
}

menue .levelone {
margin:0;
padding:0;
list-style:none;
white-space:wrap;
}

menue li {
float:left;
margin-left:10px;
font-weight: 900;
background:url(../img/menue/black_1.gif);
}

menue li.lrt {
float:right;
margin-right:10px;
font-weight: 900;

background:url(../img/menue/blue_1.gif);
}

menue .levelone a {
display:block;
height:35px;
float:left;
background: url(../img/menue/black_0.gif);
padding:0 10px 0 15px;
text-decoration:none;
line-height:33px;
white-space:nowrap;
color:#fff;
font-weight: 900;

}

menue .levelone li.lrt a {
color:#fff;
}

menue .levelone a b {
display:block;
padding:0 10px 0 15px;
background:url(../img/menue/black_0.gif) right top;
}

menue .levelone li.line a b {
background:url(../img/menue/black_0a.gif) right top;
}

menue .levelone a:hover,
menue .levelone li:hover a {
background: url(../img/menue/black_1.gif);
padding:0 10px 0 15px;
cursor:pointer;
color:#fff;
}

menue .levelone li.lrt a:hover,
menue .levelone li.lrt:hover a {
background: url(../img/menue/blue_1.gif);
}

menue .levelone a:hover b,
menue .levelone li:hover a b {
display:block;
padding:0 10px 0 15px;
background:url(../img/menue/black_1.gif) right top;
cursor:pointer;
}

menue .levelone li.line a:hover b,
menue .levelone li.line:hover a b {
background:url(../img/menue/black_1a.gif) right top;
}

menue .levelone li.lrt a:hover b,
menue .levelone li.lrt:hover a b {
background:url(../img/menue/blue_1.gif) right top;
}

menue .levelone li.lrt a:hover b.arrow,
menue .levelone li.lrt:hover a b.arrow {
background:url(../img/menue/blue_1a.gif) right top;
}

menue .sub {
display:none;
}
menue ul ul {display:none;}

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

menue .sub {
margin:0;
padding:0;
list-style:none;
}

menue .sub li {background:transparent;}

menue .levelone :hover .sub {
height:25px;
display:block;
position:absolute;
float:left;
width:100%;
top:35px;
left:0;
text-align:center;
background:#fff url(../img/menue/fade.gif);
border:1px solid #aaa;
}

menue .levelone :hover .rt li {float:right;}

menue .levelone :hover .sub li a
{display:block; height:25px; line-height:22px; float:left; background:transparent url(line/transparent.gif); padding:0 16px; margin:0; white-space:nowrap; color:#444;font-size:10px;}

menue .levelone :hover .sub li.subline a {color:#ff99ff;}

menue .levelone :hover .sub li a:hover,
menue .levelone :hover .sub li:hover
{color:#000; line-height:20px; position:relative; background:#fff url(../img/menue/fade.gif) left bottom;}