Navigation sublinks, position and hover

This is what I want (except tabs): http://www.cssplay.co.uk/menus/doors_drop_line.html?current=four&sub=e

Preview: http://twodayslate.com/test.php

As you can see the sublinks are all messed up. Please advise.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">
body {
	height: 100%;
	padding: 0;
	margin: 0;
	background: url(http://twodayslate.com/images/background.gif) #FFF;/*#ededed*/
	background-repeat: repeat-y;
	font-family: Verdana, Arial, 'Trebuchet MS', 'Arial Black', Helvetica, sans-serif;
	font-size: 14px;
}

html {
	height: 100%;
	padding: 0;
	margin: 0;
}

#lcontainer {
	
	margin: 0 auto;
	background-image: url(http://twodayslate.com/images/side.png);
	background-repeat: repeat-y;
	background-position: left;
	width: 70%;
	min-width: 670px;
	padding: 0;
	height: 100%;
	
}

#rcontainer {
	
	background-image: url(http://twodayslate.com/images/rside.png);
	background-repeat: repeat-y;
	background-position: right;
	padding: 0 15px 0 15px;
	margin: 0;
	height: 100%;
}
	
#header {
	margin: 0;
	height: 120px;
	line-height: 120px;
	background: #2249a2 url(http://twodayslate.com/images/design/headerbackground.png);
	background-repeat: no-repeat;
	padding-left: 20px;
	color: #fbfcff;
	font-size: 2em;
	font: Trebuchet MS;
	font-weight: bold;
	overflow: hidden;
}

#logindiv {
	float: right;
	font-size: .3em;
	margin: 0;
	padding: 5px;
	line-height: 30px;
}

#logindiv form {
	margin: 0;
	padding: 0;
}

#logindiv input {
	margin: 0;
	padding: 0;
}

#content {
	padding: 6px;
}

/* ###########
##Navigation##
############*/

#navigationdiv {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #2b59c2;
	width: 100%;
	height: 55px;
	background: #315d9d url(http://twodayslate.com/images/design/navigation.png) /*2249a2*/;
	background-repeat: repeat-x;
	background-position: top;
}

#navigationdiv a {
color: #999999;
text-decoration: none;
}

#navigationdiv a:hover {
	font-weight: bold;
}
/*######
##main##
######*/

.current a{
	font-weight: bold;
}

.current ul.navigationulsub{
	left: auto;
	font-weight: normal;
}

.current {
	font-weight: normal;
}
/*#One#*/
.navigationulmain {
	list-style: none;
	margin:0;
	padding: 0;
}

.navigationulmain li {
	float: left;
	position: static;
	padding-right: 5px;
}

.navigationulmain li ul {
	position:absolute;
	left:-999em;
}

.navigationulmain li:hover ul {
	left: autpo;
}

.navigationulsub {
	list-style: none;
	position: absolute;
	padding-right: 5px;
	left: auto;
}

.navigationulsub li {
	left: auto;
}

</style>

</head>

<body>
<div id="lcontainer">

<div id="rcontainer">
  <div id="header">     
  	<div id="logindiv">

        <form>
          Username:
          <input type="text" alt="Username" name="Username" value="Username"/>
          Password:
          <input type="password" alt="Password" name="Password" value="Password"/>
          <input type="submit" alt="Login" name="Login" value="Login"/>
        </form>
    </div> <!-- end logindiv div -->
	twodayslate
  </div>

  <!-- end header div -->
<div id="navigationdiv">

<ul class="navigationulmain">
	<li class="current">
		<a href="#">Home</a>
			<ul class="navigationulsub"> 
				<li><a href="#">About</a></li>
				<li><a href="#">Portfolio</a></li>

				<li><a href="#">Gallery</a></li>
			</ul>
	</li>
	<li>
		<a href="#">Blog</a>
			<ul class="navigationulsub"> 
				<li><a href="#">Newest</a></li>

				<li><a href="#">Topics</a></li>
			</ul>
	</li>
	<li>
		<a href="#">Forum</a>
			<ul class="navigationulsub"> 
				<li><a href="#">Profile</a></li>

				<li><a href="#">Search</a></li>
				<li><a href="#">Log-in</a></li>
			</ul>
	</li>
</ul>

</div> <!-- end navigation -->

<div id="content">

Navigation will be like <a href="http://www.cssplay.co.uk/menus/doors_drop_line.html?current=four&sub=e">this</a> exept it will not be tabs.  I will need to learn a little bit of PHP to do that, but I am sure I can find most of it on google or ask for it. <br />
Almost done with the code part of the navigation.  Only thing left is the position and the current page part. <br />
Have to make the navigation images and the header. Need to learn PHP (login script, search), set up forums with mods, and make the wordpress theme<br />
Should I have a footer?
<table width="300px" height="50px" border="0" cellpadding="0" cellspacing="0">
<tr border="0">
<td bgcolor="#1753ac">#1753ac</td>
<td bgcolor="#4B47FF">#4B47FF</td>
<td bgcolor="#3226B5">#3226B5</td>

<td bgcolor="#5929EF">#5929EF</td>
</tr>
<tr>
<td bgcolor="#2D1EA3">#2D1EA3</td>
<td bgcolor="#2249A2">#2249A2</td>
<td bgcolor="#473DEF">#473DEF</td>
<td bgcolor="#2138B2">#2138B2</td>
</tr>
</table>
</div>

</div> <!-- End lcontainer -->

</div> <!-- End rcontainer Div -->


</body>
</html>

Code (markup):

Place where I am getting some help: http://www.htmlforums.com/css/t-navigation-wdropline-87959.html

Log in or Sign up

Navigation sublinks, position and hover

twodayslate Well-Known Member

Dan Schulz Peon

Log in or Sign up

Navigation sublinks, position and hover

twodayslate Well-Known Member

Dan Schulz Peon

Useful Searches