Drop Down Menu: Bullets and Alignment Options

[helpplease101]

Hello,

I have a drop-down menu at sackvilleyouth.weebly.com/resources.html

I would like to know how to remove the bullets from the menu, as well as how to center it.

Here a sample of the coding I am using:

<style>

a:link {
text-decoration: none;
}

a:visited {
text-decoration: none;
}

a:hover {
text-decoration: none;
}

a:active {
text-decoration: none;
}

ul.cssMenu, ul.cssMenu ul
{
z-index: 5000; //
list-style:none;
margin:0; padding:0;
position: relative;
}

/*Style for 1st level menu header*/
ul.cssMenu li
{
position: relative;
float: left;
zoom: 1; /*Needed for IE*/
border: 1px solid;
border-radius: 25px;
background: #FFd018; /*background color of menu header (1st level)*/
}
ul.cssMenu li:hover
{
background: #0099ff /*background color of menu header (1st level) on hover*/;
}
ul.cssMenu li a
{
/*Menu link styles*/
display: block;
padding: 5px;
color:#000000;
font-family: Arial, Times New Roman, Tahoma;
font-size: 12px;
}

/* Building menu items - for 2nd and more level menu items*/
ul.cssMenu ul
{
display:none; /*initially menu item is hidden*/
position: absolute; /*absolute positioning is important for menu to float*/
width: 150px;

/*Formating of menu items*/
border:1px solid #0099FF;
padding:1px;
background:#FFFF00;

/*optional - to change position of 2nd level menu item*/
top: 100%;
left: 0;
}
ul.cssMenu ul li
{
background: #F5F5F5;
color: #000;
border-bottom: 1px solid #DDDDDD;
float: none;
}

ul.cssMenu ul li a
{
width: 100%;
display: block;
color:#000000;
}

/* Menu item position for 3rd level and more */
ul.cssMenu ul ul
{
left: 100%;
top: 0;
}

/* Hover effect for menu*/
ul.cssMenu li:hover > ul
{
display:block;
}
</style>


<div style="height:25px;">
<ul class="cssMenu">

<li>
<a href="#calendar">Events Calendars</a>
</li>

<li>
<a href="#general">General</a>
</li>

<li>
<a href="#health">Health & Family</a>
<ul>
<li><a href="#community">Cobequid Youth Community Health</a></li>
<li><a href="#HRMhealth">HRM Youth Health</a></li>
<li><a href="#mhline">Mental Health Phone Lines</a></li>
<li><a href="#sex">Sexuality, Pregnancy & Parenting</a></li>
<li><a href="#welfare">Child Welfare</a></li>
<li><a href="#risk">Youth-at-Risk / In-Care </a></li>
</ul>
</li>



Any tips?

Thanks!

[pandy]

See http://www.w3.org/TR/CSS2/generate.html#pr...list-style-type .

Looks centered to me. Or do you mean the LIs that spill over on the second line? It would be hard since you use floats. Maybe you can use display: inline instead. Then you can center them as any other inline elements.

http://www.w3.org/Style/Examples/007/center.html

Sorry to repeat myself, but you need to validate and fix the errors. They are way too many.
http://validator.w3.org/check?uri=http%3A%...ine&group=0
http://jigsaw.w3.org/css-validator/validat...ng=&lang=en