欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
  <!DOCTYPEhtml>
 
  <html>
 
  <head>
 
  <metacharset="utf-8">
 
  <style>
 
  /*盒子,相对定位*/
 
  .dropdown{
 
  display:inline-block;
 
  position:relative;
 
  }
 
  button{
 
  background-color:pink;
 
  color:white;
 
  border:none;
 
  margin:6px;
 
  padding:5px;
 
  font-size:16px;
 
  }
 
  /*下拉内容,绝对定位,初始不显示,背景颜色为pink*/
 
  .content{
 
  display:none;
 
  position:absolute;
 
  background-color:pink;
 
  min-width:160px;
 
  box-shadow:0px8px16px0pxrgba(0,0,0,0.2);
 
  z-index:1;
 
  }
 
  /*下拉内容a链接样式*/
 
  .contenta{
 
  display:block;
 
  color:white;
 
  padding:12px16px;
 
  text-align:center;
 
  }
 
  /*鼠标移到下拉菜单a链接时背景变为灰色*/
 
  .contenta:hover{
 
  background-color:gray;
 
  }
 
  button:hover{
 
  background-color:gray;
 
  }
 
  /*鼠标点击盒子区域,显示下拉菜单!*/
 
  .dropdown:hover.content{
 
  display:block;
 
  }
 
  </style>
 
  </head>
 
  <body>
 
  <divclass="dropdown">
 
  <button>下拉菜单</button>
 
  <divclass="content">
 
  <aherf="">首页</a>
 
  <aherf="">学习中心</a>
 
  <aherf="">考试中心</a>
 
  <aherf="">考试动态</a>
 
  </div>
 
  </div>
 
  </body>
 
  </html>


2345截图20180821105732.png



本文转载自中文网

 

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c56882.shtml