In my situation, I am dealing with a nested list and enclosing div that was created by Drupal's menu system, so I am unable to modify it.
My goal is to replicate the menu from a hardcoded website (link removed).
How can I include the sub-items (ul li ul li) in the submenu? Can this be done easily using just a list in block display? Do I need to use z-index or float properties? If so, can we apply float to list items?
Although I grasp the concept of cascading styles, I still find it challenging to write CSS without repeating myself. Any tips on how to shorten my code would be greatly appreciated.
Currently, my main concern is why the style of the last entry (marked) is being overridden. Could the order of styles in the file be affecting this?
#block-system-main-menu .content {
font-size: 17px;
font-weight: bold;
}
#block-system-main-menu div ul li {
width: 207px;
margin: 4px 0px;
}
#block-system-main-menu div ul li {
display: block;
height: 38px;
background: url(/sites/all/themes/schott/menuitembg.gif);
}
#block-system-main-menu div ul li .active-trail {
display: block;
height: 60px;
background: url(/sites/all/themes/schott/menuitembg_p.png);
}
div ul li ul li.leaf { /* both styles are overwritten */
display: inline-block;
background: url(/sites/all/themes/schott/subitem_passive.gif);
}