I'm having trouble with my code. I want to center the text vertically in the middle of each box.
#navcontainer {
padding: 0 5 20px 10px;
}
ul#navlist {
font-family: sans-serif;
}
ul#navlist a {
font-weight: bold;
text-decoration: none;
display: inline-block;
line-height:20px vertical-align: middle;
}
ul#navlist, ul#navlist ul, ul#navlist li {
margin: 0 8px;
padding: 0px;
list-style-type: none;
box-shadow: 8px 8px 12px #aaa;
}
ul#navlist li {
float: left;
}
ul#navlist li a {
color: #ffffff;
background-color: #EF634A;
//padding:10px;
padding: 10px 5px 10px 5px;
border: 1px #ffffff outset;
height: 40px;
}
ul#navlist li a:hover {
color: #ffff00;
background-color: #003366;
}
ul#navlist li a:active {
color: #cccccc;
background-color: #003366;
border: 1px #ffffff inset;
position:relative;
top:50%;
transform:translateY(-50%);
}
ul#subnavlist {
display: none;
}
ul#subnavlist li {
float: none;
}
ul#subnavlist li a {
padding: 0px;
margin: 0px;
height: 20px;
}
ul#navlist li:hover ul#subnavlist {
display: block;
//display: inline-block;
//display: table-cell;
position: absolute;
font-size: 8pt;
padding-top: 5px;
}
ul#navlist li:hover ul#subnavlist li a {
display: block;
width : 260;
height : 100;
border: none;
padding: 2px;
}
ul#navlist li:hover ul#subnavlist li a:before {
content:" >> ";
}
and
<div id="navcontainer">
<ul id="navlist">
<li><a href="obs-geostrategique-sport.php?cat=1">EUROPEAN PROGRAM TO COMBAT MATCH FIXING</a>
</li>
<li><a href="obs-geostrategique-sport.php?cat=2">SPORTS NEWS</a>
</li>
<li><a href="obs-geostrategique-sport.php?cat=3">PRESS RELEASES</a>
</li>
<li id="active"><a href="obs-geostrategique-sport.php?cat=4" id="current">THEMES</a>
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">Fight against corruption</a>
</li>
<li><a href="obs-geostrategique-sport.php?cat=4&id=1">Sporting events </a>
</li>
<li><a href="obs-geostrategique-sport.php?cat=4&id=2">Good governance in sports</a>
</li>
<li><a href="obs-geostrategique-sport.php?cat=4&id=3">Sports economy</a>
</li>
<li><a href="obs-geostrategique-sport.php?cat=4&id=4">Fight against doping</a>
</li>
<li><a href="obs-geostrategique-sport.php?cat=4&id=5">Integrity in sports</a>
</li>
</ul>
</li>
</ul>
</div>
Check out the fiddle http://jsfiddle.net/R8S7q/