Removing "bullets" from unordered list <ul>

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.sstatic.net/FfkKZ.png

The third level from the menu

Consequent

You should post your html here as well. Links go bad over time. – Sascha

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... – Cavesson

@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. :) – Consequent

Possible duplicate of Need an unordered list without any bullets – Fountainhead

Answer 1

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.sstatic.net/4qvax.png

Rodi

Answer 2

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.

Alee

It's easier to add the style to the parent <ul>. – Schwerin

Answer 3

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>

Hamadryad

Answer 4

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.

Antispasmodic

This is not a valid CSS. You can remove the space by setting the padding or margin to 0. – Consequent

I don't know why does it worked. But it worked in my case. @IvankaTodorova – Antispasmodic

Answer 5

In your css file add following.

ul{
 list-style-type: none;
}

Busch

Answer 6

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

Etheline

While this code may solve the question, including an explanation 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. – Immateriality

Answer 7

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>

Obsequious