5款DIV+CSS导航菜单(四)

wangle100wangle wangle100wangle 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 500+累计阅读 545平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄19年
关注
转载 最新推荐文章于 2026-02-20 00:47:37 发布 545 阅读 AI 写同款· GEO 优化 ›
HTML5+CSS设计导航栏及其子菜单 HTML界面设计 新建一个web项目，在<body></body>标签中创建一个<div></div>，指定class属性=“header”。在<div></div>中创建一个无序列表<ul></ul>，指定class属性=“header_ul”。在其中添加几个<li&am 阅读详情

dropline-水平三级横向弹出菜单

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dropline-水平三级横向弹出菜单</title>
<style type="text/css">
/* common styling */
.menu {font-family: arial, sans-serif; width:749px; height:30px; position:relative; margin:0; font-size:11px; margin:50px 0; background:#fff; position:relative;}
.menu ul {padding:0; margin:0; list-style-type: none;}
.menu ul li {float:left; border-left:1px solid #eee; width:106px;}
.menu ul li a, .menu ul li a:visited {display:block; float:left; width:101px; text-decoration:none; padding:0 0 0 5px; height:30px; line-height:30px; color:#000; background:#c9c9a7 url(../../graphics/drop.gif) bottom right no-repeat;}
.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#b3ab79;}
.menu ul li:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;}
.menu ul li:hover ul.right_side li {float:right; border:0; border-left:1px solid #eee;}

.menu ul li:hover ul.left_side li {float:left; border:0; border-left:1px solid #eee;}
.menu ul li:hover ul li a.hide {background:#bd8d5e url(../../graphics/drop2.gif) bottom right no-repeat; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#b3ab79; color:#fff;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:##b3ab79; color:#fff;}
.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:0; top:30px; color:#000; background:#dfc184;}
.menu ul li:hover ul.right li {float:right;}
.menu ul li:hover ul li:hover a.hide {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul li a {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;}

</style>
<!--[if lte IE 6]>
<style type="text/css">
table {border-collapse:collapse; margin:0; padding:0;}

.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}
.menu ul li a, .menu ul li a:visited {background:#c9c9a7 url(../../graphics/drop.gif) 20px right no-repeat;}


.menu ul li a:hover {color:#fff; background:#b3ab79;}
.menu ul li a:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;}
.menu ul li a:hover ul.right_side li {float:right; border-width:0 1px 0 0 0;}
.menu ul li a:hover ul.left_side li {float:left;}
.menu ul li a:hover ul li a.sub {background:#bd8d5e url(../../graphics/drop2.gif) 20px right no-repeat; color:#fff;}
.menu ul li a:hover ul li a {display:block; background:#b3ab79; color:#fff;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#dfc184; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:0; top:30px; color:#000; background:#dfc184;}
.menu ul li a:hover ul li a:hover ul li a {background:#dfc184; color:#000;}
.menu ul li a:hover ul li a:hover ul li a:hover {background:#bd8d5e; color:#fff;}

</style>
<![endif]-->
</head>

<body>

<div class="menu">

<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a>

<!--[if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif]-->

    <ul>
    <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
    <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
    <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
    <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>

    <li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK</a>

  <!--[if lte IE 6]>
  <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK
  <table><tr><td>
  <![endif]-->

        <ul class="right_side">
            <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
            <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
            <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
        </ul>

    <!--[if lte IE 6]>
    </td></tr></table>
  </a>
  <![endif]-->

    </li>

    <li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
    <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>
    </ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="index.html">MENUS</a>

<!--[if lte IE 6]>
<a href="index.html">MENUS
<table><tr><td>
<![endif]-->

    <ul>
    <li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
    <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
    <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
    <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
    <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
    <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
    <li><a href="circles.html" title="circular links">circular links</a></li>
    </ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../layouts/index.html">LAYOUTS</a>

<!--[if lte IE 6]>
<a href="../layouts/index.html">LAYOUTS
<table><tr><td>
<![endif]-->

    <ul>
    <li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>

    <li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
    <li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
    <li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
    <li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
    </ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../boxes/index.html">BOXES</a>

<!--[if lte IE 6]>
<a href="../boxes/index.html">BOXES
<table><tr><td>
<![endif]-->

    <ul>
    <li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
    <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
    <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
    <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
    <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
    <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
    <li><a href="circles.html" title="circular links">circular links</a></li>
    </ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../mozilla/index.html">MOZILLA</a>

<!--[if lte IE 6]>
<a href="../mozilla/index.html">MOZILLA
<table><tr><td>
<![endif]-->

    <ul>
    <li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
    <li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
    <li><a href="../mozilla/content.html" title="Using content:">content:</a></li>
    <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
    <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>
    <li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
    <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>

   </ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../ie/index.html">EXPLORER</a>

<!--[if lte IE 6]>
<a href="../ie/index.html">EXPLORER
<table><tr><td>
<![endif]-->

    <ul class="right_side">
    <li><a href="../ie/exampleone.html" title="Example one">example one</a></li>
    <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
    <li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>
    </ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../opacity/index.html">OPACITY</a>

<!--[if lte IE 6]>
<a href="../opacity/index.html">OPACITY
<table><tr><td>
<![endif]-->

    <ul class="right_side">
    <li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li>
    <li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li>
    <li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li>
    <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
    <li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK</a>

  <!--[if lte IE 6]>
  <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK
  <table><tr><td>
  <![endif]-->

        <ul class="left_side">
            <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
            <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
            <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
        </ul>

    <!--[if lte IE 6]>
    </td></tr></table>
  </a>
  <![endif]-->

    </li>
    </ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>
</ul>

</div>

</body>
</html>

收录于
DIV+CSS

当前文章被收录于：

DIV+CSS
7 篇文章 0 人学习
订阅专栏 查看详情
标签
#div #css #class #ie #browser
#float
HTML CSS + DIV实现局部布局 HTML CSS + DIV实现局部布局 1、本章教大家掌握2种布局方式:     1）顶部导航菜单布局，效果图：        2）购物版块布局，效果图：     2、技术目标: 使用div + ul-li实现导航菜单布局     使用div + dl-dt-dd实现购物版块布局 3、一般的局部布局无非采用如下的技术:     1）div 阅读详情

相关推荐

DIV CSS 布局定位 实例 菜单导航 详解

为什么要用Div Css可以简单的作如下解释： 当时创造WEB的那个人也发明了用TABLE布局，当TABLE布局泛滥之后，然后他说:我创造了WEB也毁了WEB，TABLE布局会给一个网页带来大量无意义的语句难以阅读。TABLE是来干什么的，TABLE是表格,从来都

eagleking012的专栏 9601

使用html和css实现一个简单的三级菜单

三级菜单用到了绝对定位和相对定位相对定位： position: relative;绝对定位:position: absolute;效果图： html全部代码： css全部代码：

m0_71491195的博客 968

纯CSS实现导航栏菜单下拉效果

1、效果图 2、代码 <style> /*common css begin*/ *{margin:0px;padding:0px;} body{font-family: 微软雅黑,Microsoft yahei,Arial,Verdana,Tahoma,sans-serif; font-size: 12px;} a { color: #666; text-de...

fengxue_snow的博客 5661

div布局和导航栏案例

div布局，其中css的 #daohang ul li表示的是id为daohang的ul标签下的li的属性，hover是鼠标放上去的状态，text-decoration:none是设置超链接时不要下划线，list-style: none是无序列表去掉前面的点。

qq_43668733的博客 792

[HTML]Web前端开发技术13（HTML5、CSS3、JavaScript ）横向二级导航菜单 Web页面设计实例——喵喵画网页

横向二级导航菜单 Web页面设计实例

ormstq的博客 3808

30种菜单导航（DIV+CSS）设计实现

本文还有配套的精品资源，点击获取 简介：网页设计中，菜单导航是关键的页面布局组件，本资源提供了30种使用 <div> 元素和CSS实现的不同风格和功能的菜单导航实例。从基础的水平和垂直菜单到复杂的动态效果菜单如弹出式和手风琴菜单，每种类型都详细说明了实现方法。这些导航菜单在设计上既注重视觉效果，又增强交互性，为不同类型的网站提供了多样的导航解决方案...

weixin_29301059的博客 3333

div+css实现三级菜单功能

一.html部分 <div id="frame"> <!--一级菜单--> <div id="row-1"> <ul> <li><a href="#">服装</a> <!--二级菜单--> <ul class="two">

qq_42747076的博客 700

9款炫酷HTML5导航菜单设计与实现

<a href="#home">首页</a></li><li><a href="#about">关于</a>

weixin_42361478的博客 1277

CSS实现三级菜单

CSS实现三级菜单

娃娃的博客 2152

css+div+js实现简单导航栏菜单栏

css+div+js实现简单导航栏开发；该页面简单明了，通俗易懂

5个超漂亮简洁DIV css水平多级菜单效果.rar

5个超漂亮简洁DIV css水平菜单效果，基于纯CSS实现的哦，而且是二级菜单，支持多级哦，每一款的颜色都不一样，相信有一款你会喜欢的，其实每一款都是很漂亮的，都有自己的风格，如果你想学习DIV CSS的话，这些菜单还可作为你的参考范例。

css 实现导航菜单

css 实现导航菜单...

wgchen 2756

纯div+css制作的弹出菜单

纯div+css 弹出菜单 水平三级横向弹出菜单

HTML5+CSS3实现简单菜单导航栏

期望效果： 纯HTML代码视图效果： 纯HTML视图的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航菜单的设计与实现</title> <!--<link rel="sty...

cuit_海妖 6177

DIV+CSS设计的动感横向导航

效果图:演示代码: DIV+CSS打造精美导航菜单，sky整理收集。 body{ background-color: #000000; } #fbtn{ display:none; overflow:hidden; border-style:solid; border-width:1px; border-color:#e1e1c9 #e1e1c9 #6e6e56 #6e6e56; padding:1 1 1 1; width:115px; height:30px; } #fbtn_txt{ position:relative; } #fbtn_txt div{ height:30px;

MICS-6814多气体传感器与ESP32-C3 Mini接口构建空气监测系统

cararenuity C3 Mini的多个ADC引脚，Wi-Fi和蓝牙LE以及紧凑的设计使其成为嵌入式物联网应用的绝佳选择。在这个项目中，我们将把MICS-6814多气体传感器与基于esp32 -C3的开发板cararenuity C3 Mini连接起来。更多模拟引脚：与ESP8266只有一个ADC引脚不同，基于esp32 -C3的cararenuity C3 Mini提供多个ADC引脚，使其成为多传感器应用的理想选择。紧凑可靠：该板的小尺寸使其成为嵌入式应用的理想选择，而不会牺牲性能。

hie98894的博客 770

div+css水平三级导航菜单

纯div+css水平三级导航菜单_ /* common styling */ .menu {font-family: arial, sans-serif; width:749px; height:30px; position:relative; margin:0; fon

struggle_xu 1718

KEGG数据库与KAAS工具：基因功能注释的实用指南

本文提供了使用KEGG数据库与KAAS工具进行基因功能注释的完整实用指南。详细阐述了如何从准备基因或蛋白序列开始，通过KAAS服务器获取KEGG Orthology（KO）编号，并解读注释结果。文章进一步介绍了如何利用KOBAS工具进行通路富集分析，将定性观察转化为定量洞察，并分享了提高注释准确率、处理大数据集及使用API等避坑技巧与高阶方法，为基因组学、转录组学研究者奠定坚实的数据分析基础。

weixin_29292535的博客 390

html京东下拉菜单设置,div css下拉导航菜单（图+演示）

div css下拉导航菜单(图+演示)，div css下拉导航菜单,css导航菜单下拉CSS导航菜单(CSS下拉菜单演示图)查看演示-CSS下拉菜单样式：下拉导航菜单/以下有DIV CSS下拉菜单打包源文件下载。HTML代码如下：DIV CSS下拉菜单-DIVCSS5cssDIV+CSScss手册 css3手册 CSS工具 css教程 css hackcss模块div cssdiv css基础 h...

weixin_29577845的博客 905

C#串口通信从入门到精通（11）——串口接收的数据存储到本地文件（txt、csv）

本文详细介绍如何将串口通信将数据进行本次存储，主要介绍常用的csv、txt格式文件，由多年实战经验总结，绝对干货！

qq_34059233的博客 7237

OCR文字识别领域经典论文总结

本篇将介绍文字识别经典论文，内容包括文字检测、文字识别、端到端识别等方法，具体将分别对论文算法简介、思路、代码等几个部分展开介绍。目前各部分只举例经典论文，算法没有全部写完，后续会将在此部分基础上更新更多论文综述及代码实战部分。.................................

专注大数据与人工智能技术分享，欢迎私信加群互相学习！ 1万+
上一篇： 5款DIV+CSS导航菜单(三)
下一篇： 5款DIV+CSS导航菜单(五)
点赞 0
评论 0
书签 书签 0
wangle100wangle
wangle100wangle
博客等级 码龄19年 16粉丝 61原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值