I have created a drupal menu and added a couple of links. Unfortunately, when displayed, these come with bullets. How can I remove these? I am using the Precise theme, but it does not seem to be added by this theme.

enter image description here

| improve this question | | | | |

This could be default browser styles. It does't matter if they are added by the browser by default or by CSS, the solution is to remove them with CSS.

li {
  list-style: none;

You should create a sub_theme where you create and add your custom styles.

| improve this answer | | | | |
  • It did not work. With FireBug, I noticed that Drupal explicitly creates li lists, and not links only. I may need to create a view of links... – Jérôme Verstrynge Feb 11 '12 at 17:24
  • Someone suggested .block-menu-menu-name ul.menu li { list-style: none; list-style-image: none; } on another question and it worked. – Jérôme Verstrynge Feb 12 '12 at 7:05
  • 1
    @JVerstry The most specific styling rule wins, most likely the reset has a more specific rule than I posted as example above, you could do something like body ul li or add a id on your page, maybe #page or similar. – googletorp Feb 13 '12 at 9:24

It can be a tough job to adjust the styling of Drupal 7 menu's. Their nested styling and classnames sometimes make it hard to override, so I came to the conclusion to completely not load the default Drupal styling for menu's in my custom themes. The results are clean pure HTML menu lists which need some custom resetting/styling off-course (primary tabs become a clean list as well!).

function YOURTHEME_css_alter(&$css) {
  // remove Drupal menu styling!
| improve this answer | | | | |

I finally replaced my menu with a view where I set the display format to "Unformatted list."

| improve this answer | | | | |

Do as @googletorp said, but add !important at the end.

li {list-style: none !important;}
| improve this answer | | | | |
  • !important should be a last resort, specific styles are better. – googletorp Feb 13 '12 at 9:22
  • 1
    ^this. In my experience if you have to use !important then either you or the author of the CSS you're trying to over-ride has gone wrong somewhere. – Chapabu Jun 14 '12 at 8:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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