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:
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>