Dropdown Menu CSS Generator
Welcome to the Suckerfish multi-level CSS Generator. By modifying the options below, you can generate a restyled Suckerfish dropdown navigation above. You can copy and paste the CSS generated from the box further down the page.
Note: You need to upgrade to our premium service to modify some features.
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 {
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 menus 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>
Due to the inadequacies of older versions of Internet Explorer, it is advisable to download and integrate the “Suckerfish Javascript for Internet Explorer” code with your site. If you want your visitors to be able to access your menu with their keyboard, download the “Suckerfish Javascript for keyboard accessibility” code and include it too. Here’s is an example of the code used to include these two files into your web pages:
<script type="text/javascript" src="suckerfish_keyboard.js"></script>
<!--[if lte IE 7]>
<script type="text/javascript" src="suckerfish_ie.js"></script>
<![endif]-->WordPress Plugin
We have released a new version of our Multi-level Navigation plugin with an option in the admin panel to enter the CSS from this page to generate a menu with the same style as on this page within your WordPress site.
Support
We unfortunately don’t have time to provide free support for this service any longer, but please consider signing up for our Premium support service for menus.