纵向导航菜单及二级弹出菜单(实践可行)

最新推荐文章于 2023-04-03 21:45:00 发布
最新推荐文章于 2023-04-03 21:45:00 发布
阅读量751 收藏
点赞数
分类专栏： div+css 文章标签： xhtml border menu html 文档 div



演示效果如上

代码;


<!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=gb2312" />
<title>菜单栏</title>
<style type="text/css">
<!--
#menu ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 1.5px;
}
#menu {
    width: 100px;
    border: 1px solid #CC;
}
#menu ul li {
    line-height: 26px;
    background-color: #eee;
    height: 26px;
    padding-top: 0px;
    padding-right: 8px;
    padding-bottom: 0px;
    padding-left: 8px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #ccc;
    position: relative;
}
a {
    color: #000000;
    text-decoration: none;
}
a:hover {
    color: #FF0000;
}
body, ul, li, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd { margin: 0px; padding: 0px; font-size: 12px; font-weight: normal; }
ul { list-style: none; }
img { border-style: none; }
#menu ul li ul {
    display: none;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-left-style: solid;
    border-top-color: #ccc;
    border-right-color: #ccc;
    border-bottom-color: #ccc;
    border-left-color: #ccc;
    position: absolute;
    width: 100px;
    left: 100px;
    top: 0px;
}
#menu ul li:hover ul {
    display: block;
}
-->
</style>
</head>

<body>
        <div id="menu">
        <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">网页版式布局</a>
        <ul>
            <li><a href="#">自适应宽度</a></li>
            <li><a href="#">固定宽度</a></li>
        </ul>
        </li>
        <li><a href="#">div+css教程</a>
        <ul>
        <li><a href="#">新手入门</a></li>
        <li><a href="#">视频教程</a></li>
        <li><a href="#">常见问题</a></li>
        </ul>
        </li>
        
        <li><a href="#">div+css实例</a></li>
        <li><a href="#">常用代码</a></li>
        <li><a href="#">站长杂谈</a></li>
        <li><a href="#">技术文档</a></li>
        <li><a href="#">资源下载</a></li>
        <li><a href="#">图片素材</a></li>
        
        </ul>
        </div>
</body>
</html>






飘飘哥
关注
专栏目录
学习笔记（2）纵向导航菜单及二级弹出菜单(1)，web前端开发职业
2401_84097774的博客
04-06 417
如果我们把前边的#menu去掉，那么将是对ul标签重定义，重定义的属性将应用到全局，而前边加上#menu后，将是定义ID为menu元素内ul的样式，设置它的样式只对#menu下的ul生效，不对它之后的ul生效，这个有点像编程中的局部变量，而直接定义ul则相当于全局变量。#menu ul li 是定义ID为menu元素内ul下的li，派生选择器可以使我们不用再给每个li定义一个样式名来定义样式，只需使用派生选择器，从它的父元素处选择即可，这样能大大提高效率。在下面的例子中，我们对所有的标题元素进行了分组。
专升本信息技术
热门推荐
Hello_world_go的博客
04-24 1万+
专升本信息技术
css纵向导航菜单及二级弹出菜单
12-23
纵向导航菜单及二级弹出菜单的CSS代码。直接看html上面的style标签。
html二级菜单纵向,纯CSS制作二级导航菜单(纵向)，不用JS/jquery，响应速度快
weixin_30569303的博客
05-30 1345
制作二级导航菜单(纵向)#menu{width: 200px;border: 1px solid #999;}#menu ul{margin: 0px;padding: 0px;list-style: none;/* 隐藏默认列表符号*/}#menu ul li{background: #06C;height: 35px;line-height: 35px; /*行距*/text-align: ...
第四天 纵向导航菜单及二级弹出菜单
Yao_Qinwei's Blog
05-06 911
今天我们开始学习《十天学会web标准(div+css)》的纵向导航菜单及二级弹出菜单，包含以下内容和知识点： 纵向列表标签的默认样式css派生选择器css选择器的分组纵向二级列表相对定位和绝对定位 一、纵向列表 纵向列表或称为纵向导航，在网站的产品列表中应用比较广泛，如淘宝网左侧的淘宝服务，今天我们就学习一下纵向导航的制作 先新建一个页面，然后插入一个ID为menu的div，然后在设计
十天学会Div+CSS第四天之【纵向导航与二级菜单】
weixin_34138056的博客
08-07 253
一、纵向列表纵向列表或称为纵向导航，在网站的产品列表中应用比较广泛，如淘宝网左侧的淘宝服务，今天我们就学习一下纵向导航的制作先新建一个页面，然后插入一个ID为menu的div，然后在设计视图中选中文字，点击工具栏的ul图标，即会自动插入ul和li，然后修改文字内容为你需要的内容。 &lt;div id="menu"&gt; &lt;ul&gt; &lt;li&gt;首页&lt;/li&g...
智慧电厂信息系统设计方案（下）
最新发布
2301_76549664的博客
04-03 3981
资产管理部分 设备管理系统 目标 实现设备管理的科学化,保证设备能够保持一流的运行性能，在保证安全发电的前提下，进一步降低发电成本，获得最大利润和回报，确保资产物尽其用，尽可能缩短设备停机时间；降低操作维护成本，改善设备可靠性，建立成熟的故障跟踪，不断提高设备健康水平，最大限度减少设备故障停机；使有关人员及时、准确地了解电厂设备的静态及动态信息，以便根据实际生产需要，对设备现状、检修工作计划、备品备件库存量做出必要的调整，确保发电设备安全经济运行，并获得更高的设备运行安全性。 功能
该想的不该想到的方法~测试方法总结
十亩之间的博客
06-19 806
网站测试方法一、性能测试性能测试可以检验网站响应速度、承受负载和压力的能力。（1）链接速度测试。用户链接到网站的速度根据上网方式的不同而不同，他们或者电话拔号，或者是宽带上网。（2）负载测试。负载测试是为了测试网站同在某一负载级别上的性能，以保证Web系统在需求范围内正常工作。（3）压力测试。负载测试应该安排在网站系统发布以后，在实际的网络环境中进行测试。二、界面测试 功能测试。Web应用程序中的...
【产品经理】笔记
qq_54613687的博客
03-01 5253
笔记，自己总结的。
信息技术(高)---真题详解
Allure泽宇的博客
06-30 4005
信息技术(高)---真题分析详解
js导航菜单左侧竖纵向二级导航菜单可点击展开与收缩子菜单
12-19
js导航菜单左侧竖纵向二级导航菜单可点击展开与收缩子菜单
可点击展开与收缩的左侧纵向二级导航菜单
11-20
可点击展开与收缩的左侧纵向二级导航菜单
漂亮的CSS二级竖向导航菜单
06-06
很漂亮的CSS下拉菜单导航，喜欢的童鞋可以下载试用下哦！
jquery 横纵向两种二级菜单
03-20
NULL 博文链接：https://hui525.iteye.com/blog/800735
漂亮的纵向二级菜单，只展开一个
05-09
一个纵向下拉菜单~而二级菜单，可以增加到多级，灰色，只展开一个，其他默认收回
纵向二级导航
开心每天，水滴石穿。
02-06 697
dl         {             width: 100px;             height: 170px;             text-align: center;         }         dl dd         {             margin: 0px;             border:1px solid black
纵向导航菜单，点击产生二级菜单
chenweihua556的专栏
05-22 406
&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;ERP信息管理系统&lt;/title&gt; &lt;style type="text/css"&g
学习笔记（2）纵向导航菜单及二级弹出菜单
weixin_44433499的博客
04-24 1126
纵向列表 标签的默认样式 css派生选择器 css选择器的分组 纵向二级列表 相对定位和绝对定位 1.纵向列表 先新建一个页面，div 、ul、li。 <div id="menu"> <ul> <li>首页</li> <li>网页版式布局</li> <li>div+css教程</li...
精简漂亮的导航浮动菜单显示特效演示
dengpenglv1161的博客
09-16 175
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 &l...
web标准学习：纵向导航菜单与二级弹出菜单制作
"第四天——纵向导航菜单及二级弹出菜单" 在Web开发中，创建交互性强、用户体验良好的导航菜单是至关重要的。本资源聚焦于使用HTML和CSS构建纵向导航菜单，以及实现二级弹出菜单的技术。以下是相关知识点的详细说明...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值