利用css实现下拉菜单

独行者2019-03-30 17:56:58

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

*{margin:0; padding:0;}

div{width:1260px;height:40px;background:#1E1E1E;margin:0 auto;}

a{text-decoration: none;color:#fff;display:inline-block; width:100px;height:40px;line-height: 40px;text-align: center;position: relative;}

a:hover ul{display:block;}

ul{position: absolute;width:100px;border:1px solid #ccc;top:40;left:0;display: none;}

li{list-style: none; color:#000;}

</style>

</head>

<body>

<div>

<a href="">下拉菜单1

<ul>

</ul>

</a>

<a href="">下拉菜单2

<ul>

</ul>

</a>

<a href="">下拉菜单3

<ul>

</ul>

</a>

</div>

</body>

</html>

css实现下拉菜单可以使用定位，同时利用display：none将下拉菜单隐藏。利用hover将display改为block即可以实现下拉菜单。