Removing "bullets" from unordered list

Question

I have set this:

list-style: none outside none;

And HTML:

<ul class="menu custompozition4">
    <li class="item-507"><a href=#">Strategic Recruitment Solutions</a>
    </li>
    <li class="item-508"><a href="#">Executive Recruitment</a>
    </li>
    <li class="item-509"><a href="#">Leadership Development</a>
    </li>
    <li class="item-510"><a href="#">Executive Capability Review</a>
    </li>
    <li class="item-511"><a href="#">Board and Executive Coaching</a>
    </li>
    <li class="item-512"><a href="#">Cross Cultutral Coaching</a>
    </li>
    <li class="item-513"><a href="#">Team Enhancement &amp; Coaching</a>
    </li>
    <li class="item-514"><a href="#">Personnel Re-deployment</a>
    </li>
</ul>

but even though bullets are displayed. (I'm not quite sure that those are ul's bullets, because when you hover the text the "bullets" get underlined.)

Image Demo: https://i.stack.imgur.com/FfkKZ.png

The third level from the menu

You should post your html here as well. Links go bad over time. — Brad, Aug 03 '13 at 02:42
it is better to change the accepted answer to that high up-voted post provided by @newtonrd as it is the actual simple answer. this can help people who searched this and reach here... — S.Serpooshan, Jan 03 '17 at 07:52
@S.Serp I have mentioned in my question that I tried setting `list-style-type` to `none`, but that didn't help. So, the answer that helped my problem is marked as accepted. :) — Ivanka Todorova, Jan 03 '17 at 14:16
Possible duplicate of [Need an unordered list without any bullets](http://stackoverflow.com/questions/1027354/need-an-unordered-list-without-any-bullets) — bartektartanus, May 22 '17 at 10:23

score 199 · Answer 1 · edited May 23 '17 at 11:54

199

Have you tried setting

li {list-style-type: none;}

According to Need an unordered list without any bullets, you need to add this style to the li elements.

edited May 23 '17 at 11:54

Community

1
1

answered Aug 03 '13 at 02:47

newtonrd

2,295
1
12
11

4
It's easier to add the style to the parent `
– ErikE Jan 24 '17 at 23:12

score 15 · Answer 2 · answered Apr 20 '16 at 10:09

You can remove the "bullets" by setting the "list-style-type: none;" Like

ul
{
    list-style-type: none;
}

OR

<ul class="menu custompozition4"  style="list-style-type: none;">
    <li class="item-507"><a href=#">Strategic Recruitment Solutions</a>
    </li>
    <li class="item-508"><a href="#">Executive Recruitment</a>
    </li>
    <li class="item-509"><a href="#">Leadership Development</a>
    </li>
    <li class="item-510"><a href="#">Executive Capability Review</a>
    </li>
    <li class="item-511"><a href="#">Board and Executive Coaching</a>
    </li>
    <li class="item-512"><a href="#">Cross Cultutral Coaching</a>
    </li>
    <li class="item-513"><a href="#">Team Enhancement &amp; Coaching</a>
    </li>
    <li class="item-514"><a href="#">Personnel Re-deployment</a>
    </li>
</ul>

score 9 · Accepted Answer · edited May 15 '14 at 14:29

ul.menu li a:before, ul.menu li .item:before, ul.menu li .separator:before {
  content: "\2022";
  font-family: FontAwesome;
  margin-right: 10px;
  display: inline;
  vertical-align: middle;
  font-size: 1.6em;
  font-weight: normal;
}

Is present in your site's CSS, looks like it's coming from a compiled CSS file from within your application. Perhaps from a plugin. Changing the name of the "menu" class you are using should resolve the issue.

Visual for you - https://i.stack.imgur.com/4qvax.png

score 5 · Answer 4 · answered Jul 02 '17 at 09:43

5

In my case

li {
  list-style-type : none;
}

It doesn't show the bullet but leaved some space for the bullet.

I use

li {
  list-style-type : '';
}

It works perfectly.

answered Jul 02 '17 at 09:43

vichu

353
2
10

2

This is not a valid CSS. You can remove the space by setting the padding or margin to 0. – Ivanka Todorova Jul 03 '17 at 07:25
I don't know why does it worked. But it worked in my case. @IvankaTodorova – vichu Jul 04 '17 at 09:00

score 2 · Answer 5 · answered Feb 10 '17 at 23:50

2

In your css file add following.

ul{
 list-style-type: none;
}

answered Feb 10 '17 at 23:50

Rajan Patil

952
7
15

score 1 · Answer 6 · answered May 07 '21 at 15:20

1

you can use it this way to

               {
                Fdata.map((point,index) =>(
                  <ul style ={{listStyle:'none'}}key={index} >                  
                    
                    <li className="text_paragraph"style={{fontSize:"0.8rem",color:"#ff1100"}}>{point.list}</li>
                </ul>
                ))
                }

answered May 07 '21 at 15:20

Preeti Maurya

193
2
4

1

While this code may solve the question, [including an explanation](https://meta.stackoverflow.com/questions/392712/explaining-entirely-code-based-answers) of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please edit your answer to add explanations and give an indication of what limitations and assumptions apply. – PerplexingParadox May 07 '21 at 16:19

score -2 · Answer 7 · answered Aug 25 '16 at 05:01

Try this it works

<ul class="sub-menu" type="none">
           <li class="sub-menu-list" ng-repeat="menu in list.components">
               <a class="sub-menu-link">
                   {{ menu.component }}
               </a>
           </li>
        </ul>

Removing "bullets" from unordered list

7 Answers7

Linked

Related