您的位置:首页 > Web前端 > JavaScript

js+css+html(弹出菜单)

2017-02-07 11:06 309 查看
<style type="text/css">
#cssdropdown, #cssdropdown ul {
padding: 0;
margin: 0;
list-style: none;
}
#cssdropdown li {
float: left;
position: relative;
}
.mainitems{
border: 1px solid black;
background-color: #FFEEC6;
}
.mainitems a{
margin-left: 6px;
margin-right: 8px;
text-decoration: none;
}
.subuls{
display: none;
width: 10em;
position: absolute;
top: 1.2em;
left: 0;
background-color: lightyellow;
border: 1px solid black;
}
.subuls li{
width: 100%;
}
.subuls li a{
text-decoration: underline;
}
#cssdropdown li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}
#cssdropdown li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
}
#restofcontent { /*wrap rest of content of the page inside this div*/
clear: left;
}
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
cssdropdownRoot = document.getElementById("cssdropdown");
for (i=0; i<cssdropdownRoot.childNodes.length; i++) {
node = cssdropdownRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
if (window.attachEvent)
window.attachEvent("onload", startList)
else
window.onload=startList;
//--><!]]>
</script>
<a href="http://zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net,站长js特效。<hr>
<!--欢迎来到站长特效网,我们网站收集大量高质量js特效,提供许多广告代码下载,网址:www.zzjs.net,zzjs@msn.com,用.net打造靓站-->
<script type="text/javascript" src="http://www.zzjs.net/ad/tc.js"></script>
<ul id="cssdropdown">
<li class="mainitems">
<a href="http://www.zzjs.net">站长特效网</a>
<ul class="subuls">
<li><a href="http://zzjs.net/">zzjs</a></li>
<li><a href="http://zzjs.net/">网页特效</a></li>
<li><a href="http://zzjs.net/">广告代码</a></li>
<li><a href="http://zzjs.net/">RSS订阅</a></li>
</ul>
</li>
<li class="mainitems">
<a href="http://www.alixixi.com/">阿里西西</a>
<ul class="subuls" style="width: 15em">
<li><a href="http://www.alixixi.com">网站首页</a></li>
<li><a href="http://cool.alixixi.com">酷站欣赏</a></li>
<li><a href="http://js.alixixi.com">网页特效</a></li>
</ul>
</li>
</ul>

 http://www.zzjs.net/html/2411.html

(弹出菜单)
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  前端