https://stackoverflow.com/questions/18823256
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russiani'm assuming superfish is a spin off of suckerfish...suckerfish required javascript for ie6 support, so i'll assume that you need the same. of you go to superfish documentation page, there are scripts listed as included with the module. i would look to into those. essentially, you need ie6 to fake hover on the elements, to show your menu
Dropdown menu not showing up on IE6 (Drupal, superfish)
-
28-06-2022 - |
Question
I've been assigned to remake a Drupal website in which i have to implement a dropdown menu. It works fine on IE8,Chrome,Firefox but not in IE6 (and most users of this site use IE6...) The module is Superfish, here is some code:
<body class="homepage">
<div id="global">
<div id="header">
<div id="header-content">
<div class="fil-ariane">You are here : Home</div>
<div class="search">search stuff</div>
<div id="block-superfish-1"
class="block block-superfish contextual-links-region">
<div
class="contextual-links-wrapper contextual-links-processed">
<div class="content">
<ul id="superfish-1"
class="menu sf-menu sf-menu-menu-header sf-horizontal sf-style-sna_superfish sf-total-items-3 sf-parent-items-1 sf-single-items-2 nav superfish-processed">
<li id="menu-477-1"
class="first odd sf-item-1 sf-depth-1 sf-no-children">
<li id="menu-501-1"
class="middle even sf-item-2 sf-depth-1 sf-no-children">
<li id="menu-983-1"
class="last odd sf-item-3 sf-depth-1 sf-total-children-3 sf-parent-children-0 sf-single-children-3 menuparent">
<a class="sf-depth-1 menuparent"
href="LIEN_homepage/#">USEFUL LINKS</a>
<ul>
<li id="menu-986-1"
class="first odd sf-item-1 sf-depth-2 sf-no-children">
<a class="sf-depth-2" href="LINK1">text_link1</a>
</li>
<li id="menu-985-1"
class="middle even sf-item-2 sf-depth-2 sf-no-children">
<a class="sf-depth-2" href="LINK2">text_link2</a>
</li>
<li id="menu-984-1"
class="last odd sf-item-3 sf-depth-2 sf-no-children">
<a class="sf-depth-2" href="LINK3">text_link3</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
And here's the CSS:
body{
width:100%;
height:100%;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:11px;
color:#333333;
background-color:#e2dad0;
}
.homepage{background-color:#ffffff;}
#global{
width:100%;
height:100%;
margin:0 auto;
}
#header{
width:100%;
min-width:880px;
height:29px;
max-height:30px;
background:#706e67;
color:#ffffff;
position:fixed;
z-index:10;
top:0px;
}
#header a{font-weight:bold;color:#ffffff;text-decoration:none}
#header a:hover{text-decoration:none;}
#header-content{width:100%;margin:0 auto;}
#header-content .fil-ariane{float:left;padding-top:9px;padding-left:8px;}
#header-content .nav{float:right;margin-right:129px !important;margin-right:67px;}
#header-content .nav ul{display:inline;}
#header-content .nav ul li{display:inline;}
#header-content .nav a,span{vertical-align:middle;font-weight:bold;}
.link-rss{width:14px;height:14px;background:url("../img/common/pictos/rss.gif") left top no-repeat;overflow:hidden;text-indent:-500px;display: inline-block;vertical-align:middle}
#header-content .search{float:right;width:125px;padding-top:2px;overflow:hidden;position:absolute;right:2px;}
#header-content .search form .content{width:123px;height:24px;background:url("../img/common/header/bkgInputText.gif") right top no-repeat;}
#header-content .search .input-submit{width:25px;height:24px;background:url("../img/common/header/btSearch.gif") left top no-repeat;overflow:hidden;margin:0;padding:0;border:0 none;text-indent:-50px;letter-spacing:+100px;vertical-align:top;cursor:pointer}
#header-content .search .input-text{padding:0 0 0 5px;border:0 none;width:90px;height:24px;line-height:24px;color:#826041;vertical-align:baseline;font-size:10px;background-color:#f1f1f0;}
OTHER CSS:
.sf-menu span{
display:block;
position:relative;
}
.sf-menu.sf-style-sna_superfish {
float: left;
margin-bottom: 1em;
padding: 0;
}
.sf-menu.sf-style-sna_superfish.sf-navbar {
width: 100%;
}
.sf-menu.sf-style-sna_superfish ul {
padding-left: 0;
}
.sf-menu.sf-style-sna_superfish a, .sf-menu.sf-style-sna_superfish span {
padding: 0.75em 1em;
}
.sf-menu.sf-style-sna_superfish a.sf-with-ul {
padding-right: 2.25em;
}
.sf-menu.sf-style-sna_superfish.rtl a.sf-with-ul {
padding-left: 2.25em;
padding-right: 1em;
}
.sf-menu.sf-style-sna_superfish.sf-navbar a {
border: 0;
}
.sf-menu.sf-style-sna_superfish span.sf-description {
color: #f1f1f1;
display: block;
font-size: 0.8em;
line-height: 1.5em;
margin: 5px 0 0 5px;
padding: 0;
}
.sf-menu.sf-style-sna_superfish li,
.sf-menu.sf-style-sna_superfish li li,
.sf-menu.sf-style-sna_superfish li li li,
.sf-menu.sf-style-sna_superfish.sf-navbar {
margin:0px;
background: #706E67;
}
.sf-menu.sf-style-sna_superfish li:hover,
.sf-menu.sf-style-sna_superfish li.sfHover,
.sf-menu.sf-style-sna_superfish li.active a,
.sf-menu.sf-style-sna_superfish a:focus,
.sf-menu.sf-style-sna_superfish a:hover,
.sf-menu.sf-style-sna_superfish a:active,
.sf-depth-1.menuparent.nolink span:hover,
.sf-menu.sf-style-sna_superfish.sf-navbar li li {
display:block;
float:left;
background: #666459;
color: #ffffff;
}
.sf-menu.sf-style-sna_superfish.sf-navbar li ul {
background-color: #008ad2;
}
.sf-menu.sf-style-sna_superfish.sf-navbar li ul li ul {
background-color: transparent;
}
.sf-menu.sf-style-sna_superfish ul.sf-megamenu li.sf-megamenu-wrapper ol,
.sf-menu.sf-style-sna_superfish ul.sf-megamenu li.sf-megamenu-wrapper ol li {
margin: 0;
padding: 0;
}
.sf-menu.sf-style-sna_superfish ul.sf-megamenu li.sf-megamenu-wrapper a.menuparent {
font-weight: bold;
}
.sf-menu.sf-style-sna_superfish ul.sf-megamenu li.sf-megamenu-wrapper ol li.sf-megamenu-column {
display: inline;
float: left;
width: 12em;
}
.sf-menu.sf-style-sna_superfish.rtl ul.sf-megamenu li.sf-megamenu-wrapper ol li.sf-megamenu-column {
float: right;
}
.sf-menu.sf-style-sna_superfish li.sf-parent-children-1 ul.sf-megamenu {
width: 12em;
}
.sf-menu.sf-style-sna_superfish li.sf-parent-children-2 ul.sf-megamenu {
width: 24em;
}
.sf-menu.sf-style-sna_superfish li.sf-parent-children-3 ul.sf-megamenu {
width: 36em;
}
.sf-menu.sf-style-sna_superfish li.sf-parent-children-4 ul.sf-megamenu {
width: 48em;
}
.sf-menu.sf-style-sna_superfish li.sf-parent-children-5 ul.sf-megamenu {
width: 60em;
}
.sf-menu.sf-style-sna_superfish li.sf-parent-children-6 ul.sf-megamenu {
width: 72em;
}
.sf-menu.sf-style-sna_superfish li.sf-parent-children-7 ul.sf-megamenu {
width: 84em;
}
.sf-menu.sf-style-sna_superfish li.sf-parent-children-8 ul.sf-megamenu {
width: 96em;
}
.sf-menu.sf-style-sna_superfish li.sf-parent-children-9 ul.sf-megamenu {
width: 108em;
}
.sf-menu.sf-style-sna_superfish li.sf-parent-children-10 ul.sf-megamenu {
width: 120em;
}
Not everything's useful i guess but i found some solutions in which the style (properties 'position','display') of the nearby divs/classes was important.
My questions are: how can i make that menu appear on IE6 ? Is it only a matter of styling? Do i have to make some javascript ?
Solution
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
