HTML + CSS, putting links outside of a list and stopping them wrapping

[B@Th*nG]

Hey guys,

am learning html and am having trouble with a simple nav bar. I've got it set up so that there's a drop down list on 2 of the 4 links in the bar, but the 2 links which aren't in the list show on different lines. It doesn't seem to matter where i put the "nowrap" or "white-space", it doesn't seem to work.

<STYLE>
div#navbar {
	text-align:right;
	position: relative; top: -1em;	/* position the navbar up a line to fit in navbar box */
}

div#navbar a:link {
	font-style: normal;
}

div#navbar a {
	color: white;
	font-style: normal;
	display: block;	/* making the whole link clickable */
	width: 10em;	/* force to set width */
}	

div#navbar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

div#navbar li {
	float: left;
	width 10em;
}

div#navbar li ul {
	display: none;
}

div#navbar li:hover ul {
	display: block;
	width: 10em;
	position: absolute;	
}

div#navbar p {
	white-space: no-wrap;
	overflow: hidden;
}
</STYLE>

<div id="navbar" title="Navigation Bar">

<p><a href="index.html">home</a>

<ul>
<li><a href="basichtml.html">basic html</a>
	<ul>
	<li><a href="basichtml.html#Headings">headings</a></li>
	<li><a href="basichtml.html#Paragraphs">paragraphs</a></li>
	<li><a href="basichtml.html#Divisions">divisions</a></li>
	<li><a href="basichtml.html#Line Breaks">line breaks</a></li>
	<li><a href="basichtml.html#Basic HTML formatting">basic html formatting</a></li>
	<li><a href="basichtml.html#Images">images</a></li>
	<li><a href="basichtml.html#Links">links</a></li>
	<li><a href="next.html">clickable images</a></li>
	</ul>
</li>


<li><a href="continue.html">page structuring</a>
	<ul>
	<li><a href="continue.html#hiding and displaying divs">hiding and displaying divs</a></li>
	<li><a href="popups.html">pop-ups</a></li>
	<li><a href="dropdowns.html">drop-downs</a><li>
	</ul>
</li>
</ul>


<a href="about.html">about</a></p>

</div>

What am i doing wrong?

B@