IE6上没有显示下拉菜单(Drupal,superfish)

时间:2013-09-16 08:14:48

标签: drupal internet-explorer-6 html-select superfish

我被指派重拍一个Drupal网站,我必须在其中实现一个下拉菜单。 它适用于IE8,Chrome,Firefox,但不适用于IE6(该网站的大多数用户使用IE6 ......) 模块是Superfish,这里有一些代码:

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

这是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;}   

其他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;
}

我猜不是所有的东西都有用,但我找到了一些解决方案,其中附近div /类的样式(属性'position','display')非常重要。

我的问题是: 我如何让这个菜单出现在IE6上?这只是造型问题吗?我必须制作一些JavaScript吗?

1 个答案:

答案 0 :(得分:0)

我假设superfish是suckerfish的分离... suckerfish需要javascript for ie6支持,所以我假设你需要相同的。你去了superfish文档页面,有一些脚本列在模块中。我会关注那些。基本上,你需要ie6假装悬停在元素上,以显示你的菜单