css submenu problems ie6 and ie7.

[Tieme]

Hello all.

i have a problem with ie 7 and ie 6.

in ie6 my submenu is not showing.

this is the html code for the menu:

<div class="mod_navigation block" id="placemainmenu" style="margin-top:10px; margin-bottom:10px;">
 Navigatie overslaan
      <ul class="level_1">
            <li class="active first">Home[*]Werkwijze
            <li class="submenu">Kosten
                  <ul class="level_2">
                        <li class="first">Overzicht[*]Pakket 1[*]Pakket 2[*]Pakket 3
                        <li class="last">Onderhoud[/list]
            [*]Portfolio
      <li class="last">Contact[/list]
  <a name="skipNavigation8" id="skipNavigation8" class="invisible"></a>
</div>

this is the css code.

.block{
      overflow: visible !important;
}

#placemainmenu{
      width:799px;
      height:44px;
      margin:0 0 12px;
      background: url(../tl_files/t-me/images/mainmenu.png) no-repeat;
}

#placemainmenu ul.level_1{
      width:760px;
      height:28px;
      float:left;
      display:inline;
      margin:6px 0 0;
      padding:0 0 0 7px;
}

#placemainmenu ul.level_1 li{
      height:28px;
      position:relative;
      float:left;
      display:inline;
      margin:0 5px 0 0;
}

#placemainmenu ul.level_1 li a,#placemainmenu ul.level_1 li a:link,#placemainmenu ul.level_1 li a:visited{
      height:22px;
      float:left;
      display:inline;
      padding:6px 20px 0;
      font-weight:bold;
      font-size:1.2em;
      color:#797979;
}

#placemainmenu ul.level_1 li.trail,#placemainmenu ul.level_1 li:hover,#placemainmenu ul.level_1 li.active{
      background:url(../tl_files/t-me/images/menu_left.png) no-repeat;
}

#placemainmenu ul.level_1 li.trail a,#placemainmenu ul.level_1 li:hover a,#placemainmenu ul.level_1 li:hover a:link,#placemainmenu ul.level_1 li:hover a:visited,#placemainmenu ul.level_1 li.active a{
      text-decoration:none;
      color:#4b4b4b;
      background:url(../tl_files/t-me/images/menu_right.png) no-repeat 100% 0;
}

#placemainmenu ul.level_1 a{
      text-align:left;
      border:none;
      background:none;
}

#placemainmenu ul.level_2{
      width:189px;
      left:0;
      position:absolute;
      display:none;
      margin:26px 0 0;z-index:1000;
}

#placemainmenu ul.level_2 li,#placemainmenu ul.level_2 li:hover{
      width:183px;
      height:28px;
      float:left;
      display:inline;
      padding:2px 0 0 6px;
      background:url(../tl_files/t-me/images/dropdown_back.png) no-repeat;
}

#placemainmenu ul.level_2 li.first,#placemainmenu ul.level_2 li.first:hover{
      width:183px;
      height:28px;
      padding:9px 0 0 6px;
      background:url(../tl_files/t-me/images/dropdown_top.png) no-repeat;
}

#placemainmenu ul.level_2 li.last,#placemainmenu ul.level_2 li.last:hover{
      width:183px;
      height:31px;
      padding:2px 0 0 6px;
      background:url(../tl_files/t-me/images/dropdown_bottom.png) no-repeat;
}

#placemainmenu ul.level_1 li.submenu:hover ul.level_2 li a,#placemainmenu ul.level_1 li.submenu:hover ul.level_2 li a:link,#placemainmenu ul.level_1 li.submenu:hover ul.level_2 li a:visited{
      width:159px;
      height:18px;
      float:left;
      display:inline;
      margin:0;
      padding:6px 9px 0;
      font-size:1.1em;
      color:#4b4b4b;
      text-transform:none;
      background:none;
}

#placemainmenu ul.level_1 li.submenu:hover ul.level_2 li a:hover,#placemainmenu ul.level_1 li.submenu ul.level_2 li a:hover,#placemainmenu ul.level_1 li.submenu ul.level_2 li active a{
      text-decoration:none;
      color:#fff;
      background:url(../tl_files/t-me/images/dropdown_hover.png) no-repeat;
}

#placemainmenu li:hover ul ul,#placemainmenu li li:hover ul ul{
      display:none;
}

#placemainmenu li:hover ul,#placemainmenu li li:hover ul{
      display:block;
}

#placemainmenu ul.level_1 ul.level_2 li.active{
      background:url(../tl_files/t-me/images/dropdown_active.png) no-repeat;
}

#placemainmenu ul.level_1 ul.level_2 li.active.first{
      background:url(../tl_files/t-me/images/dropdown_active_first.png) no-repeat;
}

#placemainmenu ul.level_1 ul.level_2 li.active.last{
      background:url(../tl_files/t-me/images/dropdown_active_last.png) no-repeat;
}

and in ie 7 the following code does not work.

.block {
   overflow: visible !important;
}

i hope someone can helpt me out with it.

[Tru]

Try this

.level_2 li {zoom:1; width:100%;}

Seriously, making a dropdown menu without any javascript is a bad idea... :|

[Tieme]

Try this

.level_2 li {zoom:1; width:100%;}

Seriously, making a dropdown menu without any javascript is a bad idea... :|

why is that a bad idea?

[Vera]

Because your website will not degrade gracefully. Any problem with javascript on the browser will brake your menu.

What I usually do is using some suckerfishy type of method and then to make sure it works in some minor browsers sometimes enhance that with javascript. That way your menu will always work :D

And this goes for anything! Take the catalog extension (v1). It uses filters that require javascript to work. A colleague of mine changed the templates so they would function without javascript, then added javascript to change the html fields and js events to make the filters work almost exactly the same way as originally designed. :lol: The big difference is that any browser without javascript will also understand what the forms do.

Another example is form validation. If you would rely on javascript to force the user to entire a well formed email address, then I will definitely show you something else You can use javascript to check client side, but enforce the rule in your server side scripting. :geek:

I do agree that it is a small audience that we try to facilitate, but it is good practice to have good html, good css and js only for non essential extra's.

Did I make any sense? I'm not feeling very well today :|

[Jorge]

i disagree with Vera a bit.. look through the notes posted in here, mobile spy Tieme, amatoc.com/articles/css_menu. Hope you'll find it useful