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

1）纵向导航菜单

<styletype="text/css">

body { font-family: Verdana;font-size: 12px; line-height: 1.5; }

a { color: #000;text-decoration: none; }

a:hover { color: #F00; }

#menu { width: 100px; border:1px solid #CCC; }

#menu ul { list-style: none;margin: 0px; padding: 0px; }

#menu ul li { background:#eee; padding: 0px 8px; height: 26px; line-height: 26px;

border-bottom: 1px solid #CCC; }

</style>

<body>

<divid="menu">

<ul>

<li><ahref="#">网页版式布局</a></li>

</ul>

</div>

</body>

默认样式是指，ul标签默认样式前面原点，加载图片带边框等，去掉默认样式方法：

ul{list-style:none;}

img{border-style=none;}

css派生选择器：有助于节约大量class的定义。#menu ul和#menu ul li即为派生选择器，只对id为menu的ul生效，属性可以被id为menu下的li继承。

2）二级弹出菜单

当鼠标放到一级菜单上后，弹出相应的二级菜单，移去鼠标后自动消失。

body { font-family: Verdana;font-size: 12px; line-height: 1.5; }

img { border-style: none; }

a { color: #000;text-decoration: none; }

a:hover { color: #F00; }

#menu { width: 100px; border:1px solid #CCC; border-bottom:none;}

#menu ul { list-style: none;margin: 0px; padding: 0px; }

#menu ul li { background:#eee; padding: 0px 8px; height: 26px; line-height: 26px;

border-bottom: 1px solid #CCC;position:relative; }

#menu ul li ul { display:none;position: absolute; left: 100px; top: 0px; width:100px;

border:1px solid #ccc;border-bottom:none; }

#menu ul li.current ul {display:block;}

#menu ul li:hover ul {display:block;}

</style>

<ul>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

</ul>

</div>

#menu ul li:hover ul { display:block;}代表当鼠标放置到一级菜单时，二级菜单显示。display属性none表示元素隐藏；block表示显示。

position定位属性，值relative表示如果对一个元素进行相对定位，首先它将出现在它所在的位置，然后相对于原始起点进行水平或垂直的移动。无论是否移动，元素仍然占据原来的空间；值absolute表示绝对定位，依据浏览器左上角开始计算，绝对定位使元素脱离文档流，因此不占据空间，普通文档流中元素的布局就像绝对定位的元素不存在一样，绝对定位的元素与文档流无关，可以覆盖页面上其他元素，可通过z-index来控制层级次序，值越高显示越在上层。

父容器使用相对定位，子元素使用绝对定位后，子元素不再相对于浏览器左上角，而是相对于父容器左上角。相对定位和绝对定位需要配合top、right、bottom、left来定位具体位置。

div+css 纵向导航菜单及二级菜单弹出相关推荐

div +css 纵向导航
以下代码实现纵向导航功能,并为导航添加了超链接(用#不可用的超链接代替),如下图所示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...
html 纵向导航,div+css纵向导航如何实现且为导航添加超链接
以下代码实现纵向导航功能,并为导航添加了超链接(用#不可用的超链接代替),如下图所示复制代码代码如下: 无标题文档 body{font-family:Verdana;font-size:18px;l ...
html菜单树实现原理,HTML_DIV+CSS构成树型菜单，这是用DIV+CSS+JS构成的树型菜单 - phpStudy...
DIV+CSS构成树型菜单这是用DIV+CSS+JS构成的树型菜单,采用列表,符合WEB标准,在大多数WIN浏览器下,兼容性不错, xhtml见效果页,我现在做的是二个菜单,如果需要添加,可把 .. ...
下拉菜单（二级菜单）
怎么用HTML+CSS代码写一个下拉菜单(二级菜单): 这是原始的样子: 鼠标移动到上面二级菜单显示鼠标移动到二级菜单上: HTML代码: <li class="list-inlin ...
jQuery一级菜单和二级菜单
1.先做一级菜单,第一步设置body,把大概样子写出来. 2.第二步-1.用css设置通配符. 3.第二步-2.设置ul标签基础样式 . 4.第二步-3.设置类样式. 5.设置jquery内容的第一步 ...
HTML一级菜单和二级菜单区别,JavaScript点击一级菜单打开和关闭二级菜单
[JavaScript点击一级菜单打开和关闭二级菜单] ``` Document #sub_menu_1,#sub_menu_2{ display: none; } ul li:hover{ curs ...
制作下拉菜单（二级菜单）
我们想实现下面这个二级菜单的效果,将鼠标放在一个视频教程的标签上,就会显示下面的二级菜单,不放的话就不显示,而且当鼠标放在二级菜单上二级菜单的字体会变色,如下图所示: 如果有二级菜单的,可以当成子标 ...
css导航栏（二级菜单）
效果: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8& ...
【css布局】左右分布的导航菜单存在二级菜单的高度设置问题
在我们写菜单的时候,经常会在css用到中用到'height:100%'这个属性.这个属性在一级菜单中使用没有问题,从父级元素上一层层传递,渲染准确.如果有二级菜单的存在,还传递'height:100% ...

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

div+css 纵向导航菜单及二级菜单弹出相关推荐

最新文章

热门文章