Posted on July 9, 2008 in Drupal CMS

---

UPDATE Oct 2010: We no longer use these specific CSS techniques for adjusting Drupal menus as we have our own starter theme that resets all CSS including menus.

However, you can still try the techniques below as a basic introduction to menu button CSS.

I only mention it because this page still gets a surprising number of hits.

---

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!