2023-09-12T07:35:21.png

2023-09-12T07:35:32.png

CSS

.col ul
{

    list-style-type:none;
    padding:0;
    margin:0;
    background-color:#f2f2f2;
    width:100px;
    position: fixed;
    top:0;
    left:0;
    height: 100%;
}

.col a{
    color:black;
    text-decoration: none;
    font-size: 20px;
    display:block;
    text-align:center;
}


.col li{
    width: 100px;
}


.col a:hover{
    background-color:black;
    color:white;
}




.row ul {
    position:fixed;
    left:110px;
    top:0;
    list-style-type: none;
    margin: 0;
    padding:0;
    width: 100%;
    background-color:#f2f2f2;

}


.row li{
    float: left;
    background-color:#f2f2f2;
}


.row a{
    display: block;
    width:100px;
    text-decoration: none;
    color:black;

}


.row a:hover{
    background-color:black;
    color:white;
}




.drop{
    position:fixed;
    top:20px;
    left:110px;

}


.dropdown{
    position:relative;
    display: line-block;
}


.dropdownbtn{
    background-color:#999;
    width:white;
    padding:16px;
    font-size: 16px;
    border: none;
}


.dropdown-content{
    display: none;
    position:absolute;
    background-color:#f9f9f9;
    width: 150px;
}





.dropdown-content a{
    padding:12px 16px;
    color:#000;
    text-decoration:none;
    display: block;
}






.dropdown-content a:hover{

    background-color:#777;

}



.dropdown:hover .dropdown-content{
    display: block;
}


.dropdown:hover .dropdownbtn{
    background-color:#666;

}








.topltip{
    position:fixed;
    top:400px;
    left:110px;
    display:line-block;
    border-bottom:1px solid black;
}


.topltip .text{
    visibility:hidden;
    width:120px;
    background-color:black;
    color:white;
    text-align:center;
    padding:5px 0;
    position:absolute;
    z-index:1;

}

.topltip:hover .text
{
    visibility:visible;
}

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>

    <div  class="col">
        <ul>
        <li><a href="">首页</a></li>
        <li><a href="">新闻</a></li>
        <li><a href="">我的</a></li>
        <li><a href="">登录</a></li>
        <li><a href="">关于</a></li>
        </ul>
    </div>

    
    
    <div  class="row">
        <ul>
        <li><a href="">首页</a></li>
        <li><a href="">新闻</a></li>
        <li><a href="">我的</a></li>
        <li><a href="">登录</a></li>
        <li><a href="">关于</a></li>
        </ul>
    </div>

    <div class="drop">
        <h2>下拉菜单</h2>
        <p>鼠标移动到下方按钮上会显示下拉菜单内容</p>
        <div class="dropdown">

            <button class="dropdownbtn" > 下拉菜单 </button>

            <div class="dropdown-content">
                <a href="">内容1</a>
                <a href="">内容2</a>
                <a href="">内容3</a>
            </div>

        </div>
    </div>


<div class="topltip">鼠标移动到此处有惊喜

    <span class="text">!这就是惊喜</span>
</div>



</body>
</html>