Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Problem z rozwijanym menu
Forum PHP.pl > Forum > Przedszkole
trywalmak
4.02.2010, 19:26:30
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 :/. 

[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2. #menu_zawartosc {
  3.  
  4. 	position:relative; 
  5.  
  6. 	z-index:100;
  7. 	background: url(images/nav_left.jpg) no-repeat;
  8. 	}
  9. #menu, #menu ul {
  10.   margin-left: 9px;
  11.   padding-left: 1px;
  12.   padding-bottom: 29px;
  13.   background: #2A2A2A bottom left url(images/nav_bot.jpg) no-repeat;
  14. 	list-style-type: none;
  15. 	background:bottom left url(images/nav_bot.jpg) no-repeat;}
  16. #menu a, #menu a:visited {
  17.   color: #fff;
  18.   text-decoration: none;
  19.   border-left: 1px solid #959595;
  20.   padding-left: 10px;
  21.   display: block;
  22.   width: 90%;
  23.   padding: 2px 0 6px 8px;
  24.     }
  25. #menu li ul li a, #menu li ul li a:visited {
  26. 	padding-left:0;
  27. 	color:#3F9;
  28. 	border:none;
  29. 	}
  30. #menu li a.link, #menu li a.link:visited {
  31. 	border-width:1px;
  32. 	}
  33. #menu li {
  34.   float:top;
  35.   list-style: none;
  36.   font: 14px "arial narrow", arial, sans-serif;
  37.   border-top: 1px solid #959595;
  38.   background:#2A2A2A;
  39.   padding: 7px 0 0 31px;
  40.   }
  41. #menu li:hover {
  42. 	position:relative;}
  43. #menu li:hover > a { 
  44. 	color:#E9C379;
  45. 		}
  46. #menu li ul {
  47. 	display:none;}
  48. #menu li:hover > ul {
  49. 	display:block; 
  50. 	position:absolute; 
  51. 	top:-11px; left:220px; 
  52. 	padding:10px 30px 30px 30px; 
  53. 	background:transparent; width:250px;
  54. 	}
  55. #menu > li:hover > ul {
  56. 	left:-30px; top:16px;
  57. 	}
  58. #menu table {
  59. 	position:absolute; 
  60. 	border-collapse:collapse; 
  61. 	top:0; left:0; 
  62. 	z-index:100;}
  63. #menu li.link_strzalka_bok {
  64. 	background:#2A2A2A url(images/arr_white.gif) no-repeat right center;}
  65. * html #menu li ul {
  66. 	visibility:hidden; 
  67. 	display:block;
  68. 	position:absolute; 
  69. 	top:-11px; 
  70. 	left:80px; 
  71. 	padding:10px 30px 30px 30px; 
  72. 	background:transparent;}
  73. #menu li a:hover ul ul{visibility:hidden;}
  74. #menu li a:hover ul a:hover ul ul{visibility:hidden;}
  75. #menu li a:hover ul a:hover ul a:hover ul ul{visibility:hidden;}
  76. #menu li a:hover ul a:hover ul a:hover ul a:hover ul ul {visibility:hidden;}
  77. #menu li a:hover ul {visibility:visible; left:-30px; top:14px;}
  78. #menu li a:hover ul a:hover ul{visibility:visible; top:-11px; left:80px;}
  79. #menu li a:hover ul a:hover ul a:hover ul {visibility:visible;}
  80. #menu li a:hover ul a:hover ul a:hover ul a:hover ul {visibility:visible;}
  81. #menu li a:hover ul a:hover ul a:hover ul a:hover ul a:hover ul {visibility:visible;}
  82. </style>
  83. </head>
  84.  
  85. <body>
  86.  <div id="menu_zawartosc">
  87. <ul id="menu" >			
  88. 				            <li><a href="#">O firmie</a></li>                
  89. 				             <li class="link_strzalka_bok"><a href="#" class="link">Ślusarstwo Użytkowe</a>
  90.                                                          <ul>
  91. 					<li><a href="#">Balustrady i schody</a></li>                
  92. 					<li><a href="#">Systemy oświetleniowe i lampy</a></li>
  93.                                                             <li><a href="#">Detale architektoniczne</a></li>
  94.  
  95. 			                     </ul>					
  96. 			</li>
  97. 			<li><a href="#">Metaloplastyka Sakralna</a></li>
  98.             	<li><a href="#">Konserwacja Rekonstrukcja</a></li>
  99.                 	<li><a href="#">Partnerzy</a></li>
  100.                     	<li><a href="#">Kontakt</a></li>
  101. 			</ul>
  102.  
  103. 		</div>
[HTML] pobierz, plaintext


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.
webspy
4.02.2010, 23:35:52
Poczytaj troszkę tutaj: http://www.kurshtml.boo.pl/skrypty/menu_rozwijane.html
trywalmak
5.02.2010, 11:00:25
Dzieki , niedaje rady przerobić zwyklego css z listą ale napisze sobie skrypt w js na liste ktora potrzebuje, ja p*****e.

Dobra zrobiłem wszystko co chciałem , do zamkniecia.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.