Dropdown border

[benbas39]

Hallo,

Ich habe eine Website gebastelt mit einem Dropdown zuoberst. Also BSP:

TEST
drop1
drop2
drop3
drop4

Mein Problem: Ich will unter den Elementen border's setzen damit es besser ausshieht. Jetzt habe ich in css border-bottom: 1px solid gray;
und last child border none.
Jetzt ist es aber so, dass es nur unter drop1 einen border macht. Wo liegt das Problem ?

#navMenu {
margin: 0;
width: 1055px;
padding: 0;
margin-top: 15px;
border: 1px #e4e4e4 solid !important;
border-radius: 4px !important;
box-shadow: 0 0 6px #ccc !important;
height: 42px;
background-color: white;
}
#navMenu ul {
margin: 0;
padding: 0;
line-height: 40px;
border-radius: 4px !important;
box-shadow: 0 0 6px #ccc !important;
}
#navMenu li {
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
background-color: white;
height: 35px;
border-bottom: 1px solid gray;
}
#navMenu li:last-child {
border: none;
}
#navMenu li.a a {
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
background-color: #CDCDCD;
width: 50px;
text-align: center !important;
}
#navMenu li.b a {
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
width: 70px;
text-align: center !important;
}
#navMenu li.c a {
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
width: 110px;
text-align: center !important;
}
#navMenu li.d a {
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
width: 115px;
text-align: center !important;
}
#navMenu li.e a {
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
width: 120px;
text-align: center !important;
}
#navMenu li.f a {
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
width: 100px;
text-align: center !important;
}
#navMenu li.g a {
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
width: 130px;
text-align: center !important;
}
#navMenu li.h a {
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
width: 80px;
text-align: center !important;
}
#navMenu li a:hover {
background-color: #E3E3E3;
}
#navMenu ul li a {
text-align: center;
font-family: Comic;
text-decoration: none;
width: 100px;
display: block;
color: #981630;
font-weight: bold;
}
#navMenu ul ul {
position: absolute;
visibility: hidden;
top: 40px;
z-index: 10;
}
#navMenu ul li:hover ul {
visibility: visible;
}

Ich bitte um Hilfe!

LG benbas39

 

[Tronjer]

Ich bitte um Hilfe!

Dann stelle die Seite online und poste einen Link dazu.

 

[djheke]

Nimm einfach bei #navMenu li {] das height:35px raus oder ändere die Höhe von 35px nach 41px. Denn du hast ja line-height:40px definiert.:(