Remove the list style type of a joomla menu

Question

I need to remove the list style type of a joomla menu.

I have tried to set text-decoration, list-style, list-style-type and text-decoration-line to none. But nothing works.

I have seted the general li and ul selectors also as the specific class/id.

ul{
      list-style-type: none;
      text-decoration: none;
      list-style: outside none none;
      text-decoration-line: none;
}

li{
      list-style-type: none;
      text-decoration: none;
      list-style: outside none none;
      text-decoration-line: none;
}

Any suggestion?

Answer 1

Without seeing your code it's hard to do anything but guessing, but here are some ideas:

1. Use your browser's developer tools (usually available by pressing F12 or Right-click -> Inspect element). You can edit the CSS directly for a preview of how it affects you layout. Once you find a way to solve it, copy your changes to your CSS file.

2. Look for :before pseudo-elements in your CSS. It's probable that your template adds the chevrons before the list elements using this kind of selector.

3. Try adding !important to your CSS declarations, to make sure it's not overridden by other styles.

Answer 2

Assuming you are not getting any cached content that is not containing any of your CSS modifications, the only sure thing is that there are CSS rules that affect that particular list and most likely they take precedence over other rules and your override CSS code. But for us, without being able to see the live page, it's hard to tell you what you need to adjust.

Your best ally here is your browser's inspector / developer tools. With it you must try to identify any CSS inheritances or precedences.

When a particular CSS rule is not affecting the html element, it means that there is another stronger rule in place. This is usually either because the other rule contain "!important" with the attribute, or because it's more specifically selected, by the selectors.

As said, the only way to tell, is using the browser's inspector. If you are adding your custom CSS rules at a CSS file of your site, then after reloading the page and open the inspector, you will be able to see the priority order of the rules on that element. If you see your custom css down in the list, this means that those rules over your css are in higher priority.

Study their selectors (css classes), in order to make your selectors of higher priority, e.g. by using a "id" of a container element.

Also make sure, your css is loading at the end and not before all other css rules, that no "!important" is involved anywhere - and you are watching uncached content.