Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [CSS] jak zrobić takie menu
dwwa
post 7.10.2011, 17:44:03
Post #1





Grupa: Zarejestrowani
Postów: 47
Pomógł: 1
Dołączył: 14.09.2011

Ostrzeżenie: (0%)
-----


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

Ten post edytował dwwa 7.10.2011, 17:46:04
Go to the top of the page
+Quote Post
lukasz91
post 7.10.2011, 20:58:31
Post #2





Grupa: Zarejestrowani
Postów: 149
Pomógł: 7
Dołączył: 6.01.2010
Skąd: Opole Lubelskie

Ostrzeżenie: (0%)
-----


  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

Ten post edytował lukasz91 7.10.2011, 20:59:23


--------------------
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 29.06.2025 - 00:31