I'm trying to create the navigation bar, but I need it so when someone clicks on a tab, the hover background remain fixed and a list of links will appear on the bottom.
Also I think my navbar is too narrow, but when I increase the width, the last tab doesn't come inline with the border.
Here is the css
@charset "utf-8";
/* CSS Document */
body {
width:750px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
div#navbar {
border-top:1px solid;
border-left:1px solid;
border-right:1px solid;
height:2.5em;
margin-left:0px;
border-bottom:none;
}
div#navbar ul {
list-style: none;
padding: 0;
margin: 0;
}
div#navbar li {
float: left;
margin:0;
height: 2.5em;
line-height: 2.5em;
font-family:Georgia, "Times New Roman", Times, serif;
font-weight:bold;
font-size:15px;
border-right: 1px dashed;
}
div#navbar a:link{
background:#006666;
color:#FFFFFF;
}
div#navbar a:hover{
background:#006666;
color:#FFFFFF;
}
div#navbar a:active{
background:#006666;
color:#FFFFFF;
}
#navbar li a
{
outline-style:none;
outline-width:0;
float: left;
height:3.8em;
width: 9.92em;
display: block;
text-decoration: none;
text-align: center;
color:#666666;
}
div#navbar li a#first2{
}
div#navbar li#last{
border-right:none;
}
div#navbar li#first{
}
div#navbar li a:hover{
text-decoration:none;
color:#FFFFFF;
}
div#subheading {
height:20px;
width:750px;
background:#006666;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
}
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" rel="stylesheet" href="css/index.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Main Page</title>
</head>
<body>
<div id="logo"></div>
<div id="navbar">
<ul>
<li id="first">
<a href="#" id="first2">u.s. macro</a> </li>
<li>
<a href="#">credit & banking</a> </li>
<li>
<a href="#">real estate</a> </li>
<li>
<a href="#">global macro</a> </li>
<li id="last">
<a href="#" id="last2" >getting started</a> </li>
</ul>
</div>
<div id="subheading"></div>
<div id="dataFrame"></div>
</body>
</html>
you can see the output here:
www.economiq.org/index2.htm
