Remove bullet points in UL in CSS

Question

I've followed the following tutorial in creating a simple menu bar which I place in a but can't seem to get my head round why the "list-style-type: none;" or "list-style: none;" won't work.

I've had a look at similar issues which seemed to be solved by ensuring overriding of the list styles in the nested OL isn't taking place but no luck on my side

Example I looked at

Any ideas where I'm going wrong?

HTML:

<section class="menu_bar_section">
    <ul id="menu_bar">

        <li><a href="#">Lorem</a></li>
        <li><a href="#">Mauricii</a></li>
        <li>
            <a href="#">Periher</a>
            <ul class="noJS">
                <li><a href="#">Hellenico</a></li>
                <li><a href="#">Genere</a></li>
                <li><a href="#">Indulgentia</a></li>
            </ul>
        </li>
        <li><a href="#">Tyrio</a></li>
        <li><a href="#">Quicumque</a></li>

    </ul>
<section>

CSS:

 /* Section */
.menu_bar_section {
    width: 100%;
    float: left;
    color: #999999;
    background: #FFCC00;
    font-family:'Trebuchet MS', Tahoma, Sans-serif;
}

/* Structure
------------------------------------------*/
#menu_bar,
#menu_bar ul {
    list-style-type: none;
}
#menu_bar {
    float: left;
}
#menu_bar > li {
    float: left;
}
#menu_bar li a {
    display: block;
    height: 2em;
    line-height: 2em;
    padding: 0 1.5em;
    text-decoration: none;
}
#menu_bar ul {
    position: absolute;
    display: none;
    z-index: 999;
}
#menu_bar ul li a {
    width: 80px;
}
#menu_bar li:hover ul.noJS {
    display: block; 
}


/* Main menu
------------------------------------------*/
#menu_bar {
    font-size: 20px;
    background: #2f8be8;
}
#menu_bar > li > a {
    color: #fff;
    font-weight: bold;
}
#menu_bar > li:hover > a {
    background: #f09d28;
    color: #000;
}


/* Submenu
------------------------------------------*/
#menu_bar ul {
    background: #f09d28;
}
#menu_bar ul li a {
    color: #000;
}
#menu_bar ul li:hover a {
    background: #ffc97c;
}

It is a problem if your `
` don't have `id` you must have this one ` — Datz Me, Mar 12 '15 at 10:14

score 2 · Answer 1 · answered May 03 '20 at 03:54

2

You could use

list-style: none;

or

list-style-type: none;

Both of them works but the first is shorter but it gets the same result.

answered May 03 '20 at 03:54

Jayampathy Wijesena

1,670
1
18
26

ketan · Answer 2 · 2015-03-12T12:00:31.627

Just use

ul {
    list-style: outside none none;
}

Or use like: (give id)

<ul id="menu_bar">

Check updated Fiddle here.

 <style>
.menu_bar_section {
    width: 100%;
    float: left;
    color: #999999;
    background: #FFCC00;
    font-family:'Trebuchet MS', Tahoma, Sans-serif;
}


#menu_bar,
#menu_bar ul {
    list-style-type: none;
}
#menu_bar {
    float: left;
}
#menu_bar > li {
    float: left;
}
#menu_bar li a {
    display: block;
    height: 2em;
    line-height: 2em;
    padding: 0 1.5em;
    text-decoration: none;
}
#menu_bar ul {
    position: absolute;
    display: none;
    z-index: 999;
}
#menu_bar ul li a {
    width: 80px;
}
#menu_bar li:hover ul.noJS {
    display: block; 
}



#menu_bar {
    font-size: 20px;
    background: #2f8be8;
}
#menu_bar > li > a {
    color: #fff;
    font-weight: bold;
}
#menu_bar > li:hover > a {
    background: #f09d28;
    color: #000;
}


#menu_bar ul {
    background: #f09d28;
}
#menu_bar ul li a {
    color: #000;
}
#menu_bar ul li:hover a {
    background: #ffc97c;
}
</style>

<ul id="menu_bar">
<li><a href="#">Lorem</a></li>
    <li><a href="#">Mauricii</a></li>
    <li>
        <a href="#">Periher</a>
        <ul class="noJS">
            <li><a href="#">Hellenico</a></li>
            <li><a href="#">Genere</a></li>
            <li><a href="#">Indulgentia</a></li>
        </ul>
    </li>
    <li><a href="#">Tyrio</a></li>
    <li><a href="#">Quicumque</a></li>

</ul>

I attempted your above suggestion but no luck ... the bullet points still appear. — ANM, Mar 12 '15 at 11:43
@kiberanumbanane Have you seen here by clicking on Run code snippet Or in JSFiddle. Or paste your code in JSfiddle and show us. Or show your whole code. — ketan, Mar 12 '15 at 11:48
sorry for earlier comment. an error on my part. using 124c41's suggestion I got rid of the bullet points but I seem to have messed about with the nested LI in the UL with the class noJS. Here's my fiddle link: https://jsfiddle.net/03jqb9z2/embedded/result/ — ANM, Mar 12 '15 at 12:45

score 0 · Accepted Answer · answered Mar 12 '15 at 10:18

0

#menu-bar ul will only target the ul which is a direct child of #menu-bar, the style wont propagate to nested ul's within.

To target the nested ul you can either target it directly by it's class:

.noJS {
    list-style:outside none none;
}

or by drilling into the nested structure:

#menu-bar ul li ul {
    list-style:outside none none;
}

answered Mar 12 '15 at 10:18

124c41

110
1
8

I followed your 'drilling' suggestion and it seems to work in removing the bullet points but i seemed to have messed up the listing of the nested LI. Here's my fiddle link: https://jsfiddle.net/03jqb9z2/embedded/result/ – ANM Mar 12 '15 at 12:42
That is because they get `float:left;` from `#menu_bar li` (line 62 in the fiddle css). Just remove that, the top level menu items get it anyway from `#menu_bar > li` (line 14). – 124c41 Mar 12 '15 at 13:08
Thanks. You correction worked. Indeed I was applying 2 float:left stylings – ANM Mar 12 '15 at 14:15

Remove bullet points in UL in CSS

3 Answers3