here is the css/html. notice that the dropdowns are aligned with the text and not with the ul. in other words, they appear indented. can i change this? how?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive">
<title>Clarion Web Design, LLC</title>
<style type="text/css">
body
{
background: #fff;
color: #000;
margin-left: 0px;
padding: 0;
}
#center
{
width: 790px;
margin: 0 auto;
}
/*Primary header tag (sets properties for title area)***********************************************************/
H1
{
margin: 0px;
float: none;
width: 780px;
color: #f90;
font-size: 37px;
font-family: Arial;
border-bottom-width: 2px;
border-bottom-color: #000;
border-bottom-style: solid;
padding-left: 10px;
padding-bottom: 3px;
}
a.topnav
{
color: #fff;
text-decoration: none;
}
/* Contains nav ul but stretches further to make nav bar look continuos ************************************/
div.nav
{
background-color: #999;
height: 20px;
border-top: 1px solid #fff;
}
/*This element encompasses all others except H1 and the nav bar***********************************************/
div.main
{
margin: 0px;
font-family: Courier;
width: 790px;
height: 500px;
padding-top: 1px;
}
/* Set positioning of first level of menu ******************************************************************/
ul
{
color: #fff;
padding: 0;
margin: 0;
list-style: none;
background-color: #999;
}
/* Set position of second level of menu *******************************************************************/
li{
float: left;
position: relative;
width: 115px;
height: 15px;
background-color: #999;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
padding-top: 5px;
padding-left: 10px;
}
/* Set rollover colors ***********************************************************************************/
li:hover
{
background-color: #f90;
}
li ul
{
display: none;
position: absolute;
top: 1em;
left: 0;
}
li > ul
{
top: auto;
left: auto;
z-index: 1;
}
li:hover ul, li.over ul
{
display: block;
}
</style>
</head>
<body id="center">
<div class="header">
<h1>title</h1>
</div>
<div id="center" class="nav">
<ul id="nav">
<li><a class="topnav" href=http://www.webdeveloper.com/forum/archive/index.php/"index.html">Home</a></li>
<li>Portfolio
<ul>
<li><a class="topnav" href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.afih.net">afih.net</a></li>
<li><a class="topnav" href=http://www.webdeveloper.com/forum/archive/index.php/"">champpestcontrol.com</a></li>
</ul>
</li>
<li>Experiments
<ul>
<li><a class="topnav" href=http://www.webdeveloper.com/forum/archive/index.php/"">Web Stuff</a></li>
<li><a class="topnav" href=http://www.webdeveloper.com/forum/archive/index.php/"">Graphics</a></li>
</ul>
</li>
<li><a class="topnav" href=http://www.webdeveloper.com/forum/archive/index.php/"">References</a></li>
<li><a class="topnav" href=http://www.webdeveloper.com/forum/archive/index.php/"">Contact Info</a></li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive">
<title>Clarion Web Design, LLC</title>
<style type="text/css">
body
{
background: #fff;
color: #000;
margin-left: 0px;
padding: 0;
}
#center
{
width: 790px;
margin: 0 auto;
}
/*Primary header tag (sets properties for title area)***********************************************************/
H1
{
margin: 0px;
float: none;
width: 780px;
color: #f90;
font-size: 37px;
font-family: Arial;
border-bottom-width: 2px;
border-bottom-color: #000;
border-bottom-style: solid;
padding-left: 10px;
padding-bottom: 3px;
}
a.topnav
{
color: #fff;
text-decoration: none;
}
/* Contains nav ul but stretches further to make nav bar look continuos ************************************/
div.nav
{
background-color: #999;
height: 20px;
border-top: 1px solid #fff;
}
/*This element encompasses all others except H1 and the nav bar***********************************************/
div.main
{
margin: 0px;
font-family: Courier;
width: 790px;
height: 500px;
padding-top: 1px;
}
/* Set positioning of first level of menu ******************************************************************/
ul
{
color: #fff;
padding: 0;
margin: 0;
list-style: none;
background-color: #999;
}
/* Set position of second level of menu *******************************************************************/
li{
float: left;
position: relative;
width: 115px;
height: 15px;
background-color: #999;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
padding-top: 5px;
padding-left: 10px;
}
/* Set rollover colors ***********************************************************************************/
li:hover
{
background-color: #f90;
}
li ul
{
display: none;
position: absolute;
top: 1em;
left: 0;
}
li > ul
{
top: auto;
left: auto;
z-index: 1;
}
li:hover ul, li.over ul
{
display: block;
}
</style>
</head>
<body id="center">
<div class="header">
<h1>title</h1>
</div>
<div id="center" class="nav">
<ul id="nav">
<li><a class="topnav" href=http://www.webdeveloper.com/forum/archive/index.php/"index.html">Home</a></li>
<li>Portfolio
<ul>
<li><a class="topnav" href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.afih.net">afih.net</a></li>
<li><a class="topnav" href=http://www.webdeveloper.com/forum/archive/index.php/"">champpestcontrol.com</a></li>
</ul>
</li>
<li>Experiments
<ul>
<li><a class="topnav" href=http://www.webdeveloper.com/forum/archive/index.php/"">Web Stuff</a></li>
<li><a class="topnav" href=http://www.webdeveloper.com/forum/archive/index.php/"">Graphics</a></li>
</ul>
</li>
<li><a class="topnav" href=http://www.webdeveloper.com/forum/archive/index.php/"">References</a></li>
<li><a class="topnav" href=http://www.webdeveloper.com/forum/archive/index.php/"">Contact Info</a></li>
</ul>
</div>
</body>
</html>