Forum Moderators: not2easy
<html>
<head>
<title>Learn CSS Menus</title>
<style>
body
{
margin: 0px;
padding: 0px;
background: 85B4F7;
}
*{
margin: 0 auto 0 auto;
text-align: left;
}
#container
{
width: 100%;
}
#header
{
width: 100%;
background: blue;
color: white;
height: 5%;
padding: 10px 0px 10px 10px;
font-weight: bold;
}
#subMenu
{
height: 45px;
background-color: black;
}
#subMenu ul li
{
list-style: none;
float: left;
display: block;
width: 140px;
padding-top: 10px;
height: 45px;
}
#subMenu a
{
text-decoration: none;
display: block;
color: white;
text-align: center;
}
#subMenu li a:hover
{
background-color: green;
display: block;
height: 40px;
}
</style>
</head>
<body bgcolor="85B4F7">
<div id="container">
<div id="header">
<p><h2>Header</h2></p>
</div>
<div id="subMenu">
<ul>
<li><a href="#">First Link</a></li>
<li><a href="#">Second Link</a></li>
<li><a href="#">Third Link</a></li>
</ul>
</div><!--end of subMenu-->
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Learn CSS Menus</title>
<style>
html { margin:0; padding:0; }
body {
margin: 0px;
padding: 0px;
background: #85B4F7;
font-size:100%;
}
h2 { margin:0; }
#container {
}
#header {
margin:0;
width: 100%;
background: blue;
color: white;
height: 5%;
padding: 10px 0px 10px 10px;
font-weight: bold;
}
#subMenu {
height:45px;
background-color: black;
font-size:16px;
}
#subMenu ul {
margin:0;
line-height: 100%;
width:100%;
}
#subMenu ul li {
list-style: none;
float: left;
margin:0;
position:relative;
width: 140px;
height: 45px;
line-height:inherit;
}
#subMenu a {
display:inline-block;
padding:14px 0 4px 0;
width:100%;
height:27px; /* 45 - 14 - 4 = 27px */
text-align: center;
text-decoration: none;
color: white;
}
#subMenu li a:hover {
background-color: green;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h2>Header</h2>
</div>
<div id="subMenu">
<ul>
<li><a href="#">First Link</a></li>
<li><a href="#">Second Link</a></li>
<li><a href="#">Third Link</a></li>
</ul>
</div><!--end of subMenu-->
</div><!-- end of container -->
</body>
</html>
