css menu sample

最新推荐文章于 2024-04-18 00:11:40 发布

liuweichuan

最新推荐文章于 2024-04-18 00:11:40 发布

阅读量500

点赞数

分类专栏： Windows

Windows 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用HTML和CSS实现的导航菜单样式案例，包括菜单的层级结构展示、鼠标悬停效果等，适用于网站开发中常见的导航栏设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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">
        .menu{font-family: 宋体, Arial, Helvetica, sans-serif; width: 750px; margin: 0; margin: 5px 0 50px 0;}
        .menu ul{padding: 0; margin: 0; list-style-type: none;}
        .menu ul li{float: left; position: relative;}
        .menu ul li a, .menu ul li a:visited{display: block; text-align: center; text-decoration: none; width: 104px; height: 30px; color: #000; border: 1px solid #fff; border-width: 1px 1px 0 0; background: #c9c9a7; line-height: 30px; font-size: 11px;}
        .menu ul li ul{display: none;}
        .menu ul li:hover a{color: #fff; background: #b3ab79;}
        .menu ul li:hover ul{display: block; position: absolute; top: 31px; left: 0; width: 105px;}
        .menu ul li:hover ul li a{display: block; background: #faeec7; color: #000;}
        .menu ul li:hover ul li a:hover{background: #dfc184; color: #000;}
    </style>
</head>
<body>
<div id="div" class="menu">
        <ul>
            <li><a class="aa" href="">首页</a>
                <ul>
                    <li><a href="#" title="">注册</a></li>
                    <li><a href="" title="">登录</a></li>
                    <li><a href="" title="">注销</a></li>
                    <li><a href="" title="">行业新闻</a></li>
                </ul>
            </li>
            <li><a class="aa" href="">商务中心</a>
                <ul>
                    <li><a href="" title="">客户首单</a></li>
                    <li><a href="" title="">新建任务单</a></li>
                    <li><a href="" title="">客户单跟踪</a></li>
                    <li><a href="" title="">历史往来记录</a></li>
                    <li><a href="" title="">业务签收</a></li>
                </ul>
            </li>
            <li><a class="aa" href="">配送中心</a>
                <ul>
                    <li><a href="" title="">新建配送单</a></li>
                    <li><a href="" title="">车辆检查</a></li>
                    <li><a href="" title="">业务跟踪</a></li>
                </ul>
            </li>
            <li><a class="aa" href="">运输中心</a>
                <ul>
                    <li><a href="" title="">新建派车单</a></li>
                    <li><a href="" title="">车辆跟踪</a></li>
                </ul>
            </li>
            <li><a class="aa" href="">系统维护</a>
                <ul>
                    <li><a href="" title="">城市数据</a></li>
                    <li><a href="" title="">集团公司信息</a></li>
                    <li><a href="" title="">部门信息</a></li>
                    <li><a href="" title="">员工信息</a></li>
                    <li><a href="" title="">仓库数据</a></li>
                </ul>
            </li>
            <li><a class="aa" href="">我的任务</a>
                <ul>
                    <li><a href="" title="Example one">我提交的任务</a></li>
                    <li><a href="" title="">我收到的任务</a></li>
                    <li><a href="" title="">被退回的任务</a></li>
                </ul>
            </li>
            <li><a class="aa" href="">技术支持</a>
                <ul>
                    <li><a href="" title="">技术架构</a></li>
                    <li><a href="" title="">应用说明</a></li>
                    <li><a href="" title="">关于我们</a></li>
                </ul>
            </li>
        </ul>
        <div class="clear">
        </div>
    </div>
</body>
</html>