@revyag: z tym overflow to też wpadłem ale nie może tak być (pisałem w pierwszym poście), ponieważ jak wstawię rozwijane menu to pod ff i operą się chrzani.
Wstaw sobie w tego diva, gdzie pisze tekst1 taki kod:
<div class="menu" style="float: left;"> <li><a href="">Menu
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--> <li><a class="drop" href="#">CPanel
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--> <li><a href="#">111111111
</a></li> <li><a href="#">22222222
</a></li> <li><a href="#">33333333
</a></li> <li><a href="#">4444444
</a></li> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> <li><a href="#">aaaaaaaaaa
</a></li> <li><a href="#">bbbbbbbb
</a></li> <li><a href="#">cccccccc
</a></li> <li><a href="#">dddddddd
</a></li> <li><a href="#">eeeeeeeee
</a></li> <li><a href="#">fffffffff
</a></li> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
i dodaj dla tego menu arkusz ze stylem:
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
width:152px;
background-color: yellow;
position:relative;
}
/* style the links for the top level */
.menu a, .menu a:visited {
padding: 6px 0;
width:139px;
height:30px;
color:#fff;
background:#e2dfa8;
border-bottom:1px solid blue;
/*border-width:1px 1px 0 0; */
font-size:11px;
text-decoration:none;
line-height:29px;
display:block;
}
.menu ul li a{
width: 200px;
background:red;
}
/* CPanel */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
background:#949e7c;
}
/* kolor CPanel dla IE */
.menu ul ul a.drop:hover{
background:#c9ba65;
}
/* dla pozostałych*/
.menu ul ul :hover > a.drop {
background:#c9ba65;
}
/* tło drugiego podmenu */
.menu ul ul ul a, .menu ul ul ul a:visited {
background:#e2dfa8;
}
/* hover dla tło drugiego podmenu dla IE */
.menu ul ul ul a:hover {
background:#b2ab9b;
}
/* hover dla tło drugiego podmenu dla pozostałych */
.menu ul ul ul :hover > a {
background:#b2ab9b;
}
/* ukrywanie menu */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:31px;
left:0;
width:150px;
}
/* pozycja drugiego podmenu */
.menu ul ul ul{
left:150px;
top:0;
width:150px;
}
/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0;}
/* pierwsze podmenu */
.menu ul ul a, .menu ul ul a:visited {
background:#d4d8bd;
color:#000;
height:auto;
line-height:1em;
padding:5px 10px;
width:129px
/* rozwijane pierwsze menu */
}
* html .menu ul ul a{
width:150px;
}
/* tło menu dla IE */
.menu a:hover, .menu ul ul a:hover{
color:#fff;
background:#949e7c;
}
/* tło menu dla pozostałych */
.menu :hover > a, .menu ul ul :hover > a {
color:#fff;
background:#949e7c;
}
/* odkrywanie pierwszego podmenu w momencie najechani na menu */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
}
/* ukrywanie drugiego podmenu kiedy nie powinno być widoczne */
.menu ul :hover ul ul{
visibility:hidden;
}
/* odkrywanie drugiego podmenu */
.menu ul :hover ul :hover ul{
visibility:visible;
}
i podziwiaj jak overflow wszystko psuje.... Działa tylko pod IE. Bez overflowpod każdą ale nie mam tego odstępu o który tak walczyliśmy;)
