Suckerfish Drop down menu - how to format it

Posted on 2006-06-15
Last Modified: 2008-03-04
I'm looking to use the Suckerfish Dropdown menu:

But, I want to make the bare-bones example:

look something like this one (but with only one level):

Is it hard to format it to look like the pretty one?
Is there any easy way to do?   thanks............

Question by:MikeMCSD
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
LVL 10

Accepted Solution

jagadeesh_motamarri earned 500 total points
ID: 16911425 is the modified code for single level -



<title>Suckerfish Dropdowns - Perciformes!</title>

<style type="text/css">

body {
      font: 78%/1.5 arial, helvetica, serif;
      background: white url(bgbaba.gif);
      text-align: center;
      padding: 0;
      margin: 2em;

#container {
      width: 36em;
      background: #F4ECD9;
      text-align: left;
      border: 1px solid #eda;
      margin: 0 auto;

p {
      background: url(remorabg.gif) center no-repeat;
      margin: 1em 2em;

p#smurf {
      background: transparent;
      font-style: italic;
      text-align: center;
      font-weight: bold;
      color: #7C6240;

#smurf strong {
      font-size: 1.2em;
      color: black;

h1 {
      height: 108px;
      background: url(perciformes3.gif) bottom center no-repeat;
      text-indent: -999em;
      margin: 1em 0 0 0;

#nav, #nav ul {
      float: left;
      width: 36em;
      list-style: none;
      line-height: 1;
      background: white;
      font-weight: bold;
      padding: 0;
      border: solid #eda;
      border-width: 1px 0;
      margin: 0 0 1em 0;

#nav a {
      display: block;
      width: 10em;
      w\idth: 6em;
      color: #7C6240;
      text-decoration: none;
      padding: 0.25em 2em;

#nav a.daddy {
      background: url(rightarrow2.gif) center right no-repeat;

#nav li {
      float: left;
      padding: 0;
      width: 10em;

#nav li ul {
      position: absolute;
      left: -999em;
      height: auto;
      width: 14.4em;
      w\idth: 13.9em;
      font-weight: normal;
      border-width: 0.25em;
      margin: 0;

#nav li li {
      padding-right: 1em;
      width: 13em

#nav li ul a {
      width: 13em;
      w\idth: 9em;

#nav li ul ul {
      margin: -1.75em 0 0 14em;

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
      left: -999em;

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
      left: auto;

#nav li:hover, #nav li.sfhover {
      background: #eda;

#content {
      clear: left;

#content a {
      color: #7C6240;

#content a:hover {
      text-decoration: none;

#scaffolding {
      height: 70px;
      background: white url(/images/header_bg.gif) no-repeat;
      border: solid #eda;
      border-width: 1px 0 0 0;
      margin: 1em 0 0 0;

#scaffolding a {
      text-decoration: none;
      text-indent: -999em;
      display: block;
      height: 70px;
      background: url(/images/hdlogo_flip2.gif) no-repeat;
      background-position: 181px 0;

#scaffolding a:hover {
      background-position: 181px -70px;


<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
      var sfEls = document.getElementById("nav").getElementsByTagName("LI");
      for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                  this.className+=" sfhover";
            sfEls[i].onmouseout=function() {
                  this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
if (window.attachEvent) window.attachEvent("onload", sfHover);




<div id="container">
<p id="smurf">Welcome to the universe of Perciformes - perch-like fish that include the world famous <strong>Suckerfish</strong></p>

<ul id="nav">

      <li><a href="#">Percoidei</a>
                  <li><a href="#" >Remoras</a></li>
                  <li><a href="#" >Tilefishes</a></li>
                  <li><a href="#" >Bluefishes</a></li>
                  <li><a href="#" >Tigerfishes</a></li>

      <li><a href="#">Anabantoidei</a>
                  <li><a href="#" >Climbing perches</a></li>
                  <li><a href="#" >Labyrinthfishes</a></li>
                  <li><a href="#">Kissing gouramis</a></li>
                  <li><a href="#">Pike-heads</a></li>
                  <li><a href="#">Giant gouramis</a></li>

      <li><a href="#">Gobioidei</a>
                  <li><a href="#">Burrowing gobies</a></li>
                  <li><a href="#">Dartfishes</a></li>
                  <li><a href="#">Eellike gobies</a></li>
                  <li><a href="#">Gobies</a></li>

                  <li><a href="#">Loach gobies</a></li>
                  <li><a href="#">Odontobutidae</a></li>
                  <li><a href="#">Sandfishes</a></li>
                  <li><a href="#">Schindleriidae</a></li>
                  <li><a href="#">Sleepers</a></li>
                  <li><a href="#">Xenisthmidae</a></li>



<div id="content">
      <p>Hello. You have found an example page for <strong>Suckerfish Dropdowns</strong>. Under the hood you will find some nice structured HTML, a smattering of CSS and a teensy bit of JavaScript (that's just 12 lines of it). It's lightweight, it's accessible, it's cross-compatible.</p>
      <p>Suckerfish Dropdowns are brought to you by <a href="/ptg/">Patrick Griffiths</a>, <a href="">Dan Webb</a> and the letter C. To find out more about Suckerfish Dropdowns, check out the <a href="/articles/suckerfish/dropdowns/">article in HTML Dog</a>. To find out more about perch-like fishes, <a href="">give Google a try</a>.</p>

      <p>Something else that might (possibly) be of interest (maybe) is that this page has an <a href="">elastic layout</a>. Try increasing your browser's text size setting and watch that layout grow! It's just like those toys that expand when you put them in water. Only without the water. And with more HTML. And CSS. Oh forget it. It's not really like them at all.</p>
      <p id="scaffolding"><a href="" title="Go t'HTML Dog">Go on. Visit HTML Dog</a></p>




Lemme know there is something wrong

LVL 16

Author Comment

ID: 16912223
nice!  thanks Jags
LVL 10

Expert Comment

ID: 16912239

Thank You,

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
jQuery slideToggle one div at a time instead of all independently 33 80
CSS: How do I override in-line styling 11 29
GET error with Font Awesome 3 29
tiled banner 2 12
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question