利用css实现下拉菜单

Original 2019-03-30 17:56:58 193
abstract:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>*{margin:0; padding:0;}div{width:1260px;height:40px;background:#1E1E1

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<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="">首页</a>

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

    <ul>

        <li>子菜单</li>

        <li>子菜单</li>

        <li>子菜单</li>

    </ul>

</a>

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

    <ul>

        <li>子菜单</li>

        <li>子菜单</li>

        <li>子菜单</li>

    </ul>

</a>

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

    <ul>

        <li>子菜单</li>

        <li>子菜单</li>

        <li>子菜单</li>

    </ul>

</a>

</div>

</body>

</html>

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

Correcting teacher:天蓬老师Correction time:2019-04-01 09:43:43
Teacher's summary:display属性, 是每个标签都有的原生属性, 它的功能非常强大, 决定了这个标签的出身和使用场景

Release Notes

Popular Entries