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;
     }