How to delete Bullets from an Unordered List using CSS?

Question

I have this in my CSS:

.MainMenu
{
    position: absolute;
    top:105px;
    left:15px;    
    background-color: #67E300;  
    color:White;
    border-style:double;
    border-color:White;
    list-style-type:none;
}

And this inside of the MasterPage:

<div class="MainMenu">
        <uc2:MainMenu ID="MainMenu1" runat="server" />
    </div>

And finally this code inside of the UserControl MainMenu:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MainMenu.ascx.cs" Inherits="LoCompro.UserControls.MainMenu" %>
<ul>
    <li>Inico</li>
    <li>Navegar Por Categoria</li>
    <li>Navegar Por Marca</li>
    <li>Buscar</li>
</ul>

Edit (forgot to ask the question, lol):

Using that code doesn't delete the bullet list. I don't want any bullets because I want to simulate a menu.

Thanks guys. :D

Answer 1

Isn't it just

list-style:none;

rather than

list-style-type:none;

In your li/ol/ul section

For example

ol.foo>li {
    list-style:none;
}

or

.classThatTheListElementIsAMemberOf {
    list-style:none;
}

Answer 2

Try placing the list-style-type on the UL, not on the DIV containing the UL.

.MainMenu
{
    position: absolute;
    top:105px;
    left:15px;    
    background-color: #67E300;  
    color:White;
    border-style:double;
    border-color:White;
}


.MainMenu ul
{
    list-style-type:none;
}

Answer 3

You are applying the list-style-type to the div, not to the ul inside the div. Try this instead:

.MainMenu
{
    position: absolute;
    top:105px;
    left:15px;    
    background-color: #67E300;  
    color:White;
    border-style:double;
    border-color:White;
}

.MainMenu ul
{
    list-style-type:none;
}

This will apply the list-style-type to any ul inside an item with the css class MainMenu defined on it.

Answer 4

All you need is this in your CSS:

.MainMenu ul { list-style-type: none; }

It will match the ul within the .MainMenu div, which is the final result of your above-posted code.