Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] jak zrobić takie menu
Forum PHP.pl > Forum > Przedszkole
dwwa
chcę zrobić takie menu:



zrobiłem już prawie całe, ale nie wiem jak zrobić, żeby to tło w menu było dla a:hover, bo jak dam w ul li a:hover taki kod:
  1. position: relative;
  2. bottom: 50px;
  3. background: #333;
  4. height: 50px;
  5. width: 119px;


to po najechaniu nic się nie dzieje... mój kod:
  1. <ul class="menu">
  2. <li><a href="o-nas.html" title="O nas">O nas</a></li>
  3. <li><a href="oferta.html" title="Zobacz co możemy zaoferować">Oferta</a></li>
  4. <li><a href="galeria.html" title="Galeria zdjęć">Galeria</a></li>
  5. <li><a href="kontakt.html" title="Skontaktuj się z nami">Kontakt</a></li>
  6. </ul>

  1. #header ul.menu {
  2. float: right;
  3. list-style: none;
  4. }
  5.  
  6. #header ul.menu li {
  7. display: inline-block;
  8. height: 83px;
  9. width: 119px;
  10.  
  11. }
  12.  
  13. #header ul.menu li a {
  14. position: relative;
  15. top: 60px;
  16. padding-left: 10px;
  17. }
  18.  
  19. #header ul.menu li a:hover {
  20. width: 119px;
  21. height: 50px;
  22. background: #24292c;
  23. border-right: 1px solid #2f2f2f;
  24. border-left: 1px solid #2f2f2f;
  25. display: block;
  26. position: relative;
  27. bottom: 60px;
  28.  
  29. }

z góry dzięki za pomoc
lukasz91
  1. #header ul.menu {
  2. float: right;
  3. list-style: none;
  4. }
  5.  
  6. #header ul.menu li {
  7. float:left;
  8. }
  9.  
  10. #header ul.menu li a {
  11. position: relative;
  12. top: 60px;
  13. padding-left: 10px;
  14. width: 119px;
  15. height: 50px;
  16. }
  17.  
  18. #header ul.menu li a:hover {
  19. background: #24292c;
  20. border-right: 1px solid #2f2f2f;
  21. border-left: 1px solid #2f2f2f;
  22.  
  23. }

Pisane bez sprawdzania, ale powinno być ok 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.