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

Tyler Kraft headhunterxiii at yahoo.ca
Fri Apr 20 14:47:18 CEST 2007


Typo3 only puts out content so if you've constructed your menu correctly 
then it will work.

First check that the html is exactly the same as your static version, 
then check to make sure that the related css and javascript files are 
being included (actually included and that the path is right)



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


More information about the TYPO3-english mailing list