div+css 纵向导航菜单及二级弹出菜单

代码如下：

<html>
<head>
<style type="text/css">
.menu{width:130px;border:1px solid #ccc;border-bottom:none;}
.menu ul{list-style:none;margin:0px;padding:0px;background:#F4F4F4;}
.menu ul li {padding:0px 8px;height:26px;border-bottom:1px solid #ccc;line-height:26px;position:relative;}
a {text-decoration:none;color:#333333;}
.menu ul li:hover{background:#E6E6E6;}
.menu ul li ul{display:none;position:absolute;left:130px;top:-1px;width:130px;border:1px solid #ccc;border-bottom:none;}
.menu ul li:hover ul {display:block;}

</style>
</head>
<body>
<div class="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="#">首页</a>
    <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">首页</a></li>
    <li><a href="#">首页</a></li>
    </ul>
</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>

主要注意几点：

派生选择器的使用
避免border边框重复
相对定位和绝对定位的使用

测试结果：

首页
个人网站
- 中华人民共和国
- 中国无产阶级
首页
- 首页
- 首页
- 首页
首页
首页
首页
首页
首页

时间： 2024-10-24 06:06:38

div+css 纵向导航菜单及二级弹出菜单的相关文章

web标准(复习)--4 纵向导航菜单及二级弹出菜单

今天我们开始学习纵向导航菜单及二级弹出菜单,包含以下内容和知识点: 纵向列表标签的默认样式 css派生选择器 css选择器的分组纵向二级列表相对定位和绝对定位一.纵向列表纵向列表或称为纵向导航,在网站的产品列表中应用比较广泛,如淘宝网左侧的淘宝服务,今天我们就学习一下纵向导航的制作先新建一个页面,然后插入一个ID为menu的div,然后在设计视图中选中文字,点击工具栏的ul图标,即会自动插入ul和li,然后修改文字内容为你需要的内容. <style type="text/css&

第四天纵向导航菜单及二级弹出菜单

http://www.aa25.cn/div_css/905.shtml 今天我们开始学习<十天学会web标准(div+css)>的纵向导航菜单及二级弹出菜单,包含以下内容和知识点: 纵向列表标签的默认样式 css派生选择器 css选择器的分组纵向二级列表相对定位和绝对定位一.纵向列表纵向列表或称为纵向导航,在网站的产品列表中应用比较广泛,如淘宝网左侧的淘宝服务,今天我们就学习一下纵向导航的制作先新建一个页面,然后插入一个ID为menu的div,然后在设计视图中选中文字,点击工具栏

DIV+CSS制作的水平三级横向弹出菜单

<!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-

js+css实现带缓冲效果右键弹出菜单

<!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-Typ

下角动画旋转菜单、圆心弹出菜单ArcMenu 源码解析

支持类似Path的左下角动画旋转菜单及横向划出菜单.圆心弹出菜单项目地址:https://github.com/daCapricorn/ArcMenu 一.关注3个效果点击中心控制点的时候,展开效果: 中心控制点旋转45度的动画周围children 弹出动画 2.点击中心控制点的时候,收缩动画: 中心控制点旋转45度周围children 自旋转并收缩 3.展开时候,点击child 被点击的child放大, 其他chidren 消失二.3个java文件 ArcMenu.java 自定

关于MFC主菜单和右键弹出菜单

一.主菜单.弹出菜单和右键菜单的概念: 主菜单是窗口顶部的菜单,一个窗口或对话框只能有一个主菜单,但是主菜单可以被更改(SetMenu()更改): 创建方式:CMenu::CreateMenu(void); 弹出菜单在菜单项中是带有右向小三角的菜单,主菜单的每个菜单项都是一个弹出菜单(PopMenu),因此弹出菜单是凸型或左凸型: 创建方式:CMenu::CreatePopMenu(void); 右键菜单是点击右键弹出的菜单(响应OnContextMenu). 原文地址:https://www.

纵向导航二级弹出菜单

<!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-Typ

MUI组件三：列表、遮罩蒙版、数字输入框、侧滑导航和弹出菜单

1.list(列表) 列表是常用的UI控件,mui封装的列表组件比较简单,只需要在ul节点上添加.mui-table-view类.在li节点上添加.mui-table-view-cell类即可,如下为示例代码 <ul class="mui-table-view"> <li class="mui-table-view-cell">Item 1</li> <li class="mui-table-view-cell&q

iOS开发——实战技术OC篇&关于蒙板和弹出菜单

关于蒙板和弹出菜单一:关于蒙板蒙板的作用一般就是用来实现不能做其他操作还有一些模糊效果提示用户我们只需要自定义一个View,并且创建两个类方法用来给外界调用实现显示和隐藏 + (void)show; + (void)hide; 显示:直接添加到window上,并且设置和window同样大小,然后设置相应的透明度(alpla) 1 + (void)show 2 3 { 4 5 6 7 8 9 iCocosCover *cover = [[self alloc] init]; 10 11 12