html - CSS 列表高度问题

Question

所以我正在尝试制作一个很酷的导航，但我似乎遇到了一个不寻常的问题，我似乎无法增加列表项的高度。我希望它们固定为 45px，因此当您将鼠标悬停在该元素上时它看起来不错。但似乎当我将元素悬停时，尽管我设置了 45px，但列表项的高度仅为 20px。有什么想法吗？

这是我的列表样式代码

.nav li{
height:45px!important;
min-height:45px!important;
display:inline;
list-style: none;
padding-right:40px;
padding-left:40px;
color:#dddddd;
text-shadow: 0 1px 1px rgba(0,0,0,.60);
margin-left:-4px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

JSFiddle - http://jsfiddle.net/E9Ejd/

Answer 1

首先你的html有点奇怪。将 anchor 放在列表项中。

<ul><li><a href="#">Link 1</a></li></ul>

然后将你的显示为一个 block 并给它一个高度。

ul li a{display:block; height:45px;}