2019-05-17day4总结

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

<style type="text/css">
#box{
background-color: lawngreen;
height: 50px;

            line-height: 50px;
        }
        
        #menu{
            margin-left: 100px;
            float: left;
            width: 100px;
        }
        #menu font{
            display: inline-block;
            background-color:aqua;
            width: 100px;
            height: 50px;
            text-align: center;
        }
        #menu #content{
            width: 200px;
            height: 150px;
            background-color: lightcoral;
            
            border: 1px solid rgb(180,180,180);
            display: none;
            margin-top: -1px;
        }
        
        #menu:hover #content{
            display: block;
        }
        #menu:hover font{
            border-left: 1px solid rgb(180,180,180);
            border-right: 1px solid rgb(180,180,180);
            border-top: 1px solid rgb(180,180,180);
            
            background-color: white
        }
        
        .other{
            float: left;
            width: 100px;
            height: 50px;
            background-color: red;
            
        }
        
    </style>
</head>
<body>
    
    <div id="box">
        <div id="menu">
            <font>下拉菜单</font>
            <div id="content"></div>
    </div>
    <div class="other">
        <div id="menu1"></div>
        <font>下拉菜单2</font>
        <div id="content1"></div>
    </div>
</body>

</html>

2019-05-17day4总结

推荐阅读更多精彩内容