52

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

4
  • 2
    You should post your html here as well. Links go bad over time.
    – Brad
    Commented Aug 3, 2013 at 2: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... Commented Jan 3, 2017 at 7: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. :) Commented Jan 3, 2017 at 14:16
  • Possible duplicate of Need an unordered list without any bullets Commented May 22, 2017 at 10:23

7 Answers 7

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.

1
  • 4
    It's easier to add the style to the parent <ul>.
    – ErikE
    Commented Jan 24, 2017 at 23:12
15

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>
9
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

0
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.

2
  • 2
    This is not a valid CSS. You can remove the space by setting the padding or margin to 0. Commented Jul 3, 2017 at 7:25
  • I don't know why does it worked. But it worked in my case. @IvankaTodorova
    – vichu
    Commented Jul 4, 2017 at 9:00
2

In your css file add following.

ul{
 list-style-type: none;
}
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>
                ))
                }
1
  • 1
    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. Commented May 7, 2021 at 16:19
-2

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.