Grow your CSS skills. Land your dream job.

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

  • # May 28, 2013 at 5:31 am

    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″) )

    # May 28, 2013 at 5:50 am

    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

    # May 28, 2013 at 11:05 am

    i will check and i will reply
    thank you

    # May 28, 2013 at 11:10 am

    i make it like this :

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

    }

    but it is same ….

    # May 28, 2013 at 11:30 am

    Use the child selector > instead of the descendant selector (space) to target only the next level down and not affect the sub menu items.

    e.g instead of ul li, use ul > li

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".