Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Problem z rozjeżdżającym się menu rozwijanym
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
Sajrox
Witam,
Od jakiegoś czasu męczę się z menu w css które mozna zobaczyć tutaj:
http://serwisy.a-tech.pl/slawek/code

Chciałbym prosić o pomoc. Jak mam rozwiązać problem z tym rozjeżdżającym elementem menu po najechaniu na niego?
Tutaj jest kod CSS.

  1. #menu {
  2. background: #FFFFFF url(images/menu.gif) repeat-x;
  3. height: 30px;
  4. margin-top: 142px;
  5. margin-bottom: -120px;
  6. }
  7.  
  8. div#navigation {
  9. text-decoration: none;
  10. position: absolute;
  11. width: auto;
  12. }
  13.  
  14. div#navigation ul {
  15. float: left;
  16. margin: 0;
  17. padding: 0;
  18. margin-top: 8px;
  19. }
  20.  
  21. div#navigation ul a {
  22. padding-left: 20px;
  23. padding-right: 20px;
  24. }
  25.  
  26. div#navigation li {
  27. list-style: none;
  28. }
  29.  
  30.  
  31. div#navigation ul ul {
  32. display: none;
  33. position: absolute;
  34. background: #318fb6;
  35. border: 1px solid #145f7d;
  36. margin-top: 9px;
  37. min-width: 140px;
  38. }
  39.  
  40. div#navigation ul ul li {
  41. padding-top: 4px;
  42. padding-bottom: 4px;
  43. border-left: 6px solid #207b9f;
  44. border-bottom: 1px solid #207b9f;
  45. min-width: 140px;
  46. }
  47.  
  48. div#navigation ul ul li:hover {
  49. background: #2e82a4;
  50. border-left: 6px solid #145f7d;
  51. }
  52.  
  53. div#navigation ul ul a{
  54. color: #FFFFFF;
  55. }
  56.  
  57. div#navigation ul:hover ul {
  58. position: relative;
  59. display: block;
  60. }
krowal
Ostatni wpis w twoim kodzie:
  1. div#navigation ul:hover ul {
  2. position: relative;
  3. display: block;
  4. }

Zmień "position: relative;" na "position: absolute;" u mnie na FF 2.0 zadziałało, dalej nie sprawdzałem, ale powinno być ok.

EDIT: zauważyłem że po tej zmianie menu rozwijane chowa sie jak się zjedzie z elementu nadrzędnego, zmieniłem jeszcze parę rzeczy i jest ok, tylko nie wiem czy Ci się ramka nie rozjedzie, ale to już sobie poprawisz smile.gif
  1. #menu {
  2. background: #FFFFFF url(images/menu.gif) repeat-x;
  3. height: 30px;
  4. margin-top: 142px;
  5. margin-bottom: -120px;
  6. }
  7.  
  8. div#navigation {
  9. text-decoration: none;
  10. position: absolute;
  11. width: auto;
  12. }
  13.  
  14. div#navigation ul {
  15. float: left;
  16. margin: 0;
  17. padding: 0;
  18. }
  19.  
  20. div#navigation ul a {
  21. display: block;
  22. padding: 4px 20px;
  23. }
  24.  
  25. div#navigation li {
  26. list-style: none;
  27. }
  28.  
  29.  
  30. div#navigation ul ul {
  31. display: none;
  32. margin-left: 20px;
  33. position: absolute;
  34. background: #318fb6;
  35. border: 1px solid #145f7d;
  36. min-width: 140px;
  37. }
  38.  
  39. div#navigation ul ul a{
  40. padding: 8px 20px;
  41. }
  42. div#navigation ul ul li {
  43. border-left: 6px solid #207b9f;
  44. border-bottom: 1px solid #207b9f;
  45. min-width: 140px;
  46. }
  47.  
  48. div#navigation ul ul li:hover {
  49. background: #2e82a4;
  50. border-left: 6px solid #145f7d;
  51. }
  52.  
  53. div#navigation ul ul a{
  54. color: #FFFFFF;
  55. }
  56.  
  57. div#navigation ul:hover ul {
  58. position: absolute;
  59. display: block;
  60. }
tak jest lepiej smile.gif
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.