提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: 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网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"css下拉菜单怎么做?【css教程】,下拉菜单"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线