Welcome to the dropdown menu CSS generator. By modifying the options below, you can generate a restyled dropdown navigation above. You can copy and paste the CSS generated from the box further down the page.

Click Here to Pick up the color

enter a valid HEX colour value

Click Here to Pick up the color

enter a valid HEX colour value

Click Here to Pick up the color

enter a valid HEX colour value

 

 

Top Level Menu items

These options modify the top level menu items.

 

If no image is specified, only the background colour will be displayed

Click Here to Pick up the color

enter a valid HEX colour value

Click Here to Pick up the color

enter a valid HEX colour value

Click Here to Pick up the color

enter a valid HEX colour value

Click Here to Pick up the color

enter a valid HEX colour value

enter a font size in PXs

choose a font family

choose a font weight

enter measurement in PXs

enter measurement in PXs

Click Here to Pick up the color

enter a valid HEX colour value

Only applies to Vertical Flyout menus

Only applies to Vertical Flyout menus

Creates graphical buttons instead of basic text links. Note: You must have a background image colour specified above for this to work

Lower Level Menu items

These options modify the second level menu items.

Click Here to Pick up the color

enter a valid HEX colour value

Click Here to Pick up the color

enter a valid HEX colour value

Click Here to Pick up the color

enter a valid HEX colour value

Click Here to Pick up the color

enter a valid HEX colour value

enter a font size in PXs

choose a font family

 

choose a font weight

Click Here to Pick up the color

enter a valid HEX colour value

enter an opacity between 0 and 1

enter vertical padding in PXs

enter a border width in PXs

enter a width in PXs

 

CSS Code

Paste the following code into your CSS file. This code can be used with any unordered list which has an ID of #suckerfishnav.

#suckerfishnav {
    background:#9C1F1B url("../multi-level-navigation-plugin/images/suckerfish_red.png") repeat-x;
    font-size:18px;
    font-family:verdana,sans-serif;
    font-weight:bold;
    width:100%;
    }
#suckerfishnav, #suckerfishnav ul {
    float:left;
    list-style:none;
    line-height:40px;
    padding:0;
    border:1px solid #aaa;
    margin:0;
    width:100%;
    }
#suckerfishnav a {
    display:block;
    color:#dddddd;
    text-decoration:none;
    padding:0px 10px;
    }
#suckerfishnav li {
    z-index:999;
    position: relative;
    float:left;
    padding:0;
    }
#suckerfishnav ul {
    position:absolute;
    left:-999em;
    height:auto;
    width:151px;
    font-weight:normal;
    margin:0;
    line-height:1;
    border:0;
    border-top:1px solid #666666;
    }
#suckerfishnav li li {
    width:149px;
    border-bottom:1px solid #666666;
    border-left:1px solid #666666;
    border-right:1px solid #666666;
    font-weight:bold;
    font-family:verdana,sans-serif;
    }
#suckerfishnav li li a {
    padding:4px 10px;
    width:130px;
    font-size:12px;
    color:#dddddd;
    }
#suckerfishnav li ul ul {
    margin:-21px 0 0 150px;
    }
#suckerfishnav li li:hover {
    background:#9C1F1B;
    }
#suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover a {
    color:#dddddd;
    }
#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {
    color:#dddddd;
    }
#suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {
    color:#dddddd;
    }
#suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul {
    left:-999em;
    }
#suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul {
    left:auto;
    background:#444444;
    }
#suckerfishnav li:hover, #suckerfishnav li.sfhover {
    background:#DA0909;
    }

Implementation

Note: the following does not apply if you are using one of our dropdown menu plugins for WordPress.
The CSS above will work on any unordered list with an ID of #suckerfishnav, ie:

<ul id="suckerfishnav" class="sf-menu">
<li><a href="">Tomato</a></li>
<li><a href="">Capsicum</a></li>
<li><a href="">Cucumber</a></li>
</ul>

Note: This is a very old tool I created a long time ago. It is however very popular and seems to work well for those who use it.