css横排菜单实现鼠标悬停更改样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>横排菜单实现鼠标悬停更改样式</title>
    <style type="text/css" rel="stylesheet">
        *{
            padding: 0px;
            margin: 0px;
        }
        .mainMenu{
            width: 100%;
            background-color: #ff4400;
            color: white;
            float: left;
            height: 30px;
            text-align: center;
            align-items: center;
        }
        .menu{
            float: left;
            line-height: 30px;
            font-size: 20px;
            margin-left: 10px;
            border:0px solid black ;
            border-radius: 8px;
            text-align: center;
        }
        .menu:hover{
            background-color:wheat;
            color: #ff4400;
        }
        #first{
            margin-left: 30%;
        }

    </style>
</head>
<body>
<div class="mainMenu">
    <div class="menu" id="first">首页</div>
    <div class="menu">天猫</div>
    <div class="menu">聚划算</div>
    <div class="menu">天猫超市</div>
    <div class="menu">淘抢购</div>
    <div class="menu">司法拍卖</div>
    <div class="menu">中国制造</div>
</div>
</body>
</html>

在这里，为了简化操作，菜单我用的<div>标签，实际开发中应该是<a>标签

效果：

版权声明：本文为weixin_42529699原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。