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

Sun Apr 22 14:04:13 CEST 2007

Hi Dave,

I've implemented pure CSS drop-down menus in Typo3 using the 
'conditional comments' technique in order to bypass IE's ':hover' 
limitations. Have a look at the primary navigation (#primaryNavigation) 
on the following site:

http://www.spannerworks.com

The advantage of this technique is that it does not require JS at all.

As far as I can remember it works across the board in IE5.5+, Firefox, 
Opera & Safari.

Hope this helps,

Oliver

dave typo wrote:
> 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:
> <body>
> 
> <div id="total">
>         <ul id="nav">
>                    <li class="middle"><a href="#">Resources</a>
>                       <ul>
>                           <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>
>                      </ul>
>                   </li>
>        </ul>
> </div>
> 
> </body>
> 
> and then css controlling it (which is placed in the header, but I have
> written it here second for ease of explanation:)
> 
> <style>
> 
> #total {
> /*this defines the total look of the menu section */
> font-family:Arial, Helvetica, sans-serif;
> background:url(background.gif) repeat-x;
> height:33px;
> width:769px;
> font:bold;
> color:#FFFFFF;
> display:block;
> 
> }
> 
> 
> 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 */
> .middle{
> font-size:10px;
> font-weight:bold;
>  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 {
>  text-align:left;
> text-decoration:none;
> background:url(tabhover.gif) repeat-x;
> color:#009900;
>  float: left;
>  position: relative;
> }
> 
> .middle  ul {
> padding:10px 10px 10px 10px;
> width:120px;
>  /*   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 */
> }
> 
> /***************************************************/
> 
> </style>
> 
> 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
> property DOES NOT DISPLAY WITHIN Typo3.
> 
> So, how can I get the
> 
> .middle.hover ul {
> display.block;
> }
> 
> 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.
> 
> sincerely,
> 
> dave
> 
> p.s.
> I am open to alternatives, but the hypernavigation exetension does not
> yeild the correct functionality, nor the look that I am aiming for...
> 
> p.p.s
> 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

-- 
Oliver Rowlands
:: Liquid Light ::

E - oliver at liquidlight.co.uk
W - http://www.liquidlight.co.uk

T - 00 44 (0)845 6 58 88 35
F - 00 44 (0)845 6 58 44 35