ปัญหาของ IE7 แสดง css ไม่ถูกต้องทำให้ dropdown menu แสดงอยู่ด้านหลังภาพหรือ slide ตัวอย่างด้านล่างเป็นวิธีแก้ไขปัญหา โดยคุณ Gareth จากเว็บไซต์ www.scriptygoddess.com ตัวอักษรสีแดงเป็นการแก้ปัญหานี้ครับ

This is an extract from my template.css file.

/** @MENU **/

/** @SUCKERFISH **/

/* Mainlevel */
ul.menu-suckerfish {
z-index: 1;        /* เพิ่ม */
float: left;
border-right: 1px solid #404040;
margin: 0;
background: none;
padding: 0;
list-style: none;
}

ul.menu-suckerfish li {
float: left;
display: inline;
background: none;
margin: 0;
padding: 0;
}

ul.menu-suckerfish a:link,
ul.menu-suckerfish a:visited {
display: block;
border-right: 1px solid #000000;
border-left: 1px solid #404040;
margin: 0;
padding: 3px 1.5em;
color: #ffffff;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
}

ul.menu-suckerfish a:hover {
background-color: #404040;
}

ul.menu-suckerfish li.active a {
background-color: #404040;
}

/* Sublevel */
ul.menu-suckerfish ul {
position: absolute;
left: -999em;
z-index: 2;   /* เพิ่ม */
margin: 0;
padding: 0;
list-style: none;
}

/* Other containers */
ul.menu-suckerfish ul ul {
margin: -26px 0 0 184px;
z-index: 3;
}

/* Items */
ul.menu-suckerfish ul li {
position: relative;
width: 185px;
margin: 0;
background: none;
padding: 0;
}

ul.menu-suckerfish ul a:link,
ul.menu-suckerfish ul a:visited {
display: block;
border-top: 1px solid #366999;
border-right: none;
border-bottom: 1px solid #162c40;
border-left: 1px solid #162c40;
background: #284d73 none;
color: #cfdbe5;
padding: 4px 10px;
font-size: 0.9em;
font-weight: normal;
text-decoration: none;
height: 1%;
}

ul.menu-suckerfish ul a:hover,
ul.menu-suckerfish ul li.parent a:hover,
ul.menu-suckerfish ul li.parent li.parent a:hover {
border-top: 1px solid #1f3d59;
background-color: #1f3d59;
color: #ffffff;
}

/* Active */
ul.menu-suckerfish ul li.active a,
ul.menu-suckerfish ul li.active li.active a,
ul.menu-suckerfish ul li.active li.active li.active a {
font-weight: bold;
color: #ffffff;
}

/* Clear active */
ul.menu-suckerfish ul li.active li a,
ul.menu-suckerfish ul li.active li.active li a {
font-weight: normal;
color: #cfdbe5;
}

/* Children expanded */
ul.menu-suckerfish ul li.parent a,
ul.menu-suckerfish ul li.parent li.parent a {
background: #284d73 url("../images/suckerfish-expand.png") no-repeat 95% center;
padding-right: 10px;
}

/* Clear children expanded */
ul.menu-suckerfish ul li.parent li a,
ul.menu-suckerfish ul li.parent li.parent li a {
background-image: none;
}

/* Rollover actions */
ul.menu-suckerfish li:hover ul,
ul.menu-suckerfish li.hover ul,
ul.menu-suckerfish li:hover ul li:hover ul,
ul.menu-suckerfish li.hover ul li.hover ul,
ul.menu-suckerfish li:hover ul li:hover ul li:hover ul,
ul.menu-suckerfish li.hover ul li.hover ul li.hover ul {
left: auto;
}

ul.menu-suckerfish li:hover ul ul,
ul.menu-suckerfish li.hover ul ul,
ul.menu-suckerfish li:hover ul li:hover ul ul,
ul.menu-suckerfish li.hover ul li.hover ul ul,
ul.menu-suckerfish li:hover ul li:hover ul li:hover ul ul,
ul.menu-suckerfish li.hover ul li.hover ul li.hover ul ul {
left: -999em;
}

ul.menu-suckerfish,
ul.menu-suckerfish li li {
clear: left;
}