CSS Block hover state for menu item

Question

Probably an easy solution but I'm having problems. My hover state for the main nav of the site I wish to be in a big block. At current it only displays a hover selector over the current link. I'd like it to have padding on either site.

Design example -> http://www.garyrevell.co.uk/student-i/screenshot_01.jpg

This is the current WIP site. http://www.garyrevell.co.uk/student-i/index.html

The NAV css

    header nav {
    cursor:pointer;
    font-family: GeoSlb712XBdBT;
    text-transform:uppercase;
    float: left;
    color:#fff;
     /* WebKit (Safari/Chrome) Only */
     -webkit-text-stroke: 0.5px #F47B20;

     /* If we weren't using text-shadow, we'd set a         fallback color
     and use this to set color instead
    -webkit-text-fill-color: white; */

  color: white;

    text-shadow:1px 1px 0 #F47B20,
    /* Simulated effect for Firefox and Opera
       and nice enhancement for WebKit */
   -1px -1px 0 #F47B20,  
    1px -1px 0 #F47B20,
   -1px  1px 0 #F47B20,
    1px  1px 0 #F47B20;

    font-size:17px;
    text-align: right;
    padding-top: 5px;
    padding-bottom:5px;
    padding-left:2px;
    padding-right:2px;
    /*background-color: #ffffff;*/
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.20)), to(rgba(255, 255, 255, 0.20)));
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.20));
    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.20));
    background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.20));
    background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.20));
    background-image: linear-gradient(top, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.20));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#ffffff', EndColorStr='#ffffff');
    margin-top:15px;
    margin-left:20px;
    -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;
    color:#FFFFFF;

    }
        header nav ul {
            list-style: none;
        }
            header nav li {
    float: left;
    margin: 0px 30px 0 30px;
            }

.navi {
    width: 500px;
    height:35px;
    padding: 0px;
    margin: 0px 0;
    overflow: hidden;
}
        .navi li {
                float: left;
                margin-right: 5px;
                list-style: none;
                color: #ffffff;
                outline: none;
                text-align: center;
                text-transform: uppercase;
                letter-spacing: 0;
                display: block; 
        }
            .navi li a {
                display:block;
                list-style: none;
                color: #ffffff;
                outline: none;
                text-align: center;
                text-transform: uppercase;
                letter-spacing: 0;
                display: block; 
                padding:3px;




            }

  .navi li:hover {


                background-color: #F47B20;
                color: #ffffff;



            }
            .navi li.current-menu-item {



            }

Any help would be great. Many thanks

@Chandrakant it seems that your css file `style.css` is getting included two times.. just checkt it if it is so — Uttara, Aug 21 '12 at 13:48

score 0 · Accepted Answer · answered Aug 21 '12 at 13:45

0

add this css

header nav { 
    padding:0; 
}

.navi {
    height: 40px;
}

.navi li{
    border-radius:5px;
    margin:0;
    padding:0 20px;
}

.navi li a{
    line-height:40px;
}

answered Aug 21 '12 at 13:45

Uttara

2,496
3
24
35

score 0 · Answer 2 · answered Aug 21 '12 at 13:46

0

.navi li {
     line-height: 30px;
     border-radius: 7px;
     margin-left: 20px
}

.navi li a{
     padding: 0 15px;
}

.navi li:hover {
    background-color: #F47B20;

}

Add These properties to your existing code, (dont replace add only)

answered Aug 21 '12 at 13:46

Chandrakant

1,971
1
14
33

CSS Block hover state for menu item

2 Answers2