Menu wysuwane

[stefik4]

Witam.

Przy tworzeniu swojej strony chcę skorzystać z tego menu wysuwanego: http://www.dhofca.ayz.pl/blog/index.php/wysuwane-menu-w-css/.

Skopiowałem styl, wkleiłem kod i nie działa w IE. Zrobiłem test i rozdzieliłem menu od reszty strony i dziwo działa.

http://speedway-world.pl/layout/ w IE nie działa

a tutaj http://speedway-world.pl/layout/menu.html działa

Czekam na pomoc.

Kod:

Kod:

<style>

ul {
list-style:none; /* usuwamy wypunktowanie listy */
}

#menu  {
margin: 0;
padding: 0; /* usuwamy wszelkie odstępy */
}

#menu li a {
border-left: 1px #2a2a2a solid;
border-right: 1px #585a5b solid;
border-bottom: 1px #585a5b solid;
border-top: 1px #2a2a2a solid;
color: #ffffff;
text-decoration:none;
padding:15px 15px;
background: #333333;
}

#menu li, #menu li a {
float:left;
}

#menu li {
position:relative; /* względem tego będziemy pozycjonowali podmenu */
}

#menu li a:hover {
background: #252627;
}

#menu li ul { /* tutaj odnosimy się do podmenu*/
display:none;
position:absolute;
top:100%; /* wysuwające się podmenu przesuwamy w dół o długość menu-matki */
padding:0;
margin:0; /*usuwamy wszelkie odstępy podmenu*/
}

#menu li:hover > ul { /* selektor > oznacza, że instrukcja obejmuje każdy tag <ul> wewnątrz #menu li */
display:block;
}

#menu li ul li, #menu li ul li a {
float: none;
}

#menu li ul li a {
width: 100px; /* szerokosc wysuwajacego sie podmenu*/
display: block;
}

</style>

<ul id="menu">
    <li><a href="#">Strona Główna</a></li>
    <li><a href="#">Portfolio</a>
        <ul>
            <li><a href="#">Grafika</a></li>
            <li><a href="#">Webdesign</a></li>
        </ul>
    </li>
    <li><a href="#">O mnie</a></li>
    <li><a href="#">Oferta</a>
        <ul>
            <li><a href="#">Cennik</a></li>
            <li><a href="#">Terminy</a></li>
        </ul>
    </li>
    <li><a href="#">Kontakt</a></li>
</ul>