[TYPO3] LONG: help ! how to get css drop down menus working in typo3 on firefox and internet explorer?

dave typo typothree at gmail.com
Fri Apr 20 14:26:40 CEST 2007

Hello all, I have struggled with drop down menus in typo3. So thank
you all in advance for your input and experience.

How can i get a css based drop down menu to work in typo3? It works
completely fine on a regular html page, but once the page is within a
typo3 site the dropdown menu no longer works when a user rolls over
the visible list (the dropdown menu does still work in opera, but not
in firefox or in internet explorer)

is there any code that needs to be placed within typo3 to get the css
dropdown rollovers to work? Or is it impossible to use css-based drop
down menus within typo3?

what I have is a list like this:

<div id="total">
         <ul id="nav">
                    <li class="middle"><a href="#">Resources</a>
                           <li><a href="">Annual Report</a></li>
                           <li><a href="">Galleries</a></li>
                           <li><a href="">Fact Sheet</a></li>
                           <li><a href="">Reports</a></li>
                           <li><a href="">Financial Reports</a></li>


and then css controlling it (which is placed in the header, but I have
written it here second for ease of explanation:)


#total {
/*this defines the total look of the menu section */
font-family:Arial, Helvetica, sans-serif;
background:url(background.gif) repeat-x;


ul {
/*this makes it a horizontal menu and removes bullets */
  padding: 0;
  margin: 0;
  list-style: none;


/* this is a li class that defines a middle element within the  menu */
  float: left;
  position: relative;
  background:url(tabnohover.gif) repeat-x;
  padding: 10px 10px 10px 10px;
  border-right:solid 1px #000;
/* and its hover property */
.middle:hover, .middle.over {
 background:url(tabhover.gif) repeat-x;
  float: left;
  position: relative;

.middle  ul {
padding:10px 10px 10px 10px;
  /*   this hides the block of submenu items underneith the main li items */
  display: none;
  position: absolute;
  top: 3.1em;
  left: -1px;
  background:url(tabdrop.gif) bottom left no-repeat;
  border-right:1px solid #000;

.middle:hover ul, .middle.over ul {
display: block;
/* when hovering over the middle div of the <li>the ul that
corresponds underneath appears because the display:none property
switches to display:block */



the .over property of the css allows the rollovers to work via an
external javascript file.

this works on a regular page, but not on a typo3 page.

the hovers of the middle li property works both in firefox and
internet explorer WITHIN Typo3, but the block of ul beneath the li

So, how can I get the

.middle.hover ul {

to work within typo3?? I have no idea why it's not working.

thank you for all the help all of you have given me over the past couple months.



I am open to alternatives, but the hypernavigation exetension does not
yeild the correct functionality, nor the look that I am aiming for...

I have also tried the tutorial on
http://www.mcuniverse.com/Horizontal-Bulletlist-Menu.57.0.html but
could not get it working either

THANK YOU again for reading this long email

More information about the TYPO3-english mailing list