HTML+CSS 下拉框

最新推荐文章于 2024-08-24 09:00:00 发布

飞飞翼

最新推荐文章于 2024-08-24 09:00:00 发布

阅读量927

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_36935391/article/details/83274193

版权

HTML 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <STYLE type=text/css>
        *{margin:0;padding:0;border:0;}
        #fm { line-height: 24px; list-style-type: none; background:#666; }/*设置盒子的行高，去掉标记，设置背景颜色*/
        #fm a { display: block; width: 80px; text-align:center; }/*设置A标签为块元素不显示，宽度，居中*/
        #fm a:link { color:#666; text-decoration:none; } /* 设置未访问的链接样式*/
        #fm a:visited { color:#666;text-decoration:none; } /* 设置已访问的链接样式 */
        #fm a:hover { color:#FFF;text-decoration:none;font-weight:bold; }  /* 当有鼠标悬停在链接上的颜色 */
        #fm li { float: left; width: 150px; background:#CCC; }
        #fm li a:hover{ background:#999; }
        #fm li ul { line-height: 27px; list-style-type: none;text-align:left; left: -999em; width: 80px; position: absolute; }
        #fm li ul li{ float: left; width: 80px; background: #F6F6F6; }
        #fm li ul a{ display: block; width: 80px;width: 80px;text-align:left;padding-left:5px; }
        #fm li ul a:link { color:#666; text-decoration:none; }
        #fm li ul a:visited { color:#666;text-decoration:none; }
        #fm li ul a:hover { color:#F3F3F3;text-decoration:none;font-weight:normal; background:#C00; }
        #fm li:hover ul { left: auto; }
        #fm li.sfhover ul { left: auto; }
    </STYLE>

</head>
<body>

<UL id='fm'>
    <LI><A href="#">一级菜单栏目</A>
        <UL>
            <LI><A href="#">一级菜单</A></LI>
            <LI><A href="#">一级菜单</A></LI>
            <LI><A href="#">一级菜单</A></LI>
            <LI><A href="#">一级菜单</A></LI>
        </UL>
    </LI>
 </UL>


</body>
</html>