Posted on July 9, 2008 in Drupal CMS

On a couple of websites I've built I've wanted to change the default Drupal menu into something that closely resembles buttons.

For example:

This is easy to do using CSS.

The menus in Drupal are formatted as unordered lists using <ul> and <li>, with some funky CSS included in by default to give the standard bullets and arrows.

To create a blocky, CSS button look we need to overwrite the default CSS with some of our own. In theory it's not that difficult, but it took me a while of playing around to figure out what CSS rules needed to be overwritten.

I start all my themes with Zen, so I'm not sure if this CSS will work by default with other themes - give it a try.

In your theme's CSS file, add the code:

/* menu buttons */
.block-menu ul.menu,
.block-menu li.leaf,
.block-menu li.collapsed,
.block-menu li,
.block-menu .item-list ul,
.block-menu .item-list ul li {
    list-style: none;
    list-style-image: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.block-menu .block-inner a,
.block-menu .block-inner a:visited {
    color: #333;
    text-decoration: none;
    display: block;
    /*width: 168px;*/
    padding: 1px 6px;
    margin: 2px 0;
   
    border-width: 1px 1px 1px 8px;
    border-style: solid;
    border-color: #DDD;
   
    font-size: 0.9em;
}
.block-menu .block-inner a:hover {
    color: #FFFFFF;
    background-color: #880a0b;
    border-color: #880a0b;
}

You will need to adjust the '.block-menu' part of the selector to target your particular menu. Then fill in your own colours, mess around with the margins and padding to suit your site and away you go!