Search code examples
cssmenunested-lists

Does the order in css file play a role?

In my case I have, simplified a nested list and enclosing div, i cant change it, it's created by drupal menu.

I want to clone the menu of a hardcoded site (edit removed link)

How would i "embed" the boxes ( ul li ul li items ) in the submenu, is it possible in just a list in block display? Do i need a z-index for them? Or float? Is float even possible on list items?

In general i understand the cascading thing but still do hard in writing css with few repeates. Some tips for shortening would be nice.

My primary question for now is why the style of the last entry (marked) is overwritten. Does the order in file play a role?

#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);
}
Solution

  • The last CSS rule written is the one that is used, but specificity takes priority over cascading.

    An article on specificity: http://css-tricks.com/specifics-on-css-specificity/

    So #block-system-main-menu div ul li .active-trail is the most specific and will overwrite other rules.