一个单独导航下拉的效果纯CSS

一个单独导航下拉的效果

<div class="bueys" id="menu">

    <a class="butoggle">

        <div class="butoggle" title="">

            <span style="color: #333;">

                 <span class="ahfb-svg-iconset wmmb-inline-flex svg-baseline"><img src="__ROOT_DIR__/template/pc/skin/images/en.png" width="20" height="20">English</span>

            </span>

        </div>

    </a>

    <ul id="list" class="dropdnu">

    {eyou:weapptaglib name="('StationTranslation', 'getList')" id='field'}

        <li><a class="ignore" {$field.onclick}><img src="__ROOT_DIR__/weapp/StationTranslation/template/skin/images/{$field.value}.png" width="20" height="20">{$field.name}</a></li>

{/eyou:weapptaglib}

    </ul>

</div>

CSS：

 /* 通用按钮样式 */

       .fbuttons {

            margin-left: 0;

            margin-right: 0px;

            vertical-align: top;

            letter-spacing: normal;

            display: inline-block;

            margin-left: 3px;

            cursor: pointer;

        }

        /* 容器样式 */

       .bueys {

            position: relative;

            display: inline-block;

        }

        /* 切换按钮样式 */

       .butoggle {

            border: none;

            cursor: pointer;

            text-decoration: none;

            display: block;

            padding: 3px 2px 2px 6px;

            color: #fff;

            <!-- background-color: #333; /* 添加背景色 */ -->

            border-radius: 4px; /* 添加圆角 */

        }

       .butoggle span {

            display: flex;

            align-items: center;

        }

       .butoggle i {

            margin-right: 5px;

        }

        /* 下拉菜单样式 */

       .dropdnu {

            display: none;

            position: absolute;

            background-color: #f9f9f9;

            min-width: 150px;

            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

            z-index: 199;

            list-style-type: none;

            padding: 0;

            margin: 0px 0px 0px -29px;

            border-radius: 4px; /* 添加圆角 */

            overflow: hidden; /* 隐藏溢出内容 */

        }

       .dropdnu li {

            color: #333;

            padding: 12px 16px;

            text-decoration: none;

            display: flex; /* 使用 flex 布局 */

            align-items: center; /* 垂直居中 */

            cursor: pointer;

        }

       .dropdnu li img {

            margin-right: 10px; /* 图标右侧间距 */

        }

       .dropdnu li:hover {

            background-color: #f1f1f1;

        }

        /* 鼠标悬停显示下拉菜单 */

       .bueys:hover .dropdnu {

            display: block;

        }

        /* 屏幕宽度大于 768px 时的样式 */

        @media screen and (min-width: 769px) {

          /* 通用按钮样式 */

       .fbuttons {

            margin-left: 0;

            margin-right: 0px;

            vertical-align: top;

            letter-spacing: normal;

            display: inline-block;

            margin-left: 3px;

            cursor: pointer;

        }

        /* 容器样式 */

       .bueys {

            position: relative;

            display: inline-block;

        }

        /* 切换按钮样式 */

       .butoggle {

            border: none;

            cursor: pointer;

            text-decoration: none;

            display: block;

            padding: 3px 2px 2px 6px;

            color: #fff;

            <!-- background-color: #333; /* 添加背景色 */ -->

            border-radius: 4px; /* 添加圆角 */

        }

       .butoggle span {

            display: flex;

            align-items: center;

        }

       .butoggle i {

            margin-right: 5px;

        }

        /* 下拉菜单样式 */

       .dropdnu {

            display: none;

            position: absolute;

            background-color: #f9f9f9;

            min-width: 150px;

            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

            z-index: 199;

            list-style-type: none;

            padding: 0;

            margin: 0px 0px 0px -29px;

            border-radius: 4px; /* 添加圆角 */

            overflow: hidden; /* 隐藏溢出内容 */

        }

       .dropdnu li {

            color: #333;

            padding: 12px 16px;

            text-decoration: none;

            display: flex; /* 使用 flex 布局 */

            align-items: center; /* 垂直居中 */

            cursor: pointer;

        }

       .dropdnu li img {

            margin-right: 10px; /* 图标右侧间距 */

        }

       .dropdnu li:hover {

            background-color: #f1f1f1;

        }

        /* 鼠标悬停显示下拉菜单 */

       .bueys:hover .dropdnu {

            display: block;

        }

        }