how can i style this menu

this the menu image



this the menu after my try

i deal with this menu as round corner technique but still not working with me

 

I have reviewed your site and the menus on your site .
Pls adjust the padding border margin and the background position .
It will work fine like the picture here .

 

thx it worked after i add

padding-top:5px

Code (markup):

but what about list style image it's out side the round corner box??

where's the picture

 

justin is referering to YOUR picture.

Your side padding is part of the issue.

Remove all margins and padding from your ul and li (keep whatever margins you've set on the ul, I didn't look at your page).

Then, set a left-padding on the li's, at least 16px but if more is needed then make it more. The padding should push the text away from the left side, making room for the bullets.

If the bullets remain outside the rounded area, then set a smaller width on the ul and then add some left padding to the ul itself.

Leaving the default margins and padding on a list will make the bullets stick out like that at least in Firefox if not also IE. This is why most of us zero our margins and paddings on lists, or even the whole page.

ul, li {
margin: 0;
padding: 0;
}

#specificMenu {
set whatever margins you need here for positioning;
if needed, set left padding;
}

#specificMenu li {
left padding here;
}

etc.

 

@Stomme poes
i tried do this all the time before and after ur replay but still not working

#leftcol
{
float:right;
width:230px;
border-left:1px dotted #FFFFFF;
padding-left:10px;margin-top:13px;padding-top:15px
}
#list li {
background:url(images/leftcol_top.jpg)  no-repeat top;
margin-bottom:10px;
margin-right:20px;
padding-top:5px;
list-style-image:url(images/bullet.gif)}
#list p{background:url(images/leftcol_tile.jpg) repeat-y  top;
}
#list li a {background: url(images/leftcol_bottom.jpg) no-repeat bottom;
 }
#leftcol li a:link,#leftcol li a:visited
{
text-decoration:underline;
display: block;
color:#535f71;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding-left:10px;
padding-bottom:10px;
}

Code (markup):

 

I don't see in your code above where you are zeroing the margins on that list. Your list is really unnecessarily complicated though.

<div id="leftcol">
<div id="list">
<ul>
<li><p><a href="#" class="underline"><span>Sed mauris diam, tempor</span></a></p></li>

<li><p><a href="#" class="underline"><span>Nulla sollicitudin nulla vel mi.</span></a></p></li>
<li><p><a href="#" class="underline"><span>Aenean sed lacus</span></a></p></li>
</ul>
</div><!--list-->

Code (markup):

You could just have

<div id="leftcol">
<ul id="list">
<li><a href="#">Sed mauris diam, tempor</a></li>
<li><a href="#">Nulla sollicitudin nulla vel mi.</a></li>
<li><a href="#">Aenean sed lacus</a></li>
</ul>
etc...
</div>

Code (markup):

At least for testing-- if you are using those other elements to hold more background images, fine, but put them back in after you get the bullets lined up right.

(near the top of the css file)
ul, li {
  margin: 0;
  padding: 0;
}

#list {
  set a width and temporarily a background colour so you can see where the ul actually is-- by default, without zeroing margins and padding, the bullets will stick out of the edge of the ul
}
#list li {
  set another bg colour here and start out with no padding or left margin, THEN add it back in.
list-style-image: teh bullet;
}
#list a {
  don't set any styles here yet until the bullets are lined up;
}

Code (markup):

First, you see what the list is with a background colour, a width, and margins and padding zero'd. Look in at least FF and IE though other browser won't hurt-- FF had a nasty bullet bug in version 2 that was fixed in FF3.

Then start adding left margin or left padding on the li's (I'd use margin, like you had) until the bullets are inside.

 

i added universal property

*{margin:0;
padding:0}

Code (markup):

secondly

#list li a span {
    display: block;
    padding-left: 16px;
    background: url(images/bullet.gif) no-repeat left;
}

Code (markup):

i think this what i needed this solve the problem

 

Cool! Glad it worked out for you.