Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Problem z menu w CSS
Forum PHP.pl > Forum > Po stronie przeglądarki
tomazzi
16.04.2013, 12:18:56
Mam niewielki kosmetyczny problem z menu, pewnie to kwetia dopisania jednej opcji w CSS. Wprawne oko pewnie od razu wychwyci błąd, a ja tu jestem początkującym.
Kod HTML:
[HTML] pobierz, plaintext 
  1. <div class="menu">
  2.                     <ul class="navigation">
  3.     <li>
  4.         <a href="/">Strona główna</a>
  5.     </li>
  6.     <li>
  7.         <a href="/informacje/html">Informacje</a>
  8.         <ul>
  9.             <li>
  10.                 <a href="/informacje/o/projekcie/html">O Projekcie</a>
  11.             </li>
  12.             <li>
  13.                 <a href="/inne/html">Inne</a>
  14.             </li>
  15.             <li>
  16.                 <a href="dane/html">dane</a>
  17.             </li>
  18.         </ul>
  19.     </li>
  20. </ul>                </div>
[HTML] pobierz, plaintext


CSS:
CODE

.menu{
margin-left: 20px;
}

.menu ul , .menu ul li{
display: inline;
}

.navigation a {
text-decoration: none;
color: white;
display: block;
}

.navigation li {
position: relative;
border: 1px solid #8D8D8A;
border-bottom: none;
background-color: #B0B0AD;
width: auto;
height: 20px;
margin-left: 4px;
float: left;
padding-top: 4px;
padding-left: 4px;
padding-right: 4px;
padding-bottom: 0;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.navigation li:hover ul li {
clear: both;
margin-left: 0;
margin-right: 0;
display: block;

}

.navigation li:hover {
background-color: #525251;
border: 1px solid #151515;
}
.navigation li ul {
display: none;

}
.navigation li ul li {
clear: both;
background-color: #151515;
border: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
width: 100px;
padding-left: 15px;

}
.navigation li:hover ul {
display: block;
position: absolute;
padding: 0;
top: 25px;
float: none;
margin: 0 0 0 -5px;

box-shadow: 5px 5px 10px black;

}


Problem jest w tym, że po najechaniu na pozycje w podmenu po prawej stronie pojawia się pasek, nie wiem jak go weliminować.
Arcioch
16.04.2013, 12:37:47
Spróbuj tak smile.gif

[HTML] pobierz, plaintext 
  1.  
  2. .menu{
  3. margin-left: 20px;
  4. }
  5.  
  6. .menu ul , .menu ul li{
  7. display: inline;
  8. }
  9.  
  10. .navigation a {
  11. text-decoration: none;
  12. color: white;
  13. display: block;
  14. }
  15.  
  16. .navigation li {
  17. position: relative;
  18. border: 1px solid #8D8D8A;
  19. border-bottom: none;
  20. background-color: #B0B0AD;
  21. width: auto;
  22. height: 20px;
  23. margin-left: 4px;
  24. float: left;
  25. padding-top: 4px;
  26. padding-left: 4px;
  27. padding-right: 4px;
  28. padding-bottom: 0;
  29. border-top-left-radius: 4px;
  30. border-top-right-radius: 4px;
  31. }
  32. .navigation li:hover ul li {
  33. clear: both;
  34. margin: 0;
  35. display: block;
  36.  
  37. }
  38.  
  39. .navigation > li:hover {
  40. background-color: #525251;
  41. border: 1px solid #151515;
  42. }
  43.  
  44. .navigation li ul li:hover {
  45. background-color: #525251;
  46. }
  47.  
  48. .navigation li ul {
  49. display: none;
  50.  
  51. }
  52. .navigation li ul li {
  53. clear: both;
  54. background-color: #151515;
  55. border: none;
  56. border-top-left-radius: 0;
  57. border-top-right-radius: 0;
  58. width: 100px;
  59. padding-left: 15px;
  60.  
  61. }
  62. .navigation li:hover ul {
  63. display: block;
  64. position: absolute;
  65. padding: 0;
  66. top: 25px;
  67. float: none;
  68. margin: 0 0 0 -5px;
  69.  
  70. box-shadow: 5px 5px 10px black;
  71.  
  72. }
[HTML] pobierz, plaintext
tomazzi
16.04.2013, 12:51:42
No prawie dobrze tylko teraz tego bordera nie widać. Chciałbym, żeby zaznaczona pozycja z listy rozwijanej nie zajmowała całej powierzchni, tylko była dookoła otoczona czarną ramką.
Arcioch
16.04.2013, 13:26:09
Sprawdź tak smile.gif Jak coś to po poprawiaj padding bo przy dodawaniu ramki do szerokości dojdą Ci się dwa pixele stąd brał się ten biały pasek smile.gif

[HTML] pobierz, plaintext 
  1.  
  2. .menu{
  3. margin-left: 20px;
  4. }
  5.  
  6. .menu ul , .menu ul li{
  7. display: inline;
  8. }
  9.  
  10. .navigation a {
  11. text-decoration: none;
  12. color: white;
  13. display: block;
  14. }
  15.  
  16. .navigation li {
  17. position: relative;
  18. border: 1px solid #8D8D8A;
  19. border-bottom: none;
  20. background-color: #B0B0AD;
  21. width: auto;
  22. height: 20px;
  23. margin-left: 4px;
  24. float: left;
  25. padding-top: 4px;
  26. padding-left: 4px;
  27. padding-right: 4px;
  28. padding-bottom: 0;
  29. border-top-left-radius: 4px;
  30. border-top-right-radius: 4px;
  31. }
  32. .navigation li:hover ul li {
  33. clear: both;
  34. margin-left: 0;
  35. margin-right: 0;
  36. display: block;
  37.  
  38. }
  39.  
  40. .navigation li:hover {
  41. background-color: #525251;
  42. border: 1px solid #151515;
  43. }
  44.  
  45. .navigation li ul {
  46. display: none;
  47. }
  48.  
  49. .navigation li ul li:hover {
  50. background-color: #525251;
  51. border: 1px solid #151515;
  52. padding-left: 13px;
  53. padding-top: 3px;
  54. }
  55.  
  56. .navigation li ul li {
  57. clear: both;
  58. background-color: #151515;
  59. border: none;
  60. border-top-left-radius: 0;
  61. border-top-right-radius: 0;
  62. width: 100px;
  63. padding-left: 15px;
  64.  
  65. }
  66. .navigation li:hover ul {
  67. display: block;
  68. position: absolute;
  69. padding: 0;
  70. top: 25px;
  71. float: none;
  72. margin: 0 0 0 -5px;
  73.  
  74. box-shadow: 5px 5px 10px black;
  75.  
  76. }
[HTML] pobierz, plaintext
tomazzi
16.04.2013, 15:27:57
Ok. Jest fajnie dzięki smile.gif Jeszcze mam jedno pytanko. Teraz jak się najeżdza na link, jest wrażenie jakby tekst się poruszał. Czego to może być zasługa?
Arcioch
16.04.2013, 17:36:28
Właśnie tych paddingów smile.gif Ustaw z każdej strony jakiś margin albo padding i jak dodajesz boder 1px to z każdej tronie przy hoverze musisz zmniejszyć o 1px 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.