Dropdown Menu CSS Generator

This is a very old tool I built many years ago. It is still very popular, so I am leaving it here for those who still wish to use it.

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.

Premade Designs:

Navigational type:

(show extra options »)

WordPress Optomised:

Current Page Item Background Colour:

enter a valid HEX colour value

Current Page Parent/Ancestor Background Colour:

enter a valid HEX colour value

Current Page Item Indicator Colour:

enter a valid HEX colour value

Current Page Item Indicator Symbol

Current Page Parent Indicator Symbol

Top Level Menu items

These options modify the top level menu items.

Background image:

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

Background colour:

enter a valid HEX colour value

Background colour on hover:

enter a valid HEX colour value

Text colour:

enter a valid HEX colour value

Text colour on hover:

enter a valid HEX colour value

Font size:

enter a font size in PXs

Font family:

choose a font family

(show extra options »)

Font weight:

choose a font weight

Height:

enter measurement in PXs

Horizontal padding:

enter measurement in PXs

Border width:

Border colour:

enter a valid HEX colour value

Flyout Width:

Only applies to Vertical Flyout menus

Repeat background image:

Only applies to Vertical Flyout menus

Buttonized: (developmental)

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.

Background colour:

enter a valid HEX colour value

Background colour on hover:

enter a valid HEX colour value

Text colour:

enter a valid HEX colour value

Text colour on hover:

enter a valid HEX colour value

Font size:

enter a font size in PXs

Font family:

choose a font family

(show extra options »)

Font weight:

choose a font weight

Border colour:

enter a valid HEX colour value

Opacity:

enter an opacity between 0 and 1

Vertical padding:

enter vertical padding in PXs

Border width:

enter a border width in PXs

Width:

enter a width in PXs

Flyout direction:

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

<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.