Two column menu

Here's my HTML:

<ul class="navlist">
<li><a href="/">HOME</a></li><li><a href="/services">Pinpoint Services</a></li>
<li><a href="/user/2">My account</a></li>

<li><a href="/why_pinpoint" class="active">Why Pinpoint</a>

<ul class="navlist">
<li><a href="/spirit_of_good">Spirit of Good</a></li>
<li><a href="/expertise">Expertise</a></li>
<li><a href="/people">People of Pinpoint</a></li>
<li><a href="/strategic_partner">Strategic Partner</a></li>
<li><a href="/supplier_network">Supplier Network</a></li>

</ul>
</li>

<li><a href="/problem_solved">Problem Solved</a></li>
<li><a href="/contact">Contact Us</a></li>

<li><a href="/logout">Log out</a></li>

</ul>

HTML:

Here's my css:

/* sidebar-left ELEMENTS */
#sidebar-left {
	width: 150px;
	float: left;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	margin: 0px;
	padding-left: 75px;
	height: 259px;
	overflow: visible;
}	
#logo_block {
	position: absolute;
	left: 0px;
	top: 27px;
	height: 259px;
	width: 175px;
	z-index: 10;
}
#sidebar-left h5 {
	color:#FFFFFF;
	font-size: 8px;
}
#sidebar-left ul {
	padding: 0px;
	list-style-type: none;
	width: 130px;
	line-height: 100%;
	margin: 0px;
	border-right: solid 1px black;
}
#sidebar-left ul ul {
	margin: 0 0 0 150px;
}
#sidebar-left li li a {
	margin: 0px 0px 0px 5px;
	width: 125px;
	color: #666666;
}
#sidebar-left li li li a {
  margin: 0px 0px 0px 30px;
  width: 110px;
}
#sidebar-left a {
  display: block;
  margin: 0px 0px 0px 0px;
  padding: 5px;
  width: 140px;
  text-transform: capitalize;
}
#sidebar-left a.active {
  color:#0099CC;
  text-decoration: none;
}
#sidebar-left a:link {
  color:#333333;
  text-decoration: none;
}
#sidebar-left a:hover {
  color:#0099cc;
}
/* THE SMALL BOX BELOW NAV */
#sidebar-left p {
  padding: 5px;
}

HTML:

Basically right now, the sub menu is offset to the right so many pixels. However, on the left in the main menu, the gap that the sub-menu used to occupy is just white space. I want to be able to close this gap. How would I go about do that? I'm at a bit of a loss for this. Thanks all!

 

I'm not quite sure I understand what you are trying to do here. Do you want "Problem Solved" to be directly under "Why Pinpoint" as if the sub-menu wasn't there? And then have the sub menu off to the right?

Do you want to do some sort of drop down menu where the sub-menu pops up when you hover over a certain link?

 

yes, that is what I want to have happen. I don't need it to be a pop-out, just so the static html I have listed appears with the sub menu items all the right of the main menu items.

 

Well the simple way is to add "position:absolute" to your "#sidebar-left ul ul" declaration like so:

#sidebar-left ul ul {
    [B]position:absolute;[/B]
    margin: 0 0 0 150px;
}

Code (markup):

I'll leave the positioning to you.

You might also want to add "position:relative" to "#sidebar-left ul" also. Sometimes this solves my problems. As usual, I can't think of any problems that this has solved, but I just know that this has solved some.

#sidebar-left ul {
    [B]position:relative;[/B]
    padding: 0px;
    list-style-type: none;
    width: 130px;
    line-height: 100%;
    margin: 0px;
    border-right: solid 1px black;
}

Code (markup):

I hope this is the effect you're going for.