[TYPO3] Css drop down menu problem

[Oliver Rowlands]

Hi Loek,

Gideon's HTML code is correct and validates, this 'conditional comment' 
technique is used to bypass IE's appalling handling of the :hover CSS 
selector. Have a look at the main navigation on the following site for 
an example:

http://www.spannerworks.com

As far as I can remember it works in IE5.5+, Firefox, Opera, Safari & 
Konqueror without needing any JS.

Gideon, try the following TypoScript:

lib.mainmenu = HMENU
lib.mainmenu {
   entryLevel = 0
   1 = TMENU
   1 {
     wrap = <ul> | </ul>
     noBlur = 1
     expAll = 1
     NO {
       ATagTitle.field = title
       stdWrap.htmlSpecialChars = 1
       ATagBeforeWrap = 1
       linkWrap = | <!--[if IE 7]><!-->
       afterWrap = | <!--<![endif]--><!--[if lte IE 
6]><table><tr><td><![endif]-->
       wrapItemAndSub = <li> | <!--[if lte IE 
6]></td></tr></table></a><![endif]--></li>
     }
     ACT < .NO
     ACT = 1
     ACT {
       wrapItemAndSub = <li class="active"> | </li>
     }
   }
   2 < .1
}

Hope this helps,

Oliver

Loek Hilgersom wrote:
> Hi Gideon,
> 
> To begin with, your desired code doesn't seem to be correct: the second a-tag
> doesn't get closed for most browsers except IE7 (and for old IE's it gets closed
> later on).
> Maybe better correct that first, then I guess it's a matter of diligent work to
> put all the bits and pieces in the right places in your typoscript. It looks
> like you're pretty close to a solution.
> 
> Loek
> 
> 
> Gideon So wrote:
>> Hi all,
>>
>> 	I woould like to make a css drop down menu like the following:
>>
>> <ul><li><a href="#">Home</a></li> </ul>
>>
>> <ul> <li><a href="#">Drop-down 1<!--[if IE
>> 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
>> <ul> <li><a href="#">Sublink 11</a></li>
>>      <li><a href="#">Sublink 12</a></li>
>>      <li><a href="#">Sublink 13</a></li>
>>      <li><a href="#">Sublink 14</a></li>
>>      <li><a href="#">Sublink 15 with a lot of text so that entry
>> hasseveral lines</a></li> </ul><!--[if lte IE
>> 6]></td></tr></table></a><![endif]--> </li>
>> </ul>
>>
>> 	I have my typoscript like the following
>>
>> lib.mainmenu = HMENU
>> lib.mainmenu {
>>     wrap = |
>>     entryLevel = 0
>> 1 = TMENU
>> 1 {
>>   wrap = <ul> | </ul>
>>   expAll = 1
>>   NO.ATagTitle.field = subtitle//title
>>   NO.wrapItemAndSub = <li> | </li>
>>
>> IFSUB = 1
>> IFSUB {
>> 	ATagTitle.field = subtitle//title
>> 	wrapItemAndSub = <li> | </li>
>> 	allWrap = | <!--<![endif]-->
>> 	linkWrap = |<!--[if IE 7]><!-->
>> 	ATagBeforeWrap = 1
>> }
>> }
>> 2 = TMENU
>> 2 {
>>     wrap = <table><tr><td><ul> | </ul></td></tr></table><!--[if lte IE
>> 6]></a><![endif]-->
>>     expAll = 1
>>     NO.ATagTitle.field = subtitle//title
>>     NO.wrapItemAndSub = <li> | </li>
>>     IFSUB = 1
>>     IFSUB {
>>            wrapItemAndSub = <li> | </li>
>>            allWrap = | <!--<![endif]-->
>>            linkWrap = |<!--[if IE 7]><!-->
>>            ATagBeforeWrap = 1
>>            ATagParams = class="hide"
>> }
>> }
>> }
>> }
>>
>> 	But I don't have the desire result menu. Can anybody help??
>>
>> 	P.S the output:
>>
>> <ul><li><a href="index.php?id=3">home</a></li>
>>
>> <li><a href="index.php?id=4">Drop-down1 <!--[if IE
>> 7]><!--></a><!--<![endif]--><table><tr><td>
>> <ul><li><a href="index.php?id=15">Sublink 11<!--[if IE
>> 7]><!--></a><!--<![endif]--></li>
>>     <li><a href="index.php?id=22">Sublink 12</a></li>
>>     <li><a href="index.php?id=16">Sublink 13</a></li>
>>     <li><a href="index.php?id=17">Sublink 14</a></li>
>>     <li><a href="index.php?id=23">Sublink
>> 15</a></li></ul></td></tr></table><!--[if lte IE 6]></a><![endif]--></li>
>>
>> Gideon


-- 
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