運作效果

運作效果圖
技術要點

把元素進行隐藏 display: none;
滑鼠經過的僞元素選擇器，.user:hover div { display: block; }，滑鼠經過的時候，把隐藏的元素進行顯示；
顯示元素的轉換；使用dispaly, inline表示轉換為行内元素，一行顯示；inline-block轉換為行内塊元素，即有行内元素的特點，又有塊級元素的特點；block轉換為塊級元素，獨占一行顯示
盒子模型
浮動以及浮動的特點，浮動可以有左浮動或右浮動；float: left；或float: right;
源碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模仿頭條浮動菜單</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;

        }
        body {
            background: #F8F8F8;
        }
        li {
            list-style: none;
        }
        a {
            text-decoration: none;
        }
        .w{
            width: 100%;
            margin: auto;
            background: white;
        }

        .header{
            height: 60px;
            margin: 10px auto;
        }
        
        .logo {
            float: left;
            width: 198px;
            height: 60px;
            position: relative;
        }
        .logo img {
            left:50%;
            top:50%;
            position:absolute;
            transform:translate(-50%,-50%);
        }

        .nav {
            float: right;
            width: 500px;
            height: 60px;
            margin-right: 70px;
        }

        .message {
            float: left;
            width: 100px;
            height: 60px;
            text-align: center;
            line-height: 65px;
            position: relative;
        }

        .message img {
            vertical-align: middle;
        }

         .circle {
            width: 20px;
            height: 20px;
            border-radius: 10px;
            background: red;
            position: absolute;
            left: 80px;
            top: 10px;
        }

        .message_count {
            font-size: 10px;
            color: white;
            font-weight: 700;
            position: absolute;
            left: 82px;
            top: -13px;
        }

        .info {
            float: left;
            width: 200px;
            height: 60px;
            margin-left: 10px;
            text-align: center;
            line-height: 60px;
        }

        .line {
            float: left;
            height: 20px;
            margin-top: 20px;
            width: 2px;
            background: #e7e9fc;
        }

        .user {
            float: left;
            width: 170px;
            height: 60px;
            margin-left: 10px;
            line-height: 60px;
            font-size: 16px;
        }

        .user img{
            height: 25px;
            vertical-align: middle;
        }

        .login_info {
            height: 300px;
            width: 330px;
            margin-left: -120px;
            display: none;
            margin-top: -5px;
            border-radius: 10px;
            background: white;
            z-index: 100;
        }

        .user:hover div {
            display: block;
        }

        .login_info h3 {
            font-weight: 500;
            padding-left: 20px;
        }
        .login_info li {
            list-style: none;
            padding-left: 20px;
            height: 40px;
            line-height: 40px;
        }
        .login_info li:hover {
            background: #F8F8F8;
        }

        .my_line {
            height: 1px;
            width: 260px;
            border-bottom: 1px solid #999999;
            padding-top: 20px;
        }

        .login_info img {
            padding-right: 8px;
        }

        .message_info {
            height: 290px;
            width: 130px;
            display: none;
            margin-top: -5px;
            border-radius: 10px;
            background: white;
            z-index: 100;
        }

        .message:hover div {
            display: block;
        }

        .message_info li {
            list-style: none;
            padding-left: 8px;
            height: 40px;
            line-height: 40px;
        }

        .message_info li:hover {
            background: #F8F8F8;
        }


    </style>
</head>
<body>
     <div class="header w">
        <div class="logo">
            <img src="logo.png">
        </div>

         <div class="nav">
              <div class="message">
                  <img src="message.png">
                  <span>消息</span>
                  <div class="circle"></div>
                  <span class="message_count">10</span>

                  <div class="message_info">
                      <ul>
                          <li>系統通知</li>
                          <li>粉絲</li>
                          <li>評論</li>
                          <li>點贊</li>
                          <li>@我</li>
                          <li>私信</li>
                          <li>問答邀請</li>
                      </ul>
                  </div>
              </div>

             <div class="info">
                 在頭條創作的第 1274 天
             </div>

             <div class="line"></div>

             <div class="user">
                 <img src="user.png">
                 <span>程式員COW哥</span>

                 <div class="login_info">
                        <h3>晚上好，程式員COW哥</h3>
                        <ul>
                            <li><img src="image1.png">問答原創、問答創作收益等 8 項權益</li>
                            <li><img src="image2.png">信用分 100分</li>
                            <li><img src="image3.png">頭條認證</li>
                            <li>
                                <div class="my_line"></div>
                            </li>
                            <li><img src="image4.png">設定</li>
                            <li><img src="image5.png">登出</li>
                        </ul>
                 </div>
             </div>
         </div>
     </div>


</body>
</html>
css模仿今日頭條浮動菜單

運作效果

技術要點

源碼
