关于HTML的二级分类代码

最新推荐文章于 2023-02-14 16:47:09 发布

liuningshiwoa

最新推荐文章于 2023-02-14 16:47:09 发布

阅读量3.7k

点赞数 1

文章标签： html border xhtml float

本文链接：https://blog.csdn.net/liuningshiwoa/article/details/6908250

版权

这篇博客展示了如何使用HTML和XHTML创建具有二级分类的导航菜单。通过CSS定义样式，实现了菜单项的浮动、背景颜色变化、边框效果以及悬停时的高亮显示。二级菜单在鼠标悬停时会自动展开，提供了一个简洁且交互友好的用户体验。

摘要由CSDN通过智能技术生成

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    ul { list-style-type:none; height:30px; font-size:15px; background-color:Aqua; font-weight:bold;}
    ul li { float:left;}
    li a{ text-decoration:none; color:#666666; display:block; width:100px; height:30px;
        line-height:30px; text-align:center;}
    li a:hover{ background-color:#000000; color:Red;}


    li ul{ background:#e0e0e0; border:2px solid #0079b2; display:none; height:auto;
         position:absolute; width:100px; z-index:200px;}