怎樣讓li的高度跟ul高度一樣高？

第一張圖是我寫的html代碼

第二張圖是設(shè)計(jì)圖

目的是鼠標(biāo)移動(dòng)上去背景色變紅，我是用ul li 布局的，怎么寫？我的背景紅特別小，怎么調(diào)大一點(diǎn)？請(qǐng)各位朋友看看 下面是我的代碼

/*nav*/
.nav {padding:0px; margin:0px; height: 77px; color: white; font-size: 22px; font-family: “華文黑體”; background-color: #676565; border: 0px solid; border-radius: 10px;}
.logo {width: 152px; display: inline-block; line-height: 77px; float: left; text-align: center; font-size: 30px; font-weight: bolder;}
.navigation {line-height: 33px; display:inline-block; width: 800px;}
.navigation ul{list-style-type: none; margin-left: -20px; }
.nav ul li {display: inline; margin-left: 25px; }
.nav a {color: white; text-decoration: none;}
.nav a:visited {text-decoration: none;}
.nav a:hover {background-color: #8c2828; color: white;}
.login {width: 150px; display: inline-block; line-height: 77px; float: right; font-size: 22px; text-align: center;}

<!-- nav -->
    <div class="nav">
        <div class="logo">Jinshi</div>
        <div class="navigation">
            <ul>
                <li><a href="">首頁(yè)</a></li>
                <li><a href="">結(jié)構(gòu)化配資</a></li>
                <li><a href="">產(chǎn)品優(yōu)勢(shì)</a></li>
                <li><a href="">操作流程</a></li>
                <li><a href="">關(guān)于我們</a></li>
            </ul>
        </div>
        <div class="login"><a href="">登錄</a></div>
    </div>
    <!-- nav end -->