html and css menu problem

AurelianR posted this at 14:48 — 17th December 2008.

They have: 1 posts

Joined: Dec 2008

Hello!

I am trying to add a new menu list at right of my menu item Phasellus
Any help is strongly appreciated .
Look below the code :
css code

	/* NAV - top horizontal nav */
	
	
	#nav, #nav ul {padding: 0;margin: 0;list-style: none}
	#nav {font-weight:bold;height:2.09em;font: bold 96% arial;margin: 0 105px 0 40px}
	#nav li {position:relative;background: #999;float: left;width: 10em;display:block;margin: 0;border-bottom: 3px solid #666;border-right: 3px solid #252525;padding:0}
	#nav a, #nav a:link, #nav a:visited, #nav a:hover, #nav a:active {text-decoration:none;cursor:pointer;color:#fff;display: block;padding: 4px 10px 2px}
	#nav a:hover {color:#000}
	
	#nav li ul {border-left: 1px solid #c00;background: #f6f6f6 url("images/featurebox_bg.gif") no-repeat 100% 100%;width:15.8em;font-size:90%;margin-top:3px;position: absolute;font-weight:normal;left: -999em}
	#nav li:hover ul, #nav li.sfhover ul {left: 0;z-index:99999}
	
	#nav li li {background:none;float:none;border:none;border: 1px solid #999;border-top:1px solid #fff;border-right:none;border-left:none;padding-left:0}
	#nav li li.last {border-bottom:none}
	#nav li li a, #nav li li a:link, #nav li li a:visited, #nav li li a:hover {color:#000;padding: 3px 10px 2px;width:14em}
	#nav li li a:hover {color:#fff;background:#c00}
	
	#nav li.active {background: #c00;border-bottom: 3px solid #c00}
	#nav li.active ul {border:none;background: #c00 url("images/featurebox2_bg.gif") no-repeat 100% 100%}
	#nav li.active a:link, #nav li.active a:visited, #nav li.active a:hover, #nav li.active a:active {}
	#nav li.active a:hover {color:#000}
	
	#nav li.active li {border:none;border-top: 1px solid #c15c5c;border-bottom: 1px solid #870000}
	#nav li.active li.last {border-bottom: none}
	#nav li.active li a:link, #nav li.active li a:visited, #nav li.active li a:hover, #nav li.active li a:active {color:#fff}
	#nav li.active li a:hover {background: #666 url("images/sprites.gif") repeat-x 0 99%;color:#fff}
	
	#nav li.active li.active a:link, #nav li.active li.active a:visited, #nav li.active li.active a:hover, #nav li.active li.active a:active {color:#fff;font-weight:bold;background: #666 url("images/sprites.gif") repeat-x 0 99%}

	/* hide from IE mac \*/
	#nav li {width:auto}
	/* end hiding from IE5 mac */

html code

		<ul id="nav">
		<li class="first"><a href="#">Home</a></li>
		<li class="active"><a href="#">Products</a>
			<ul>
			<li class="first"><a href="#">Maecenas</a></li>
			<li><a href="#">Phasellus</a></li>
			<li><a href="#">Mauris sollicitudin</a></li>
			<li><a href="#">Mauris sollicitudin</a></li>
			<li><a href="#">Mauris sollicitudin</a></li>
			<li><a href="#">Mauris sollicitudin</a></li>
			<li class="last"><a href="#">Mauris at enim</a></li>
			</ul>
		</li>
		<li><a href="#">Client list</a>
			<ul>
			<li class="first"><a href="#">Maecenas</a></li>
			<li><a href="#">Phasellus</a></li>
			<li><a href="#">Mauris sollicitudin</a></li>
			<li class="last"><a href="#">Mauris at enim</a></li>
			</ul>
		</li>
		<li><a href="#">Case Studies &amp; References</a>
			<ul>
			<li class="first"><a href="#">Maecenas</a></li>
			<li><a href="#">Phasellus</a>
				<ul><!-- here I am trying to add the menu-->
					<li class="first"><a href="#">Mauris xxx</a></li>
					<li><a href="#">Mauris solxxxxn</a></li>
					<li class="last"><a href="#">Mauris xxxxxxx</a></li>
					</ul>
				</li>
			<li><a href="#">Mauris sollicitudin</a></li>
			<li><a href="#">Phasellus</a></li>
			<li><a href="#">Mauris sollicitudin</a></li>
			<li><a href="#">Phasellus</a></li>
			<li><a href="#">Mauris sollicitudin</a></li>
			<li><a href="#">Phasellus</a></li>
			<li><a href="#">Mauris sollicitudin</a></li>
			<li><a href="#">Phasellus</a></li>
			<li><a href="#">Mauris sollicitudin</a></li>
			<li class="last"><a href="#">Mauris at enim</a></li>
			</ul>
		</li>
		<li class="last"><a href="#">Locations</a>
			<ul>
			<li class="first"><a href="#">Maecenas</a></li>
			<li><a href="#">Phasellus</a></li>
			<li><a href="#">Mauris sollicitudin</a></li>
			<li class="last"><a href="#">Mauris at enim</a></li>
			</ul>
		</li>
		</ul>
	</div>

Megan posted this at 17:55 — 17th December 2008.

She has: 11,421 posts

Joined: Jun 1999

Could you post a working link please? It's much easier to debug that way.