我被指派重拍一个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吗?
答案 0 :(得分:0)
我假设superfish是suckerfish的分离... suckerfish需要javascript for ie6支持,所以我假设你需要相同的。你去了superfish文档页面,有一些脚本列在模块中。我会关注那些。基本上,你需要ie6假装悬停在元素上,以显示你的菜单