导航栏 - saobby 网站导航 - 常规

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>导航栏</title>
    <style>
        ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
<pre><code>    li {
        display: inline-block;
        position: relative;
    }
    
    a {
        text-decoration: none;
        color: #333;
        font-weight: bold;
        transition: color 0.3s;
        display: block;
        padding: 10px;
    }
    
    a:hover {
        color: #ffaaff;
    }
    
    .sub-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: #eee;
    }
    
    li:hover .sub-menu {
        display: block;
    }
    
    .sub-menu a {
        padding: 10px;
    }
&lt;/style&gt;
</code></pre>
</head>
<body>
    <ul>
        <li>
            <a href="https://saobby.com">saobby的主页</a>
            <div class="sub-menu">
                <a href="https://e.saobby.com">saobby文件上传</a>
                <a href="https://i0.saobby.com/">saobby github加速访问</a>
                <a href="https://www.saobby.com/mys_picbed">saobby米友社图床</a>
            </div>
        </li>
        <li>
            <a href="https://up_1.jajn.saobby.tk/">我的文件上传</a>
        </li>
    </ul>
</body>
</html>