| Autor | Zpráva | ||
|---|---|---|---|
| hexcross... Profil * |
#1 · Zasláno: 4. 1. 2011, 14:33:56
Zdravím :)
Vytvářím vysouvací menu pomocí HTML + CSS, funguje skvěle ve FF, Opera, Chrome a v úžasném IE bohužel nefunguje. Konkrétně se nezobrazují položky menu (pomocí visibility:visible;), zkoušel jsem to několika způsoby ale nic... Zajímavost : když napíšu do HTML napevno <ul style="visibilyty:visible;"> tak se to menu zobrazí takže problém je v tom HOVER.. Hodil jsem to sem : http://vtp-volek.cz/menu/ Jinak kod : HTML <ul class="menu"> <li><a class="menu_1" href="#"> </a> </li> </ul><ul class="menu"> <li><a class="menu_2" href="#"> </a> </li> </ul><ul class="menu"> <li><a class="menu_3" href="#"> </a> <ul class="seznam"> <li><a href="#">Vodo</a></li> <li><a href="#">Topo</a></li> <li><a href="#">Plyn</a></li> </ul> </li> </ul><ul class="menu"> <li><a class="menu_4" href="#"> </a> <ul> <li><a href="#">Vodoinstalace</a></li> <li><a href="#">Vytápění</a></li> <li><a href="#">Plynoinstalace</a></li> </ul> </li> </ul><ul class="menu"> <li><a class="menu_5" href="#"> </a> </li> </ul> CSS :
.menu {
width : 174px;
color: #000;
padding: 0;
margin: 0;
list-style-type: none;
display: inline-block;
float:left;
}
.menu ul {
margin-top: 0px;
position: absolute;
visibility: hidden;
background-color: #fff;
margin: 0;
padding: 0;
list-style-type: none;
}
.menu li {
float: left;
width: 174px;
white-space: nowrap;
}
.menu a {
text-align: left;
color: #fff;
background-color: #838383;
display: block;
text-decoration: none;
font-weight: bold;
}
/* položky menu*/
.menu ul a:link, .menu ul a:visited {
height : 30px;
color: #fff;
border-bottom: none;
padding-left: 20px;
padding-top : 6px;
}
.menu ul a:hover {
color: #fff;
background-color: #3399cc;
}
.menu li:hover ul, ul.menu li.hover ul {
visibility: visible;
}
.menu li li {
float: none;
border: none;
padding: 0;
margin: 0;
}
a.menu_1:link, a.menu_1:visited {
background-image: url(img/menu/menu_1.jpg);
}
a.menu_1:hover {
background-image: url(img/menu/menu_1_a.jpg);
}
a.menu_2:link, a.menu_2:visited {
background-image: url(img/menu/menu_2.jpg);
}
a.menu_2:hover {
background-image: url(img/menu/menu_2_a.jpg);
}
a.menu_3:link, a.menu_3:visited {
background-image: url(img/menu/menu_3.jpg);
}
a.menu_3:hover {
background-image: url(img/menu/menu_3_a.jpg);
}
a.menu_4:link, a.menu_4:visited {
background-image: url(img/menu/menu_4.jpg);
}
a.menu_4:hover {
background-image: url(img/menu/menu_4_a.jpg);
}
a.menu_5:link, a.menu_5:visited {
background-image: url(img/menu/menu_5.jpg);
}
a.menu_5:hover {
background-image: url(img/menu/menu_5_a.jpg);
}
a.menu_1:link, a.menu_1:visited, a.menu_1:hover, a.menu_2:link, a.menu_2:visited, a.menu_2:hover , a.menu_3:link, a.menu_3:visited, a.menu_3:hover , a.menu_4:link, a.menu_4:visited, a.menu_4:hover , a.menu_5:link, a.menu_5:visited, a.menu_5:hover {
width : 174px;
height : 50px;
}
|
||
| panther Profil |
#2 · Zasláno: 4. 1. 2011, 15:30:33
hexcross…:
„tak se to menu zobrazí takže problém je v tom HOVER“ jádro toho „problému“ spočívá v neznalosti IE6 :hoveru kdekoliv jinde než na odkazu. Podle přiloženého stylopisu (a třídy hover tam, kde je i pseudotřída :hover) tipuji, že jsi si menu odněkud stáhl. Tam by měl být odkaz i na příslušný hover.htc, který jsi zapomněl přilinkovat.
|
||
| hexcross... Profil * |
#3 · Zasláno: 4. 1. 2011, 16:00:08
panther:
Díky moc ! Pomohlo vypnutí quirk modu a pár úprav v css :) Jinak menu jsem někde stáhl a upravil ;) to jsi trefil :) Jeste jednou díky ! |
||
|
Časová prodleva: 13 let
|
|||
0