我正在开发一个HTML静态网站。我差不多做了一切。最后,我需要有下拉菜单。我尝试添加一些额外的代码来下载菜单。但是,它正在影响我现有的风格。请有人帮忙修改我的代码以获得dropmenu。
代码: http://www.jsfiddle.net/mohamedsaligh/mkYrt/
确实帮助。
谢谢:)
答案 0 :(得分:2)
对于类似的东西,我建议使用jQuery。它允许您立即创建弹出/下拉菜单。
答案 1 :(得分:0)
这是您的代码编辑。这是一个开始而不是100%但最多有4层。 http://www.jsfiddle.net/JaLnp/1/
javascript适用于无法在链接外处理css:hover命令的Internet Explorers。
/* menu setup */
#menu, #menu ul {
padding: 0px;
margin: 0px;
list-style: none;
}
#menu a {
display: block;
text-decoration:none;
width: auto;
color:#ffffff;
background-color: #790808;
}
#menu li {
margin-right: 2.5px;
margin-left: 2.5px;
padding:5px;
float: left;
width: auto;
color:#ffffff;
background-color: #790808;
}
/* first level of menu drop down */
#menu li ul {
position: absolute;
width: 150px;
left: -999em;
}
#menu li:hover ul {
left: auto;
color:#ffffff;
background-color: #790808;
}
#menu li:hover ul, #menu li.sfhover ul {
left: auto;
color:#ffffff;
background-color: #790808;
}
#menu li ul ul {
margin: -1em 0 0 85px;
color:#ffffff;
background-color: #790808;
}
#menu, #menu ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
color:#ffffff;
background-color: #790808;
}
/* second level of menu drop down */
#menu li:hover ul ul, #menu li.sfhover ul ul {
left: -999em;
color:#ffffff;
background-color: #790808;
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul {
left: auto;
color:#ffffff;
background-color: #790808;
}
/* third level of menu drop down */
#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li.sfhover ul ul, #menu li.sfhover ul ul ul {
left: -999em;
color:#ffffff;
background-color: #790808;
}
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul, #menu li li li.sfhover ul {
left: auto;
color:#ffffff;
background-color: #790808;
}
/* forth level of menu drop down */
#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li:hover ul ul ul ul, #menu li.sfhover ul ul, #menu li.sfhover ul ul ul, #menu li.sfhover ul ul ul ul {
left: -999em;
color:#ffffff;
background-color: #790808;
}
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li li li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul, #menu li li li.sfhover ul, #menu li li li li.sfhover ul {
left: auto;
color:#ffffff;
background-color: #790808;
}
// drop down list functionality for Internet Explore
// IE does not support the :hover in anything but links
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);