[TYPO3] Typo3 and suckerfish dropdown menu

[Brian Bendtsen]

HI

I want to use the suckerfish dropdown menu on my Typy3 site, Im having 
problems with my first level since its not (as it should be) vertical.

I have a feeling the problem is with the Typoscript.

The suckerfish dropdown menu is made of lists:

<ul id="nav">
   <li><a href="">Sunfishes</a>
     <ul id="level1">
       <li id="sel"><a href="">Blackbanded sunfish</a></li>
       <li><a href="">Shadow bass</a></li>
       <li><a href="">Ozark bass</a></li>
       <li><a href="">White crappie</a></li>
		</ul>
	</li>

   <li><a href="">Grunts</a>
     <ul id="level1">
       <li><a href="">Smallmouth grunt
         </a></li>
       <li><a href="">Burrito</a></li>
       <li><a href="">Pigfish</a></li>
     </ul>
   </li>

   <li><a href="">Remoras</a>
     <ul id="level1">
       <li><a href="">Whalesucker</a></li>
       <li><a href="">Marlinsucker</a></li>
       <li><a href="">Ceylonese remora</a></li>
       <li><a href="">Spearfish remora</a></li>
       <li><a href="">Slender suckerfish</a></li>
     </ul>
   </li>
</ul>

My TS setup so far:

# Menu 1 cObject
lib.menu_1 = HMENU
lib.menu_1.1 = TMENU
lib.menu_1.1 {
   expAll = 1
   NO.ATagTitle.field = title
   wrap = <UL id="nav"> | </UL>
   NO.wrapItemAndSub = <li>|</li>
   ACT = 1
   ACT.wrapItemAndSub = <li id="sel">|</li>
   ACT.ATagTitle.field = title
   }
  lib.menu_1.2 = TMENU
  lib.menu_1.2 {
  expAll = 1
  NO.ATagTitle.field = title
  wrap = <UL id=level1> | </UL>
  NO.wrapItemAndSub = </LI> | </LI>
  ACT = 1
  ACT.wrapItemAndSub = <LI id=sel> | </LI>
  ACT.ATagTitle.field = title
  }
}

my CSS:

#nav 		{ padding: 0; margin: 0; list-style: none; font-family: Verdana, 
Arial, Helvetica, sans-serif; font-size: 10px;}
#nav ul		{ padding: 0; margin: 0; list-style: none;}
#nav li 	{ float: left; position: relative; width: 10em;}

/* LINKS */

#nav a 		{text-decoration: none;color: #555;}
#nav a:hover	{color: #e3e3e3;}

/* LEVEL ONE */

#level1 		{background-color: #e3e3e3;}
#level1 a	 	{text-decoration: none;color: #555;}
#level1 a:hover {color: #000;}
li ul 			{ display: none;  position: absolute;   top: 1em;  left: 0;  }
li > ul 		{ top: auto;	left: auto;	}
li:hover ul, li.over ul{ display: block; }

/Brian Bendtsen