Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Display:block dla menu rozwijanego
Forum PHP.pl > Forum > Przedszkole
AboutMe
1.10.2010, 15:09:04
Witam,

Chciałbym żeby 1 level menu wyświetlał się 1 pod drugim
Dodałem #nav2 li { display:block; }
ale nie działa, ktoś mógłby mi z tym pomóc?



[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3. 	<head>
  4.  
  5.  
  6. <style type="text/css">
  7. #categories2 { margin-top:30px; font-weight:300; color:#000000; border:0px solid black; float:left; }
  8. #nav2, #nav2 ul{ margin:0; padding:0;  list-style-type:none;  list-style-position:outside; background:#aa0025; position:relative; line-height:1.5em;z-index:100; font-size:32px;}
  9. #nav2 a:link, #nav2 a:active, #nav2 a:visited{ display:block; padding:0px 20px; border:0px solid #333; color:#000000; text-decoration:none;}
  10. #nav2 a:hover{ background-color:#none; color:#fff475; }
  11. #nav2 li { float:left; position:relative; background:none; }
  12. #nav2 ul {position:absolute; width:300px; top: 35px; display:none;font-size:12px; border:none; -moz-border-radius:10px; -webkit-border-radius:10px; /* Safari, Chrome */border-radius:10px; /* CSS3 */}
  13. #nav2 ul a { color:white; }
  14. #nav2 li ul a{ width:260px; float:left; font-size:11px;}
  15. #nav2 ul ul{top:auto;}
  16. #nav2 ul ul:hover{ width:300px;}
  17. #nav2 li ul ul { left:300px; margin:0px 0 0 0px; font-size:11px; }
  18. #nav2 li ul li { padding:5px 0 5px 0; border-bottom:0px solid #0497f5; width:300px; }
  19. #nav2 li:hover ul ul, #nav2 li:hover ul ul ul, #nav2 li:hover ul ul ul ul{ display:none;}
  20. #nav2 li:hover ul, #nav2 li li:hover ul, #nav2 li li li:hover ul, #nav2 li li li li:hover ul{ display:block; }
  21. #nav2 li { display:block; }
  22. </style>
  23.  
  24.  
  25.  
  26. 		<div id="categories2">
  27.  
  28. 		<div class='wpsc_categorisation_group' id='categorisation_group_1'>
  29.  
  30. 					<ul id='nav2'>
  31. 										<li><a href="page_id=4&category=11" class='wpsc_category_image_link'></a><a href="page_id=4&category=11" class="wpsc_category_link wpsc-cat-item wpsc-cat-item-11">Test</a>
  32. 																			</li>
  33. 										<li><a href="page_id=4&category=6" class='wpsc_category_image_link'></a><a href="page_id=4&category=6" class="wpsc_category_link wpsc-cat-item wpsc-cat-item-6">Test</a>
  34.  
  35. 														<ul>					<li><a href="page_id=4&category=9" class='wpsc_category_image_link'></a><a href="page_id=4&category=9" class="wpsc_category_link wpsc-cat-item wpsc-cat-item-9">Man</a>
  36. 														<ul>					<li><a href="page_id=4&category=12" class='wpsc_category_image_link'></a><a href="page_id=4&category=12" class="wpsc_category_link wpsc-cat-item wpsc-cat-item-12">Test</a>
  37. 														<ul>					<li><a href="page_id=4&category=15" class='wpsc_category_image_link'></a><a href="page_id=4&category=15" class="wpsc_category_link wpsc-cat-item wpsc-cat-item-15">Testx</a>
  38. 																			</li>
  39. 					</ul>					</li>
  40.  
  41. 										<li><a href="page_id=4&category=13" class='wpsc_category_image_link'></a><a href="page_id=4&category=13" class="wpsc_category_link wpsc-cat-item wpsc-cat-item-13">Test2</a>
  42. 																			</li>
  43. 										<li><a href="page_id=4&category=14" class='wpsc_category_image_link'></a><a href="page_id=4&category=14" class="wpsc_category_link wpsc-cat-item wpsc-cat-item-14">Test3</a>
  44. 																			</li>
  45. 					</ul>					</li>
  46. 										<li><a href="page_id=4&category=10" class='wpsc_category_image_link'></a><a href="page_id=4&category=10" class="wpsc_category_link wpsc-cat-item wpsc-cat-item-10">Test</a>
  47.  
  48. 																			</li>
  49.  
  50. 					</ul>					</li>
  51. 										<li><a href="page_id=4&category=7" class='wpsc_category_image_link'></a><a href="page_id=4&category=7" class="wpsc_category_link wpsc-cat-item wpsc-cat-item-7">Pants</a>
  52. 																			</li>
  53. 										<li><a href="page_id=4&category=1" class='wpsc_category_image_link'></a><a href="page_id=4&category=1" class="wpsc_category_link wpsc-cat-item wpsc-cat-item-1">Shirts</a>
  54. 																			</li>
  55. 										<li><a href="page_id=4&category=8" class='wpsc_category_image_link'></a><a href="page_id=4&category=8" class="wpsc_category_link wpsc-cat-item wpsc-cat-item-8">Shorts</a>
  56.  
  57. 																			</li>
  58.  
  59. 										<li><a href="page_id=4&category=5" class='wpsc_category_image_link'></a><a href="page_id=4&category=5" class="wpsc_category_link wpsc-cat-item wpsc-cat-item-5">Sweaters</a>
  60. 																			</li>
  61.  
  62. 				</ul>
  63. 				<div class='clear_category_group'></div>
  64. 		</div> </div><!--categories2 ends-->
  65.  
  66.  
  67.  
  68.  
  69. </body>
  70. </html>
[HTML] pobierz, plaintext
zegarek84
1.10.2010, 18:09:40
skoro chciałeś w pionie to dla mnie bez sensu tu float - poza tym wygodniej by się patrzało jakby całe menu jak i podmenu miało ten sam rozmiar czcionki (pierwszy poziom za duży) - i 300px to trochu za szerokie pod menu [jak dla mnie]... z grubsza zmieniłem coby tylko działało - pobaw się z cyferkami i inne - deczko to mało uniwersalnie zrobione gdyż widzę, że hover'a masz na każdy poziom zagłębienia - pomyśl trochę...

ps. mogłeś ten kod chiciaż z jakimiś wcięciami wrzucić - wygodniej by było ;]
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3. 	<head>
  4.  
  5.  
  6. <style type="text/css">
  7. #categories2 { margin-top:30px; font-weight:300; color:#000000; border:0px solid black; float:left; }
  8. #nav2, #nav2 ul{ margin:0; padding:0;  list-style-type:none;  list-style-position:outside; background:#aa0025; position:relative; line-height:1.5em;z-index:100; font-size:32px;display:block;width:200px;}
  9. #nav2 a:link, #nav2 a:active, #nav2 a:visited{ display:block; padding:0px 20px; border:0px solid #333; color:#000000; text-decoration:none;}
  10. #nav2 a:hover{ background-color:#none; color:#fff475; }
  11.  
  12. #nav2 li { display:block; position:relative; background:none; }
  13.  
  14. #nav2 ul {position:absolute; width:300px; top: 0px; display:none;font-size:12px; border:none; -moz-border-radius:10px; -webkit-border-radius:10px; /* Safari, Chrome */border-radius:10px; /* CSS3 */}
  15. #nav2 ul a { color:white; }
  16. #nav2 li ul a{ width:260px; float:left; font-size:11px;}
  17. #nav2 ul ul{top:auto;}
  18. #nav2 ul ul:hover{ width:300px;}
  19. #nav2 ul{left:200px;margin:0px 0 0 0px; font-size:11px; }
  20. #nav2 ul li ul{left:300px}
  21. #nav2 li ul li { padding:5px 0 5px 0; border-bottom:0px solid #0497f5; width:300px; }
  22. #nav2 li:hover ul ul, #nav2 li:hover ul ul ul, #nav2 li:hover ul ul ul ul{ display:none;}
  23. #nav2 li:hover ul, #nav2 li li:hover ul, #nav2 li li li:hover ul, #nav2 li li li li:hover ul{ display:block; }
  24. #nav2 li { display:block; }
  25. </style>
  26.  
  27.  
  28.  
  29. 		<div id="categories2">
  30.  
  31. 		<div class='wpsc_categorisation_group' id='categorisation_group_1'>
  32.  
  33. 					<ul id='nav2'>
  34. 										<li><a href="page_id=4&category=11" class='wpsc_category_image_link'></a><a href="page_id=4&category=11" class="wpsc_category_link wpsc-cat-item wpsc-cat-item-11">Test</a>
  35. 																			</li>
  36. 										<li><a href="page_id=4&category=6" class='wpsc_category_image_link'></a><a href="page_id=4&category=6" class="wpsc_category_link wpsc-cat-item wpsc-cat-item-6">Test</a>
  37.  
  38. 														<ul>					<li><a href="page_id=4&category=9" class='wpsc_category_image_link'></a><a href="page_id=4&category=9" class="wpsc_category_link wpsc-cat-item wpsc-cat-item-9">Man</a>
  39. 														<ul>					<li><a href="page_id=4&category=12" class='wpsc_category_image_link'></a><a href="page_id=4&category=12" class="wpsc_category_link wpsc-cat-item wpsc-cat-item-12">Test</a>
  40. 														<ul>					<li><a href="page_id=4&category=15" class='wpsc_category_image_link'></a><a href="page_id=4&category=15" class="wpsc_category_link wpsc-cat-item wpsc-cat-item-15">Testx</a>
  41. 																			</li>
  42. 					</ul>					</li>
  43.  
  44. 										<li><a href="page_id=4&category=13" class='wpsc_category_image_link'></a><a href="page_id=4&category=13" class="wpsc_category_link wpsc-cat-item wpsc-cat-item-13">Test2</a>
  45. 																			</li>
  46. 										<li><a href="page_id=4&category=14" class='wpsc_category_image_link'></a><a href="page_id=4&category=14" class="wpsc_category_link wpsc-cat-item wpsc-cat-item-14">Test3</a>
  47. 																			</li>
  48. 					</ul>					</li>
  49. 										<li><a href="page_id=4&category=10" class='wpsc_category_image_link'></a><a href="page_id=4&category=10" class="wpsc_category_link wpsc-cat-item wpsc-cat-item-10">Test</a>
  50.  
  51. 																			</li>
  52.  
  53. 					</ul>					</li>
  54. 										<li><a href="page_id=4&category=7" class='wpsc_category_image_link'></a><a href="page_id=4&category=7" class="wpsc_category_link wpsc-cat-item wpsc-cat-item-7">Pants</a>
  55. 																			</li>
  56. 										<li><a href="page_id=4&category=1" class='wpsc_category_image_link'></a><a href="page_id=4&category=1" class="wpsc_category_link wpsc-cat-item wpsc-cat-item-1">Shirts</a>
  57. 																			</li>
  58. 										<li><a href="page_id=4&category=8" class='wpsc_category_image_link'></a><a href="page_id=4&category=8" class="wpsc_category_link wpsc-cat-item wpsc-cat-item-8">Shorts</a>
  59.  
  60. 																			</li>
  61.  
  62. 										<li><a href="page_id=4&category=5" class='wpsc_category_image_link'></a><a href="page_id=4&category=5" class="wpsc_category_link wpsc-cat-item wpsc-cat-item-5">Sweaters</a>
  63. 																			</li>
  64.  
  65. 				</ul>
  66. 				<div class='clear_category_group'></div>
  67. 		</div> </div><!--categories2 ends-->
  68.  
  69.  
  70.  
  71.  
  72. </body>
  73. </html>
[HTML] pobierz, plaintext
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.