How to remove bullets from an unordered list using CSS?

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 is inside MasterPage:

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

And finally, this code inside 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 a question, lol):

Using this code does not remove the token list. I don't need bullets because I want to simulate a menu.

Thanks guys .: D

+3
source share
4 answers

Try putting list-style-typein UL, not on DIV, containing 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;
}
+3
source

Isn't it easy

list-style:none;

but not

list-style-type:none;

In the section li / ol / ul

for example

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

or

.classThatTheListElementIsAMemberOf {
    list-style:none;
}
+3
source

list-style-type div, ul div. :

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

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

list-style-type ul css MainMenu, .

0

, , CSS:

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

It will match ul in div.MainMenu, which is the end result of your code above.

0
source

Source: https://habr.com/ru/post/1715781/


All Articles