CSS Высота высота вопрос

Question

Так что я пытаюсь сделать крутую навигацию, но я, кажется, застрял в необычной проблеме, я не могу увеличить рост моих элементов списка. Я хочу, чтобы они были фиксированными 45px, поэтому, когда вы наведете элемент, он выглядит хорошо. Но кажется, что когда я нахожу элемент, элемент списка составляет всего 20 пикселей, несмотря на то, что я устанавливаю 45 пикселей. Есть идеи?

Вот мой код для стиля списка

.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 является немного странным. Поместите якорь внутри элемента списка.

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

Затем отобразите ваш блок и придайте ему высоту.

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

Answer 2

1) сбросить список:

ul, li {margin:0;padding:0} 

2) использовать display:block и поставить все стили (кроме position:float: и display:) и поставить все стили на A в тег, а не LI.

3) Никогда не используйте !important.