Removing bullets from unordered list

Question

Edit

The html and css for the site I am working on can be found at http://http://new.oranaschool.com/

/Edit

I am trying to remove the bullets showing in the top horizontal menu (Home...Contact). I have tried the advice given in Removing "bullets" from unordered list <ul> but still the bullets persist.

Can someone have a look at the CSS and tell me what I need to add to which CSS class? This has been driving me nuts now for a couple of hours.

You just need to use list-style: none;
... That will remove the bullets. — Amrinder Singh, Oct 12 '15 at 07:56
@All Can you have a look at the URL I have posted? As you will see there are numerous CSS classes in play. Adding suggestions to .navigation ul.sf-menu has done nothing to improve things. — TheEdge, Oct 12 '15 at 08:03
@TheEdge There is no URL in your post..other than to a SO question. — Paulie_D, Oct 12 '15 at 08:12
@Paulie_D Doh!!! Thanks for pointing that out. Man it has been a long day. I have now edited the post. — TheEdge, Oct 12 '15 at 08:15
please add you code.. or quick fix is adding important ul li { list-style-type:none !important; } — Domain, Oct 12 '15 at 08:16

score 1 · Answer 1 · answered Oct 12 '15 at 08:02

You can try this

<html>
<head>
<style type="text/css">
div.ui-menu li {
    list-style:none;

}
ul
{
    list-style-type:none;
    padding:0px;
    margin:0px;
}
li
{
   display:inline;
    padding-left:14px;
}
</style>
</head>

<body>

<div class="ui-menu">
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</div>

</body>

</html>

score 1 · Answer 2 · answered Oct 12 '15 at 08:12

Please see the fiddle

https://jsfiddle.net/psgou7bt/2/

HTML

  <ul class="no-bullets">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    </ul>

Css

  .no-bullets, .no-bullets li {
        list-style-type:none;

    }

If this don't work for you, then you have some conflicts in your code

Xahed Kamal · Answer 3 · 2015-10-12T08:20:21.217

0

I found the issue you are facing on the website. You can remove the bullets using below CSS.

.navigation ul.sf-menu > li::before {
    background: none !important;
}

Or remove the background completely from your stylesheet.

edited Oct 12 '15 at 08:20

answered Oct 12 '15 at 08:00

Xahed Kamal

2,203
1
20
41

Can you have a look at the URL I have posted? As you will see there are numerous CSS classes in play. Adding suggestions to .navigation ul.sf-menu has done nothing to improve things. – TheEdge Oct 12 '15 at 08:04
@TheEdge, Add your HTML at least. Otherwise, any of our solution might not work on your html. – Xahed Kamal Oct 12 '15 at 08:09
The HTML can be found at the posted URL namely http://new.oranaschool.com and then View Source – TheEdge Oct 12 '15 at 08:13

score 0 · Answer 4 · edited Jul 02 '22 at 22:07

0

You can remove bullets by using list-style-type to none on the CSS for the <ul> element, for example:

ul
{
    list-style-type: none;
}

edited Jul 02 '22 at 22:07

halfer

19,824
17
99
186

answered Oct 12 '15 at 08:00

Amrinder Singh

5,300
12
46
88

Can you have a look at the URL I have posted? As you will see there are numerous CSS classes in play. Adding suggestions to .navigation ul.sf-menu has done nothing to improve things. – TheEdge Oct 12 '15 at 08:03
you just need to add the code in your css which i just posted, give it a try. – Amrinder Singh Oct 12 '15 at 08:09
That will be for ALL unordered lists. I only want it for the top menu. – TheEdge Oct 12 '15 at 08:12
then give it some specific class then you can use it as .abc ul{list-style:none;} – Amrinder Singh Oct 12 '15 at 08:13

score 0 · Accepted Answer · answered Oct 12 '15 at 08:20

remove background-image from this

.navigation ul.sf-menu > li:before {
     background: url(../images/menu_bull.png) 0 0 no-repeat; /** remove this */
}

and if you don't want to edit the original code add

.navigation ul.sf-menu > li:before {
         background: url('');
    }

Removing bullets from unordered list

5 Answers5