I'm trying to create a Google-style bar across the top of my page, but when I hover over the elements, the link text jumps to the top.
Can anyone tell me how to keep it on the bottom? My current code is below.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
* {margin:0;padding:0}
html, body {
margin: 0;
padding: 0;
}
#navcontainer{
position:relative;/* stacking context for absolutely position ul*/
height:40px;
background-color: #006295;
width:100%;
font-family: arial, helvetica, sans-serif;
}
#navcontainer ul{
list-style:none;
position:absolute;
bottom:0;
left:0;
}
#navcontainer li{
display:inline;
padding:15px;
}
#navcontainer ul li a {
padding: 0.2em .5em;
background-color: #006295;
color: White;
text-decoration: none;
font-size:80%;
float: left;
}
#navcontainer ul li a:hover {
height:40px;
vertical-align:bottom;
background-color: #6D98AB;
color: #fff;
}
</style>
</head>
<body>
<div id="navcontainer">
<ul>
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
<li><a href="#">four</a></li>
<li><a href="#">five</a></li>
<li><a href="#">six</a></li>
</ul>
</div>
</body>
</html>