Problem z menu w CSS Opcje

[tomazzi]

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 
<div class="menu">
                    <ul class="navigation">
    <li>
        <a href="/">Strona główna</a>
    </li>
    <li>
        <a href="/informacje/html">Informacje</a>
        <ul>
            <li>
                <a href="/informacje/o/projekcie/html">O Projekcie</a>
            </li>
            <li>
                <a href="/inne/html">Inne</a>
            </li>
            <li>
                <a href="dane/html">dane</a>
            </li>
        </ul>
    </li>
</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]

Spróbuj tak

[HTML] pobierz, plaintext 
 
.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: 0;
display: block;
 
}
 
.navigation > li:hover {
background-color: #525251;
border: 1px solid #151515;
}
 
.navigation li ul li:hover {
background-color: #525251;
}
 
.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;
 
}
[HTML] pobierz, plaintext 

[tomazzi]

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]

Sprawdź tak 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

[HTML] pobierz, plaintext 
 
.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:hover {
background-color: #525251;
border: 1px solid #151515;
padding-left: 13px;
padding-top: 3px;
}
 
.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;
 
}
[HTML] pobierz, plaintext 

[tomazzi]

Ok. Jest fajnie dzięki 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]

Właśnie tych paddingów 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