:root {
    --color     : rgba(191, 191, 191, .1);
    --text-color: rgba(0, 0, 0, 1);

    --color-: rgba(238, 238, 238, .25);

    --hover-color     : rgba(4, 4, 4, .25);
    --hover-color-    : rgba(187, 187, 187, .25);
    --hover-text-color: rgba(255, 255, 255, 1);
}

@media(prefers-color-scheme: dark) {
    :root {
        --color     : rgba(255, 255, 255, .025);
        --text-color: rgba(255, 255, 255, 1);

        --color-: rgba(102, 102, 102, .25);

        --hover-color     : rgba(255, 255, 255, .5);
        --hover-color-    : rgba(125, 125, 125, .25);
        --hover-text-color: rgba(0, 0, 0, 1);
    }
}

* {
    margin     : 0;
    padding    : 0;
    font-family: Helvetica;
    transition : all 0.5s ease-in-out;
}

a {
    /* a标签去掉下划线 */
    text-decoration: none;

    /* 将字体颜色设为黑色 */
    color: var(--text-color);
}

body {
    width     : 100vw;
    background: var(--color);
}

nav {
    width : 75vw;
    margin: auto;
}

nav>div {
    /* 居中 */
    display  : flex;
    position : relative;
    left     : 50%;
    transform: translateX(-50%);
}

nav>div>li,
nav>div>a {
    flex-grow  : 1;
    flex-shrink: 1;
}

nav>div>a>li {
    width: 100%;
}

li {
    /* 去掉li的小黑点 */
    list-style: none;
}

.nav-1 {
    position: relative;

    /* 同一行显示 */
    display: inline-block;

    /* 文字居中对齐 */
    text-align: center;

    padding: 5px 0;

    /* 宽70px 高25px */
    /* width : 70px; */
    height: 25px;

    /* 设置背景色和文字颜色 */
    background: var(--color);
    color     : var(--text-color);

    /* 0.5秒的过度 */
    transition: background 0.5s ease-in-out, color 0.5s ease-in-out;
}

.nav-1>.nav-2 {
    /* 定位 */
    position: absolute;
    top     : 35px;
    left    : 0;

    /* 使它不显示 */
    height  : 0;
    overflow: hidden;

    /* 这样打开的时候好看一些 */
    border-radius: 0 0 100% 100%;

    /* 0.5秒的过度 */
    transition: all 0.5s ease-in-out;
}

.nav-1>.nav-2>li {
    /* 文字居中对齐 */
    text-align: center;

    /* 宽70px 高25px */
    width : 70px;
    height: 25px;

    /* 设置背景色和文字颜色 */
    background: var(--color-);
    color     : var(--text-color);
    padding   : 1px 10px;

    /* 0.5秒的过度 */
    transition: all 0.5s ease-in-out;
}

.nav-1:hover {
    /* 鼠标移上去时改变背景色 */
    background: var(--hover-color);

    /* 鼠标移上去时改变文字颜色 */
    color: var(--hover-text-color);
}

.nav-1:hover>.nav-2 {
    /* 显示 这里要自己修改 */
    height: 108px;

    /* 设置圆角 */
    border-radius: 0 0 10px 10px;
}

.nav-1>.nav-2>li:hover {
    /* 鼠标移上去时改变背景色和文字颜色 */
    background: var(--hover-color-);
    color     : var(--hover-text-color);
}