CSS Liste hauteur numéro

Question

Donc, je suis en train de faire une navigation cool, mais je semble être coincé avec un problème inhabituel, je ne peux pas sembler augmenter la hauteur de ma liste d'articles. Je veux qu'ils soient un 45px fixe donc quand vous planez l'élément, il semble bon. Mais il semble que lorsque je planerai l'élément, l'élément de la liste ne fait que 20px de hauteur malgré que je mette 45px. Des idées?

Voici mon code pour le style de liste

.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

tout d'abord votre code html est un peu étrange. Mettez l'ancre à l'intérieur de l'élément de liste.

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

afficher ensuite votre comme un bloc et lui donner une hauteur.

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

Answer 2

1) réinitialiser votre liste:

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

2) utiliser display:block et mettre tout style (autre que position:float: et display:) et mettre tout sur le style A -tag, pas le LI.

3) Ne jamais utiliser !important.