Recently, I've taken on the task of developing a website that utilizes uikit features that are new to me. I'm slowly getting the hang of it.
One specific part of the website is a drop-down menu containing links and headers. I have successfully styled the links, but for some reason, I'm struggling to get the header style to work despite numerous attempts.
The section of code giving me trouble looks like this:
.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>Upon debugging the output, I've noticed that the .acp_dd_menu_hdr elements within the li tags are not picking up the specified class and defaulting to .acp_dd_menu li. I've attempted different variations, including using it as a subclass of .acp_dd_menu .hdr li, without success.
It's probably a simple fix, but after spending so much time on it, I feel like I'm going code-blind.