html下拉菜单怎么做？html下拉菜单的实现方法(2)-木庄网络博客

html+css实现的下拉菜单代码：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    .a{
    width: 200px;
    }
    .b{
    width: 100px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background: lightblue;
    font-size: 30px;
    }
    .c{
    height: 200px;
    width: 100px;
    display: none;
    background: gray;
    }
    .b:hover{
    background: green;
    cursor: pointer;
    }
    .a:hover .c{
    display: block;
    }
    a{
    display: block;
    text-decoration: none;
    height: 40px;
    text-align: center;
    line-height: 40px;
    color: #ccc;
    }
    a:hover{
    background: green;
    color: pink;
    }    
</style>
</head>
<body>
<div class="a">
<div class="b">城市</div>
    <div class="c">
    <a href="#">合肥</a>
    <a href="#">南京</a>
    <a href="#">芜湖</a>
    <a href="#">高邮</a>
    <a href="#">上海</a>
    </div>
    </div>
    </body>
    </html>