HTML/CSS Navigation to Wayfinder (or best alternative)

		<div id="navigation">
			<div id="nav_container">
				<ul id="nav"> 
					<li id="nav_about"><a href="/coming_soon">About</a> 
					</li> <!-- close nav_about -->
				  
					<li id="nav_writing"><a href="/coming_soon">Writing</a> 
						<ul> 
							<li class="themes"><a href="/coming_soon">Books</a></li> 
							<li class="wallpapers"><a href="/coming_soon">Lessons</a></li> 
							<li class="tutorials"><a href="/forums/">Forums</a></li> 
						</ul> 
				  
					</li> <!-- close nav_writing -->
			  
					<li id="nav_blog"><a href="/blog/">Blog</a>
					</li> <!-- close nav_blog -->
			  
					<li id="nav_portfolio"><a href="/coming_soon">Portfolio</a> 
						<ul> 
							<li class="web"><a href="/coming_soon">Web</a></li> 
							<li class="illustration"><a href="/coming_soon">Illustration</a></li> 
						</ul> 
				  
					</li> <!-- close nav_portfolio -->
			  
					<li id="nav_store"><a href="/coming_soon">Store</a> 
						<ul> 
							<li class="cart"><a href="/coming_soon">cart</a></li> 
						</ul> 
				  
					</li> <!-- close nav_store -->
			   
        			<li id="nav_user"><a href="/coming_soon">User</a> 
						<ul> 
							<li class="account"><a href="/coming_soon">Account</a></li> 
							<li class="logout"><a href="/coming_soon">Logout</a></li> 
						</ul>
				   
					</li> <!-- close nav_user -->
				
				</ul> <!-- close "nav" -->
			</div> <!-- close div "nav_container" -->		
		
		</div><!-- close div "navigation" -->
		<!-- finish the navigation here -->

#navigation{
	background-color: #492a01;
	background-image: url(assets/components/KatSkinnerTheme/images/footer_bg.jpg);}
	
#nav_container{
	margin: 0 auto;
	width: 50em;
	height: 150px;
	}
	
#nav {
	top: 15px;
	margin: 0;
	padding: 0;
	list-style: none;
	float:;
	position:relative;
	}

#nav li {
	margin: 0 10px 0 0;
	padding: 0;
	font: small-caps 30px "Times New Roman", Times, serif;
	float: left; /* make this right and it will reverse order */
	}

#nav ul {
	margin: 0px 0p 0;
	padding: 0;
	list-style: none; /*this adds dots to the list style on all sub-navigation items */}
	
#nav ul li {
	margin: 0px 0 2px 0px;
	padding:0px;
	font: italic normal 16px "Times New Roman", Times, serif;
	text-transform: lowercase;
	text-align: left;
	float: left; /* this ensures all sub-navigation items are aligned. by floating to right will align all items with the right of the main navigation text*/}

#nav #nav_blog {width: 88px;}
	
#nav #nav_store {width: 88px;}
	
#nav #nav_user {width: 88px;}
	
#nav #nav_about {width: 100px;}
	
#nav #nav_portfolio {width: 130px;}
	
#nav #nav_writing {width: 107px;}
	
#nav a {
	text-decoration: none;
	color: #ffffff;}
	
#nav a:hover {
	text-decoration: none; /*originally set to underline */
	background-image:url(assets/components/KatSkinnerTheme/images/underline_white.png);
	background-position: bottom center;
	padding-bottom:2px;
	white-space:nowrap;
	background-repeat:no-repeat;}

#nav ul a {
	padding-left: 16px;
	background: url() no-repeat -20px 0;}
	
#nav ul a:hover {text-decoration: underline;}
	
#nav .rss a:hover {
	background-position: 0 5px;
	background: url() no-repeat -20px 0;}
	
#nav .account a:hover {
	background-position: 0 5px;
	background: url() no-repeat -20px 0;}
	
#nav .twitter a:hover {background-position: 0 -54px;}
	
#nav .who a:hover {background-position: 0 -114px;}
	
#nav .contact a:hover {background-position: 0 -172px;}

#nav .facebook a:hover {background-position: 0 -192px;}

#nav .twitter a:hover {background-position: 0 -192px;}
	
#nav .web a:hover {background-position: 0 -233px;}
	
#nav .illustration a:hover {background-position: 0 -295px;}
	
#nav .themes a:hover {background-position: 0 -352px;}

#nav .wallpapers a:hover {background-position: 0 -414px;}

#nav .tutorials a:hover {background-position: 0 -474px;}

#nav .cart a:hover{background: url() no-repeat -20px 0;}

#nav #nav_about ul li {
	width: 100px;
	padding-top:5px;}

#nav #nav_writing ul li {
	width: 100px;
	padding-top:5px;}
	
#nav #nav_blog ul li {
	width: 100px;
	padding-top:5px;}
	
#nav #nav_portfolio ul li {
	width: 100px;
	padding-top:5px;}

#nav #nav_store ul li {
	width: 100px;
	padding-top:5px;}

#nav #nav_user ul li {
	width: 100px;
	padding-top:5px;}

<ul><li>Writing <ul><li>Forum</li><li>Themes</li></ul></li><li>Second container</li></ul>

#nav ul li { //styling of the container links eg writing, don't forget display:inline }
#nav ul li ul li { //styling of the child documents, using display: block to show it under each other }

<div id="nav">
    [!Wayfinder? &startId=`0` &levelClass=`lvl`!]
</div>

#nav {
	overflow: auto;
	background-color: #492a01;
	padding: 20px 0;
	width: 100%;
}

/* == Nav Universal Elements == */
#nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
	
	#nav ul li a {
		color: #FFF;
		text-decoration: none;
		font: small-caps bold 30px "Times New Roman", Times, serif;
	}
	#nav ul li a:hover {
		text-decoration: underline;
	}

/* == 1st Level Nav Items == */
#nav ul li.lvl1 {
	float: left;
	position: relative;
	padding: 0 20px;
}

/* == 2nd Level Nav Items == */
#nav ul li.lvl1 ul {
	margin-left: 15px;
}
	#nav ul li.lvl2 a {
		font-size: 16px;
		font-style: italic;
		font-weight: normal;
		padding: 5px;
	}
		

<?php
#::::::::::::::::::::::::::::::::::::::::
# Snippet Name: Personalize 
# Short Desc: calls a chunk if the user is logged in, otherwise calls another
# Version: 2.0
# Created By: 	Ryan Thrash ([email protected]), and then
#		powered up by kudo ([email protected])
#
# Date: Aug 03, 2006
#
# Changelog: 
# Dec 01, 05 -- initial release
# Jun 19, 06 -- updated description
# Jul 19, 06 -- hacked by kudo to output chunks
# Aug 03, 06 -- added placeholder for username
#
#::::::::::::::::::::::::::::::::::::::::
# Description: 	
#	Checks to see if webusers are logged in and displays yesChunk if the user
#	is logged or noChunk if user is not logged. Insert only the chunk name as
#	param, without {{}}. Can use a placeholder to output the username.
#	TESTED: can be used more than once per page.
#	TESTED: chunks can contain snippets.
#	
#	
# Params:
#	&yesChunk [string] [REQUIRED]
#		Output for LOGGED users
#
#	&noChunk [string] [REQUIRED] 
#		Output for NOT logged users
#
#	&ph [string] (optional) 
#		Placeholder for placing the username
#		ATTENTION!: place this ph only in yesChunk!
#	
#
# Example Usage:
#
#	[[LoggedOrNot? &yesChunk=`Link` &noChunk=`Register` &ph=`name`]]
#
#	Having Chunks named {{Link}} and another {{Register}}, the first will be
#	published to registered user, the second to non-registered users.
#
#::::::::::::::::::::::::::::::::::::::::

# prepare params and variables
$o = '';
$yesChunk = (isset($yesChunk))? $yesChunk : '';
$noChunk = (isset($noChunk))? $noChunk : '';

# do the work
$test = $modx->getLoginUserName();
if ($test) {
    $o = $modx->getChunk($yesChunk);
  } else {
    $o = $modx->getChunk($noChunk);
}

if (isset($ph)) {
	$modx->setPlaceholder($ph,$test);
	return $o;
} else {
	return $o;
}
?>

<div id="nav">
    [!Wayfinder? &startId=`0` &levelClass=`lvl` &outerTpl=`navOuterTpl` &innerTpl=`navInnerTpl`!]
</div>

<ul id="nav">
    [+wf.wrapper+]
    [[LoggedOrNot? &yesChunk=`loggedIn` &noChunk=`` &ph=`name`]]
</ul>

<ul>
    [+wf.wrapper+]
</ul>

<li class="lvl1"><a href="">User</a>
    <ul>
        <li class="lvl2"><a href="">Login</a></li>
        <li class="lvl2"><a href="">Account</a></li>
    </ul>
</li>