< html >
< head >
< meta charset= "gbk" / >
< title > shoppingCar < / title >
< style >
< H1 > content ul {< / H1 > display:flex;
flex-direction:row;
justify-content:center;
list-style:none;
height:36px;
}
< H1 > content ul li {< / H1 > line-height:36px;
width:100px;
background-color:rgb (63,117,160);
background-position:0-36px;
}
cursor:pointer;
}
< H1 > content. Sub {< / H1 > width:350px;
font-size:15px;
background-color:grey;
text-align:center;
display:none;
}
.sub span {
margin-right:5px;
}
< / style >
< / head >
< body >
< div id="content" >
- Home of webmasters
- Industry Information < div class="sub" style="display:none;" >
Industry Trends acquisition financing
Portal Trends search engine
< / div > - webmaster online < div class="sub" style="display:none;" >
webmaster reports recommendation
span > webmaster gathering War commander meeting
< / div > - website operation < div class="sub"style="display:none;">
site building experience Planning profit
span > search optimization website promotion
< / div > - Design online < div class="sub" style="display:none;" >
recommendation WEB Standard
span > Video processing Design activity
< / div > - Network programming < div class="sub" style="display:none;" >
ASP programming PHP programming
.NET programming XML programming
< / div > - Server < div class="sub" style="display:none;" >
WEB Server ftp Server
DNS Server linux Server
< / div >
< / div >
< script type= "text/javascript" >
var get= {
byId:function (elem) {
return document.getElementById(elem);
},
byClass:function (sClass,ele) {
var cla=[];
var reClass = new RegExp("(^| )" + sClass + "( |$)");
var allClass=this.byTagName("*",ele);
for(var i=0;i<allClass.length;iPP)reClass.test(allClass[i].className)&&cla.push(allClass[i])
return cla
},
byTagName:function (obj,ele) {
return (document | | obj) .getElementsByTagName (ele);
}
}; / / Encapsulation
window.onload=init;
function init () {
var content=get.byId ("content");
var nav=get.byTagName (content,"li");
console.log (nav);
var cls=get.byClass ("sub",content);
console.log (cls);
var timer=null;
sub1=null;
var iTuno;
for (iSomei < nav.length;iPP) {
navi] .onMouseover = function () {
for (iBoth I < cls.length;iPP) {
cls[i].style.display="none";
} var sub1=null;
var timer=null;
sub1=get.byClass ("sub",this);
console.log (sub1);
console.log (timer);
sub1.style.display= "block";
content.offsetWidth-this.offsetLeft > cls.offsetWidth?
cls.style.left=this.offsetLeft+"px":cls.style.right=0;
sub.onmouseover=function (event) {
(event | | window.event) .cancleBubble = true;
clearTimeout (timer);
}
}
}
}
< / script >
< / body >
< / html >
sub1.style.display= "block"; this step always goes wrong and asks for advice