Keeping links from wrapping under bullet points

[jcdevelopment]

Currently i have a drop down menu with custom graphic bullet points. In the design it shows the link wrapping, but not under bullet. Is there a way to keep this from happening?

http://media.ebby.com/65/

hover over the first button to see what i mean.

Thanks for any help.

[joerivanveen]

I don't exactly know what you mean. I can see the link is wrapping, placing the word "Series" on the same indentation as the custom ">" (on a Mac, Safari). If you'd like it to continue as in a usual list, your CSS list-style-position should be set to "outside".

[jcdevelopment]

Well the link is wrapping, which is fine, but it goes under the bullet point. Here is the code, which i changed to outside:

#main_nav li ul li{
 clear:both;
 padding:10px 10px 10px 30px;
 list-style-image:url(../gfx/nav/carrot.gif);
 list-style-position:outside;
}

Yet the points are not showing up. I know i ran into this before but can't remember how to handle it.

[joerivanveen]

I think this has something to do with the paddings and margins. Have you tried setting both to zero and altering them when needed? So in the body, or main_nav:

padding: 0px;
margin: 0px;

and in the li selector:

#main_nav li ul li {
padding:0px 0px 0px 30px;
}

You may also want to try using a margin instead of a padding.

[effpeetee]

It is usually advisable to start your css with this code.

*{
margin:0;
padding:0;
}

It resets the browser(s) to zero.

Frank

[abduraooft]

Some left margin, say margin-left:20px; will also be required for #main_nav li ul li to see the bullets.

[jcdevelopment]

Originally Posted by joerivanveen

I think this has something to do with the paddings and margins. Have you tried setting both to zero and altering them when needed? So in the body, or main_nav:

padding: 0px;
margin: 0px;

and in the li selector:

#main_nav li ul li {
padding:0px 0px 0px 30px;
}

You may also want to try using a margin instead of a padding.

Brain fart i guess. I used margin instead. Thanks!