html - 菜单项的CSS block 悬停状态

Question

可能是一个简单的解决方案，但我遇到了问题。我希望网站主导航的悬停状态是一个大块。目前它只在当前链接上显示悬停选择器。我希望它在任何一个站点上都有填充。

设计实例-> http://www.garyrevell.co.uk/student-i/screenshot_01.jpg

这是当前的 WIP 站点。 http://www.garyrevell.co.uk/student-i/index.html

导航 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 {



            }

任何帮助都会很棒。非常感谢

Answer 1

添加这个CSS

header nav { 
    padding:0; 
}

.navi {
    height: 40px;
}

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

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