Removing bullets from asp.net menu

Question

I can't seem to get rid of bullets in my menu. Can anyone help me?
Master page code:

<asp:Menu ClientIDMode="Static" ID="main_menu" runat="server" Orientation="Horizontal">
       <StaticItemTemplate>
       <div class="nav_style">
            <asp:Label runat="server" Text='<%# Eval("Text") %>' /> 
       </div>
       </StaticItemTemplate>
   <Items>
       <asp:MenuItem NavigateUrl="~/home.aspx" Text="home" />
       <asp:MenuItem NavigateUrl="~/what-it-can-do.aspx" Text="what it can do" />
       <asp:MenuItem NavigateUrl="#" Text="pricing" />
       <asp:MenuItem NavigateUrl="#" Text="news & events" />
       <asp:MenuItem NavigateUrl="#" Text="partner with us" />
   </Items>
</asp:Menu>

Here is my CSS code:

.nav_style
        {
            list-style-type:none;
            background-color:#242C32;
            border-radius:3px;
            color:#F5F5F5;           
            border-top:6px solid #242C32;
            border-bottom:6px solid #242C32;
            border-left:12px solid #242C32;
            border-right:12px solid #242C32;
            font:13px calibri;
        }

Here is the generated HTML:

<div id="main_menu">
    <ul class="level1">
        <li><a class="level1 selected" href="home.aspx">
                            <div class="nav_style">
                            <span>home</span> 
                            </div>
                        </a></li><li><a class="level1" href="what-it-can-do.aspx">
                            <div class="nav_style">
                            <span>what it can do</span> 
                            </div>
                        </a></li><li><a class="level1" href="#">
                            <div class="nav_style">
                            <span>pricing</span> 
                            </div>
                        </a></li><li><a class="level1" href="#">
                            <div class="nav_style">
                            <span>news & events</span> 
                            </div>
                        </a></li><li><a class="level1" href="#">
                            <div class="nav_style">
                            <span>partner with us</span> 
                            </div>
                        </a></li>
    </ul>
</div>

EDIT
Not any of the answers seems to be working for me, any other suggestions? Thank you.

Answer 1

Managed to do it myself. In my css file there was a background set for bullets for the whole page

background:url('../img/blue_bullet.png')

so I added to my css

.nav_style li
     {
         background:none;
     }

Answer 2

Redefine the css style as:

.nav_style ul
{
    ...
}

Remove nav_style class from the div. Instead use CssClass = "nav_style" in the Menu markup.

Answer 3

FYI, just came on this and nothing mentioned worked. Examining the rendered html shows that a table cell was being appended to my list item (the whole menu is a table rendered structure) and using a bullet icon as a background image from webkit. To override that, specify your own bullet, which in my case, was nothing. So I made a 2x2px white png file and specified the "static pop up image url" (StaticPopoutImageURL) control property which is used as the bullet cell's background. The following is in the menu control layout code:

 <asp:Menu ID="MyMenu" runat="server"
                DisappearAfter="100"
                StaticDisplayLevels="1"
                Orientation="Vertical"
                StaticPopoutImageURL="/Images/White2x2px.png"
                CssClass="my anchor/ul styles">
                .....
    </asp:Menu>

Hopes this helps someone since I couldn't find the answer anywhere. Jim

Answer 4

Try this:

#main_menu ul
{
    list-style:none;
}

Answer 5

Try this to reset it with css:

#main_menu *
{
   list-style: none; 
}

Demo

Answer 6

For your generated HTML, the following block should get you rid of the bullets.

.level1
{
    list-style:none;
}

A more generic way is to target the generated <ul> with something like the following:

#main_menu ul
    {
        list-style:none;
    }

A working example: http://jsfiddle.net/U2Vgf/1/