0

I have an incredibly simple html structure like below:

<ul id="menu" ng-show="showMenu">
  <li><a href="http://www.google.com" target="_blank">a</a></li>
  <li><a href="http://www.msn.com" target="_blank">b</a></li>
</ul>

css:

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}
body{
  background:#f2f2f0;
  padding:15px;
}
#menu ul{
    list-style:none !important;
}
#menu li a{
    color:inherit;
    text-decoration:none;
}

The ul still shows bullets even though I set list-style to none. When I remove the #menu, it works as desired. Why is this happening? #menu is the id of the ul, it should apply to the menu element. Am I doing something incorrectly?

Josue Espinosa
  • 5,009
  • 16
  • 47
  • 81

2 Answers2

6

#menu ul is trying to target a ul that is a descendant of #menu. This is incorrect, since in your case they are the same element. ul#menu would be correct.

Steve Sanders
  • 8,444
  • 2
  • 30
  • 32
5

You are targeting a non-existing element (a <ul> that is a child of an element with id="menu". The element you want to target is an <li> that is a child of an element with id="menu" like this:

#menu li{
    list-style:none; //you can remove !important
}

Another option is to create a menu class no-bullet.

<ul id="menu" class="no-bullet" ng-show="showMenu"> and use the same CSS as above, except replace #menu li with .no-bullet.

Dan
  • 9,391
  • 5
  • 41
  • 73
  • I noticed that as well, there are lots of potential ways of doing this, but I prefer specificity since the id `#menu` could be used elsewhere. However I updated my answer to indicate the alternative of using a simpler identifier. – Dan Sep 04 '14 at 20:14
  • 1
    IDs are unique, and should not be re-used under any circumstances. – SeinopSys Sep 04 '14 at 20:16
  • If the stylesheet is loaded on many pages there might be multiple elements with `id="menu"` – Dan Sep 04 '14 at 20:17
  • Well, it's generally good practice to make IDs unique throughout the website, especially for common elements like navigaton. – SeinopSys Sep 04 '14 at 20:18
  • Ok but in reality as a site grows an id may get re-used, especially if it's a generic one like `menu`, for that reason I suggested creating a new class called `no-bullet`. – Dan Sep 04 '14 at 20:23