css menu sample

最新推荐文章于 2022-07-30 16:33:43 发布
最新推荐文章于 2022-07-30 16:33:43 发布
阅读量452 收藏
点赞数
分类专栏： Windows 
<!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>

liuweichuan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS-SCSS代码规范
itsNekoDeng的博客
11-01 933
1 注释规范 2 缩进/空格/换行规范 (1)每个缩进使用4个空格，不允许使用 2 个空格 或 tab //正确 .sample { display: flex; } //错误 .sample { display: flex; } (2)选择器 与 花括号 之间必须包含空格 ```css //正确 .sample { display: flex; } //错误 .sample{ display: flex; } (3)每条规则之间必须包含空行 //正确 .sample {
常用的css特效（一）
少吃点肉的博客
07-13 2812
1、交错动画 <div class="loading"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> body { dis
CSS_样式sample
weixin_34074740的博客
05-10 72
<!DOCTYPE HTML> <html> <head> <title>div浮动</title> <style type="text/css"> body{ margin: 0px 1px 2px 3px; } #father{ background-...
css msonormal,Creating a Sample Mobile Application
weixin_36454202的博客
08-03 348
A Creating a Sample Mobile ApplicationThis appendix guides you through the steps to create a sample EnterpriseOne mobile enterprise application using Oracle Mobile Application Framework (MAF).This app...
全局 CSS 样式
ExceptionMapping的博客
11-15 3754
全局 CSS 样式 设置全局 CSS 样式；基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统。
CSS设计模式
xiaobo_666666的博客
08-30 179
CSS设计模式 前言 传统的CSS书写风格是随意命名，堆叠样式，造成了混乱不堪的结果，你是否遇到庞大复杂的项目里，CSS代码难以维护的情况，你是否想要除了能够还原实物原型，而且代码规则有序极易维护。 那么CSS设计模式就在实际应用中的拯救样式混乱，代码行数冗余的局面。这也是对一个项目设计CSS架构基础。 啥？CSS还有设计模式！ 没错儿，CSS真的有设计模式。 设计模式:OOCSS OOCSS是比较基础的设计模式，其他设计模式或多或少都有OOCSS的影子。那么什么是OOCSS呢?估计大家看到OO的时候就已经
html网页切换效果，css图片切换效果
m0_71814235的博客
07-30 2025
html网页切换效果，css图片切换效果
sample1
03-21
在“sample1-main”中，可能包含着不同选择器的使用示例，如`#header`用于选取ID为“header”的元素，`.menu`用于选取所有类名为“menu”的元素。 3. **属性与值**：CSS规则由选择器和声明组成，声明由属性和值构成...
sample for title
03-16
标题 "sample for title" 暗示我们正在探讨一个与编程相关的主题，可能是关于网站开发或者框架的应用。从标签 "源码 工具" 我们可以推测这可能涉及到源代码管理和开发工具的使用。虽然描述是空的，但通过提供的文件...
js动态菜单合集(left menu)
12-16
本文将深入探讨“js动态菜单合集”，包括Apple风格的Accordion Menu（折叠菜单）、Glossy Accordion Menu以及Slashdot Menu，这些都是在网页设计中常见的导航元素，尤其适用于左侧菜单布局。 首先，我们来看Apple...
satellite-menu 卫星环绕效果 例子
08-20
文件名`satellite-menu-sample`暗示了这是一个示例代码，可能包含了HTML结构、CSS样式以及JavaScript逻辑。开发者可以通过查看和学习这些代码来理解卫星菜单的工作原理和实现方法。而`satellite-menu`可能是一个包含...
Div+CSS 布局大全
尘埃亦非尘
09-05 1878
《Div+CSS 布局大全》     整理者：Jesse Zhao 网站：http://JesseZhao.cnblogs.com           第 1 页 《Div + CSS  布局大全》  博客园 Jesse Zhao  整理 http ://jessezhao.cnblo gs.com     M SN/M ai
html css默认样式,HTML4默认CSS样式表
weixin_33746833的博客
06-19 199
html, address, blockquote, body, dd, div, dl, dt, fieldset, form,frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul,center, dir, hr, menu, pre {display: block;unicode-bidi: embed}li {display...
NET语言程序设计课件-第2章 Visual C#.NET语法基础.ppt
最新发布
08-08
Visual C# .NET是一门面向对象的程序设计语言，是当前流行的.NET系列的语言。 本课程以Visual Studio为程序设计环境，对C#进行了全面阐述。 本电子课件适用于课程讲解或者课程分析参考使用。
[毕业设计]PHP图书借阅与归还管理系统(源代码+论文).zip
08-08
[毕业设计]PHP图书借阅与归还管理系统(源代码+论文)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值