CSS Style Class ignored

Question

So I've recently taken over development of a website that uses uikit features that I've not used before, that i'm slowly figuring out.

One of the areas of the website is a drop down menu that has links and headers. I have defined a style that is working for the links but for reasons I've yet to figure out I can't get the header style to work despite multiple attempts.

So the section of code I'm fighting with is

.acp_dd_menu {
    background-color: #FFF;
    color: #000;
    padding: 0;
    width: 200px;
    height: auto;
    line-height: auto;
    /*min-height: 30px;*/
    overflow: hidden;
  }

  .acp_dd_menu a {
    text-decoration: none;
  }

  .acp_dd_menu ul {
    list-style-type: none;
    display: block;
    padding: 0;
    margin: 0;
    text-align: left;
    overflow: hidden;
    width: 200px;
  }


  .acp_dd_menu li {
    display: block;
    text-align: left;
    /* height: 30px; */
    padding: 0;
    border: 0;
    margin: 0;
    padding-left: 5px;
    cursor: pointer;
    overflow: hidden;
    width: 200px;
  }

  .acp_dd_menu li:hover, .acp_dd_menu_item_hovered {
    background-color: #bbc4e8;
    color: #000;
    width: 200px;
  }

  .acp_dd_menu_hdr li {
      text-transform: uppercase;
      font-weight: bold;
      text-decoration: underline;
      cursor: auto;
      margin-top: 5px;
  }

  .acp_dd_menu_hdr li:hover{
      text-transform: uppercase;
      font-weight: bold;
      text-decoration: underline;
      cursor: auto;
      margin-top: 5px;
  }

<div class='acp_dd_menu' data-uk-dropdown='{justify:'Corps'}'>
  <ul>
    <li class='acp_dd_menu_hdr'>Structure</li>
    <li>
      <a href='http://www.webcadets.org/dev_index.php/admin_cp/unit_divisions/'>Divisions</a>     </li>
    <li class='acp_dd_menu_hdr'>Positions</li>
    <li>
      <a href='http://www.webcadets.org/dev_index.php/admin_cp/position_manager/'>Manage Positions</a>
     </li>
     <li>
       <a href='http://www.webcadets.org/dev_index.php/admin_cp/position_holders/'>Position Holders</a>
     </li>
   </ul>
</div>
<li id='System'>System</li>
<div class='acp_dd_menu' data-uk-dropdown='{justify:'System'}'>
  <ul>
    <li>
      <a href='http://www.webcadets.org/dev_index.php/admin_cp/page_manager/'>Page Manager</a>
    </li>
  </ul>
</div>

When I debug the output the li elements using the class .acp_dd_menu_hdr are completely ignoring the class and defaulting to .acp_dd_menu li class. I have tried it as you see it now and as a subclass of .acp_dd_menu .hdr li but nothing seems to work.

It's probably something incredibly simple but I've been working at it so long now I've gone code-blind.

score 0 · Answer 1 · answered Aug 22 '18 at 08:50

0

Your css selector .acp_dd_menu_hdr li is wrong. The class is of the li itself so the selector should be li.acp_dd_menu_hdr (your selector means a child of .acp_dd_menu_hdr that is li).

answered Aug 22 '18 at 08:50

Programmer

1,973
1
12
20

score 0 · Answer 2 · answered Aug 22 '18 at 08:53

0

li.acp_dd_menu_hdr {
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: underline;
    cursor: auto;
    margin-top: 5px;
}

answered Aug 22 '18 at 08:53

Veeresh Hawaragi

1
1

for li has class "acp_dd_menu_hdr ", so for that particular li we need to write style under "li.acp_dd_menu_hdr" – Veeresh Hawaragi Aug 22 '18 at 08:55

CSS Style Class ignored

2 Answers2