css menu alignment problem - please help

[tonya]

Hi I have this website I am working on. I can't get the menu to work at all. I want the menu items to sit close next to one another but they are miles apart - its so if I have 8 links they all sit on one line
Here is the style code & the html

You can see what I mean here - http://www.hufflepuff.me.uk/

 
/******** NEW NAV CODES ******/
#menu { background-image:url(assetts/Layout-2008/layout_r2_c1.png); 
	color:#1D3B3B;
	text-align:center;
	font:normal 11px Verdana;
	line-height:1.0em; 
	margin-left:0px;
	margin-right:0px;
	margin-top:0px;
	font-size:70%;
	padding:1px; 
	font-weight: bold;
	height:39px;}
 
#menu a:hover {color: #6699CC}
 
#nav, #nav ul {
	padding: 0;
	margin: 0;
	list-style: none;}
 
#nav a {
	color:#1D3B3B;
	display: block;
	width: 175px;
	margin-left:0px;
	margin-right:5px;
	margin-bottom:4px;}
 
#nav li {
	float: left;
	width: 175px;
}
#nav li ul {
	position: absolute;
	width: 175px;/*10em*/
	left: -999em;
}
 
#nav li:hover ul {
	left: auto; background-color:#FFF03C;
}
#nav li:hover ul, #nav li.sfhover ul {
	left: auto;
}

<div id="menu" >
  <ul id="nav">
    <li><a href="/Home/">Home</a></li>
    <li><a href="/Dell-house-area/">The House &amp; Area</a></li>
    <li><a href="/B&amp;B-the-dell-page.html">Bed &amp; Breakfast</a></li>
     <li><a href="/SC-the-dell-page.html">Self Catering</a></li>
    <li><a href="/Home/">Home</a></li>
    <li><a href="/Home/">Home</a></li>
    <li><a href="/Home/">Home</a></li>
    <li><a href="/Home/">Home</a></li>
	<!-- etc. -->
  </ul> 
</div>

[HTMLBasicTutor]

Your menu uses lists and in your CSS you have set the width of each list item to 175px.

[tonya]

If I set this to 100 or even 50 it still does not fix the problem.

[Ghost Eyes]

You have it in 3 places as 175px width - you may have to change all three.