+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: Menu rozwijane w IE (/thread-menu-rozwijane-w-ie)
Menu rozwijane w IE - Dzonzi - 01-02-2010
Witam.
Mam problem z rozwijanym menu w IE w Viście. W operze na Xp dziala elegancko a IE menu wgl sie nie rozwija. Moja cierpliwośc sie skończyła. Proszę o pomoc.
Oto kod:
Kod PHP:
<html>
<head>
<style type="text/css">
body {
background-color: #FFCC66;
border-style: ridge;
border-color: red;
border-width: 5px;
}
#menu_zawartosc {margin:100px 300px 15px; position:relative; width:735px; height:20px; z-index:100;}
#menu, #menu ul {padding:0; margin:0; list-style-type: none;}
#menu a, #menu a:visited {display:block;width:120px; font-size:15px; color:white; height:25px; line-height:24px; text-decoration:none; text-indent:5px; border:1px solid #000; border-width:1px 0 1px 1px;}
#menu li ul li a, #menu li ul li a:visited {border-width:0 1px 1px 1px;}
#menu li a.link, #menu li a.link:visited {border-width:1px;}
#menu li {float:left; background: black;}
#menu li:hover {position:relative;}
#menu li:hover > a {background: black
; color: #c00;}
#menu li ul {display:none;}
#menu li:hover > ul {display:block; position:absolute; top:-11px; left:80px; padding:10px 30px 30px 30px; background:transparent; width:120px;}
#menu > li:hover > ul {left:-30px; top:16px;}
#menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}
* html #menu li a:hover {position:relative; background:#dfd7ca; color:#c00;}
#menu li a:active, #menu li a:focus {background:#dfd7ca; color:#c00;}
* html #menu li ul {visibility:hidden; display:block; position:absolute; top:-11px; left:80px; padding:10px 30px 30px 30px; background:transparent;}
#menu li a:hover ul ul{visibility:hidden;}
#menu li a:hover ul a:hover ul ul{visibility:hidden;}
#menu li a:hover ul a:hover ul a:hover ul ul{visibility:hidden;}
#menu li a:hover ul a:hover ul a:hover ul a:hover ul ul {visibility:hidden;}
#menu li a:hover ul {visibility:visible; left:-30px; top:14px;}
#menu li a:hover ul a:hover ul{visibility:visible; top:-11px; left:80px;}
#menu li a:hover ul a:hover ul a:hover ul {visibility:visible;}
#menu li a:hover ul a:hover ul a:hover ul a:hover ul {visibility:visible;}
#menu li a:hover ul a:hover ul a:hover ul a:hover ul a:hover ul {visibility:visible;}
#tekst li {float:left; background: red;}
#poletekstowe {margin:100px 210px 600px; position:relative; width:700px; height:25px; z-index:100;}
#tekst a, #tekst a:visited {display:block;width:700px; font-size:15px; color:white; height:500px; line-height:24px; text-decoration:none; text-indent:5px; border:1px solid #000; border-width:1px 0 1px 1px;}
#tekst li {float:left; background: black;}
b {font-size: 20px;}
</style>
</head>
<body>
<div id="menu_zawartosc">
<ul id="menu">
<li><a href="#">Strona Główna</a>
<li><a href="#">Forum Szkoly</a></li>
<li><a href="#">Gmina Harasiuki<!--[if IE 7]><!--></a>
<ul>
<li><a href="#">Powierzchnia</a></li>
<li><a href="#">Liczba ludnosci</a></li>
<li><a href="#">Data Utworzenia</a></li>
</ul>
<li class=""><a href="#">Pomoc Naukowa<!--[if IE 7]><!--></a><!--<![rozzwija]-->
<!--[if lte IE 6]>
<table>
<tr>
<td><![rozzwija]-->
<ul>
<li><a href="#">Jezyk Polski</a></li>
<li><a href="#">Matematyka</a></li>
<li><a href="#">Informatyka</a></li>
</ul>
<li><a href="#">Gimnazjum<!--[if IE 7]><!--></a>
<ul>
<li><a href="#">Nauczyciele</a></li>
<li><a href="#">Przedmioty</a></li>
<li><a href="#">Rozklad zajec</a></li>
<!--[if lte IE 6]></td>
</li>
</div>
<div id="poletekstowe">
<ul id="tekst">
<li><a><b>Gmina Harasiuki</b> (do 1954 gmina Huta Krzeszowska) - gmina wiejska w województwie podkarpackim, w powiecie niżańskim. W latach 1975-1998 gmina położona była w województwie tarnobrzeskim.
</body>
</html>
RE: Menu rozwijane w IE - razorskate - 03-02-2010
IE ma problem z obsługą pseudoklas, więc selektory potomka itp. są dla niego dość obce
. Więc już chyba masz rozwiązanie ? Jeśli chcesz zrobić menu rozwijalne, polecam takie:
Kod CSS:
Kod:
#drop_down_menus * {
margin:0; padding:0; /* usunięcie marginesów */
}
#drop_down_menus {
behavior:url(../../lib/js_tools/csshover.htc);
font-family:lucida, arial, sans-serif;
border:1px solid #686;
float:left;
}
#drop_down_menus ul {
/* border:2px solid red; */ /* ramka kontenera */
float:left; /* ul otacza li */
}
#drop_down_menus li {
/* border:2px solid blue; */
border-left:2px solid #ACA;
list-style-type:none; /* usunięcie punktorów listy */
float:left;
position:relative;
background-color:#DED;
}
#drop_down_menus li:first-child {
border-left:none;
}
#drop_down_menus a {
display:block; /* odpowiada za poprawne wyświetlenie podmenu (element pod elementem) */
padding:.3em 6px;
color:#686;
text-decoration:none;
}
#drop_down_menus a:hover {
color:#DED;
background-color:#464;
}
#drop_down_menus li ul {
position:absolute;
display:none;
width:7em;
left:-1px;
}
#drop_down_menus li:hover ul {
display:block; /* wyświetla podmenu po najechaniu myszką */
}
#drop_down_menus li ul li {
width:100%;
border-right:1px solid #686; /* obramowanie */
border-bottom:1px solid #686;
border-left:1px solid #686;
}
#drop_down_menus li ul li:first-child {
border-left:1px solid #686;
border-top:1px solid #686;
}
/* a hack for IE 6 - doesn't understand first-child \*/
* html #drop_down_menus li ul {
border-top:1px solid #686; /* dodanie górnego obramowania w submenu w IE6 */
}Kod HTML:
Kod:
<div id="drop_down_menus">
<ul>
<li><a href="#">Item 1</a>
<ul>
<li><a href="#">Item 1a</a> </li>
<li><a href="#">Item 1b</a></li>
</ul>
</li>
<li><a href="#">Item 2</a>
<ul>
<li><a href="#">Item 2a</a> </li>
<li><a href="#">Item 2b</a></li>
<li><a href="#">Item 2c</a></li>
</ul>
</li>
<li><a href="#">Item 3</a>
<ul>
<li><a href="#">Item 3a</a> </li>
<li><a href="#">Item 3b</a></li>
</ul>
</li>
</ul>
</div>Całą zabawa polega na odpowiednim zagnieżdżaniu list w html. To tyle jeśli chodzi o robienie rozwijanych menu w CSS
. Dodaj do tego powyżej jakieś bajery graficzne i będzie w porządku. Jeśli przeanalizujesz budowę html tegoż menu, z łatwością poznasz zasadę jego działania 
RE: Menu rozwijane w IE - Pawel18 - 05-02-2010
Witam
To menu nie dziala w ie6. Mam problem z tym. przedstawie moje menu. Pomoze ktos poprawic? W firefoxie i operze dziala ok, a w IE juz nie.
__________________CSS____________________________
#menu {
position: relative; z-index: 2; top: 0px; right: 1px; bottom: 0px; left: 0px;
list-style-type: none;
}
#menu ul {
list-style-type: none;
}
#menu li {
float: left;
}
#menu li li {
float: none;
}
#menu li a {
display: block;
width: 127px;
text-align: center;
background-color: blue;
background-repeat: no-repeat;
color: black;
padding: 3px 0px;
text-decoration: underline;
}
#menu li a:hover {
background-color: blue;
background-repeat: no-repeat;
color: black;
text-decoration: none;
}
#menu li ul {
position: absolute;
height: 1px;
overflow: hidden;
}
#menu li:hover ul {
height: 150px;
}
.przerwa {
height: 1px;
}
__________________HTML____________________________
<ul id="menu">
<li><a href="">Aktualnosci</a>
<ul class="one">
<div class="przerwa"></div>
<li><a href="">xxxx</a></li>
<div class="przerwa"></div>
<li><a href="">xxxxx</a></li>
<div class="przerwa"></div>
<li><a href="">nnnnn</a></li>
<div class="przerwa"></div>
<li><a href="">xxxxx</a></li>
<div class="przerwa"></div>
<li><a href="">xxxxxx</a></li>
</ul>
</li>
<li><a href="">Aktualnosci</a>
<ul class="one">
<div class="przerwa"></div>
<li><a href="">xxxx</a></li>
<div class="przerwa"></div>
<li><a href="">xxxxx</a></li>
<div class="przerwa"></div>
<li><a href="">nnnnn</a></li>
<div class="przerwa"></div>
<li><a href="">xxxxx</a></li>
<div class="przerwa"></div>
<li><a href="">xxxxxx</a></li>
</ul>
</li>
<li><a href="">Aktualnosci</a>
<ul class="one">
<div class="przerwa"></div>
<li><a href="">xxxx</a></li>
<div class="przerwa"></div>
<li><a href="">xxxxx</a></li>
<div class="przerwa"></div>
<li><a href="">nnnnn</a></li>
<div class="przerwa"></div>
<li><a href="">xxxxx</a></li>
<div class="przerwa"></div>
<li><a href="">xxxxxx</a></li>
</ul>
</li>
<li><a href="">Aktualnosci</a>
<ul class="one">
<div class="przerwa"></div>
<li><a href="">xxxx</a></li>
<div class="przerwa"></div>
<li><a href="">xxxxx</a></li>
<div class="przerwa"></div>
<li><a href="">nnnnn</a></li>
<div class="przerwa"></div>
<li><a href="">xxxxx</a></li>
<div class="przerwa"></div>
<li><a href="">xxxxxx</a></li>
</ul>
</li>
<li><a href="">Aktualnosci</a>
<ul class="one">
<div class="przerwa"></div>
<li><a href="">xxxx</a></li>
<div class="przerwa"></div>
<li><a href="">xxxxx</a></li>
<div class="przerwa"></div>
<li><a href="">nnnnn</a></li>
<div class="przerwa"></div>
<li><a href="">xxxxx</a></li>
<div class="przerwa"></div>
<li><a href="">xxxxxx</a></li>
</ul>
</li>
</ul>
Z gory dzieki za pomoc. Najlepij odpisac na maila: [email protected]