000000 | 码农工具

​x
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runcodex.com)</title> 
<style>
​
</style>
</head>
<body>
  <div class="ona">
  
  <div class="one">
    <div class="one-a" id="one-a" onmouseover="this.className='on'"
         onmouseleave="this.className=''" >
      <h3>
        全部商品分类
      </h3>
    </div>
    <div id="one-b" class="one-b">
        <div id="one-c" class="one-c">
          <ul>
          <div id="one-d" class="one-d"
              >
            <li>电脑</li>
           <!-- <div class="one-e">
              00000
            </div>-->
            </div>  
          </ul>
      </div>
    </div>
  </div>
  
  </div>
</body>
</html>

HTML

xxxxxxxxxx
 
window.onload=function(){
     var ona=document.getElementById("one-a");
     var onb=document.getElementById("one-b");
     ona.onmouseover=function(){onb.style.display="block";}
     ona.onmouseout=function(){onb.style.display="none";}
   };
/*window.onload=function(){
   var ono=document.getElemntByld("one-d");
   var ond=document.getElenmtByld("one-e");
  ono.onmouseover=function(){ond.style.display="block";}
  ono.onmouseout=function(){ond.style.display="none";}
}

JavaScript

xxxxxxxxxx
 
.ona{
  width:500px;
  height:400px;
  background-color:#DCEBF9;
}
.one{
  width:150px;
  height:41px;
  background-color:red;
  color:white;
  position:absolute;
}
.one h3{
  text-align:center;
  margin:8px;
}
.one-b{
  width:150px;
  height:300px;
  background-color:blue;
  float:right;
}
.one-c li{
  width:150px;
  height:30px;
  list-style:none;
  
}
.one-e{
  width:250px;
  height:300px;
  background-color:yellow;
  display:none;
}
/*.one:hover .one-b{
  display:block;
}*/

CSS