problem with navbar ( border-top applied to list items )

[dagash]

i hae problem with my navbar menu ..

i want my navbar to be like this navbar ( [link](http://themes.tielabs.com/?theme=remal “link”) )

what is happening now when i hover on the parent list items ( li ) the background of the hovered (list item ) changed and border-top applied also and this is OK.. but when i moved to the child list item the border-top also applied and this what i don’t want.

this is my html :

• الرئيسية
• الدروس

  • دروس فوتوشوب

    • دروس الخط الحر
    • دروس التلاعب بالصور

  • دروس كورل درو
  • دروس أفترإيفيكت

• المقالات

  • مقالات شهر يناير
  • مقالات شهر فبراير

• من نحن

and this is my css :

nav{
height : 25px;
margin : 4px auto;
width : 100%;
clear : both;

}

ul#navmenu, ul.sub1 , ul.sub2{
list-style : none;
padding: 0px;

}

ul#navmenu {
/*margin : 0px auto;*/
display : inline-block;
text-align : center ;
position : absolute;
left : 50%;
margin-left: -250px;
border-top : 1px solid #eeeee1;

}

ul#navmenu li {
width : 125px ; /* to be flexible try to remove it and see what all happen */
position : relative ;
text-align : center;
float : right;
display: inline-block;
}

ul#navmenu li a{
text-decoration : none;
display: block;
height : 25px;
line-height: 25px;
/*background : #43aad8 ; /*#004280 ; #f3f3f3;*/
color : #3d435a;
text-shadow : 1px 1px 0 #F2F2F1, 1px 2px 0 #B1B1B1;
font-weight : bold;
/*opacity : 0.8;*/
}

ul#navmenu .sub1 li {

}

ul#navmenu .sub1 a {
margin : 0px;
font-weight : bold;
background : #fffff1;
}

ul#navmenu .sub2 a {
margin-right : 0px;
font-weight : bold;
background : #fffff1;

}

ul#navmenu li:hover > a{
font-weight : bold;
color : #3daeb7 ;
text-shadow : 1px 1px 0 #F2F2F1, 1px 2px 0 #B1B1B1;
webkit-transition : background 0.5s;
moz-transition : background 0.5s;
o-transition : background 0.5s;
transition : background 0.5s;
background : #f5f5f5;

}

ul#navmenu li:hover a:hover{
padding-right : 5px;
font-weight : bold;
/*border-top : 1px solid #5fc1c9;*/
margin-right : -1px;
margin-top : -1px;
color : #3daeb7 ;
text-shadow : 1px 1px 0 #F2F2F1, 1px 2px 0 #B1B1B1;
border-top : 1px solid #5fc1c9;
}

ul#navmenu li:hover li:hover{

}

ul#navmenu ul.sub1 {
display: none;
position : absolute;
top : 25px; /* to shift the first child ( sub1 ) from the parent 30px , imagine the parent and the child in the same location above each other due to ( absolute positioning ), if change the width of ( ul#navmenu li a ) we have to change this ( top = 30px ) to be equal or more than ( ul#navmenu li a ) */
right : 0px;

}

ul#navmenu ul.sub2 {
display: none;
position : absolute;
top : 0px; /* to shift the first child ( sub1 ) from the parent 30px , imagine the parent and the child in the same location above each other due to ( absolute positioning ), if change the width of ( ul#navmenu li a ) we have to change this ( top = 30px ) to be equal or more than ( ul#navmenu li a ) */
right : 125px;
width: auto;
white-space : nowrap;

}

ul#navmenu li:hover .sub1 {
display: block;

}

ul#navmenu .sub1 li:hover .sub2 {
display: block;

}
check the attached photos ( [photo-1](http://s18.postimg.org/j0026im49/1212.jpg “link1”)) ( [photo-2](http://s18.postimg.org/91f3k1cop/1313.jpg “link2”) )

[pixelgrid]

your selector where you apply your border is this

ul#navmenu li:hover a:hover

so the border will be applied to all hovered anchors that are inside an li that is inside an ul with an id of navmenu

the selector is allways the far right part,the last part.
if you want it like your example put the porder just to #navmenu

[dagash]

i will check and i will reply
thank you

[dagash]

i make it like this :

ul#navmenu li:hover{
border-top : 1px solid #5fc1c9;

}

but it is same ….

[Author]

Posts