Witam, dopiero co zaczynam zabawę z programowaniem webowym i mam problem z rozwijanym menu za pomocą CSS, próbowałem przerobić przykład który znalazłem w internecie ale nie za bardzo działa :/.
#menu_zawartosc {
position:relative;
z-index:100;
background: url(images/nav_left.jpg) no-repeat;
}
#menu, #menu ul {
margin-left: 9px;
padding-left: 1px;
padding-bottom: 29px;
background: #2A2A2A bottom left url(images/nav_bot.jpg) no-repeat;
list-style-type: none;
background:bottom left url(images/nav_bot.jpg) no-repeat;}
#menu a, #menu a:visited {
color: #fff;
text-decoration: none;
border-left: 1px solid #959595;
padding-left: 10px;
display: block;
width: 90%;
padding: 2px 0 6px 8px;
}
#menu li ul li a, #menu li ul li a:visited {
padding-left:0;
color:#3F9;
border:none;
}
#menu li a.link, #menu li a.link:visited {
border-width:1px;
}
#menu li {
float:top;
list-style: none;
font: 14px "arial narrow", arial, sans-serif;
border-top: 1px solid #959595;
background:#2A2A2A;
padding: 7px 0 0 31px;
}
#menu li:hover {
position:relative;}
#menu li:hover > a {
color:#E9C379;
}
#menu li ul {
display:none;}
#menu li:hover > ul {
display:block;
position:absolute;
top:-11px; left:220px;
padding:10px 30px 30px 30px;
background:transparent; width:250px;
}
#menu > li:hover > ul {
left:-30px; top:16px;
}
#menu table {
position:absolute;
border-collapse:collapse;
top:0; left:0;
z-index:100;}
#menu li.link_strzalka_bok {
background:#2A2A2A url(images/arr_white.gif) no-repeat right center;}
* 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;}
<div id="menu_zawartosc"> <li><a href="#">O firmie
</a></li> <li class="link_strzalka_bok"><a href="#" class="link">Ślusarstwo Użytkowe
</a> <li><a href="#">Balustrady i schody
</a></li> <li><a href="#">Systemy oświetleniowe i lampy
</a></li> <li><a href="#">Detale architektoniczne
</a></li>
<li><a href="#">Metaloplastyka Sakralna
</a></li> <li><a href="#">Konserwacja Rekonstrukcja
</a></li> <li><a href="#">Partnerzy
</a></li> <li><a href="#">Kontakt
</a></li>
O co mi chodzi to :
1) Najważniejsza sprawa żeby można było najechać na drugą listę, nie wiem czemu ale w programie który używam wyświetla się prawidłowo, natomiast w IE7 lista chowa się po zjechaniu z napisu listy głównej, jednak dalej pozostając w oknie tegoż menu.
2) Chciałbym moc zmienić obrazek strzałki (images/arr_white.gif )po najechaniu na listę, też kurcze nie wiem jak.
3)
Przed tym menu po lewej stronie chciałbym dodać obrazek tzn , pasek który dopełnia to menu i jest długością do niego równy a także pasek na dole, te paski to obrazki oczywiscie.4) Na ostatek chciałem zmienić szerokość tej drugiej listy na mniejszą i też nie bardzo wiem gdzie :/.
5) Napotkałem nastepny problem, mianowicie stronka ktorą kleje :/ zrobiona jest na divach i właśnie ta rozwijana lista wariuje, tzn rozwija się na sobie zamiast z prawej strony no i oczywiscie niemozna zaznaczyc drugiej listy, jezeli trzeba to wysle kod calej stronk
Proszę o pomoc i dzieki z góry.
Ten post edytował trywalmak 4.02.2010, 19:58:22