旗下导航:搜·么
当前位置:网站首页 > html教程 > 正文

css下拉菜单怎么做?【html5教程】,下拉菜单

作者:搜教程发布时间:2019-11-26分类:html教程浏览:67评论:0


导读:css能够在网页中完成许多的结果,个中CSS下拉菜单是常常须要用到的结果,本篇文章就来给人人细致分享一下CSS下拉菜单的完成要领。话不多说,下面我们就来看细致的完成...
css能够在网页中完成许多的结果,个中CSS下拉菜单是常常须要用到的结果,本篇文章就来给人人细致分享一下CSS下拉菜单的完成要领。

话不多说,下面我们就来看细致的完成代码。

HTML代码:

<ul>
    <a href="#">生果</a>
    <ul>
        <li><a href="#">苹果</a></li>
        <li><a href="#">香蕉</a></li>
        <li><a href="#">草莓</a></li>
    </ul>
</ul>
<ul>
    <a href="#">甜点</a>
    <ul>
        <li><a href="#">蛋糕</a></li>
        <li><a href="#">曲奇</a></li>
        <li><a href="#">面包</a></li>
    </ul>
</ul>
<ul>
    <a href="#">奶茶</a>
    <ul>
        <li><a href="#">红豆奶茶</a></li>
        <li><a href="#">珍珠奶茶</a></li>
        <li><a href="#">全套奶茶</a></li>
    </ul>
</ul>

CSS代码:

 *{
            padding: 0;
            margin: 0;
        }
        ul,a{
            font-size: 20px;
            list-style: none;
            text-decoration: none;
            background-color: #3C3C3C;
            color: #FFFFFF;
            width: 100px;
            text-align: center;
            border: 0px solid black;
            border-radius: 5px;
            margin-top: 1px;
        }
        a{
            display: block;
        }

        .plat{
            display: none;
        }
        .nav{
             float: left;
             margin-left: 1px;
         }
        .nav:hover .plat{
            display: block;
            clear: both;
        }
        .plat li:hover>a{
            background-color: dimgrey;
        }

运转的结果以下:当鼠标放在下拉按钮上就会涌现下拉菜单。

本篇文章到这里就已悉数完毕了,更多精彩内容人人能够关注ki4网的CSS视频教程栏目!!!

以上就是css下拉菜单怎么做?的细致内容,更多请关注ki4网别的相干文章!

标签:下拉菜单


欢迎 发表评论: