0

おそらく簡単な解決策ですが、私は問題を抱えています。サイトのメインナビゲーションのホバー状態は、大きなブロックになりたいと思っています。現在、現在のリンク上にホバーセレクターのみが表示されます。どちらのサイトにもパディングを入れてほしい。

設計例-> http://www.garyrevell.co.uk/student-i/screenshot_01.jpg

これは現在のWIPサイトです。http://www.garyrevell.co.uk/student-i/index.html

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 {



            }

どんな助けでも素晴らしいでしょう。どうもありがとう

4

2 に答える 2

0

このcssを追加します

header nav { 
    padding:0; 
}

.navi {
    height: 40px;
}

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

.navi li a{
    line-height:40px;
}
于 2012-08-21T13:45:31.633 に答える
0 
.navi li {
     line-height: 30px;
     border-radius: 7px;
     margin-left: 20px
}

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

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

}

これらのプロパティを既存のコードに追加します（追加のみを置き換えないでください）

于 2012-08-21T13:46:47.410 に答える