ydzf.net
当前位置:首页 >> html二级菜单显示与隐藏 >>

html二级菜单显示与隐藏

display:none ,这个属性就可以了.

直接show和hide,或者fadein(100)这么写试试看

.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}//将元素隐藏、不保留其物理空间.menu ul li a:hover {color:#fff; background:#36f;}//设置鼠标悬停时链接的字体颜色.背景颜色.menu ul li a:hover ul {display:block; position:absolute; top:21

思路:1、监听鼠标移入移出事件的方式进行显示和隐藏2、通过hover伪类的css方式进行推荐用第二种方式,这样比较精确而且容易设置举例:<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>蓝色理了个想</title><

写了以下代码希望能理解<html><head><title>【hover是鼠标放在a标签上触发事件的css伪类】</title><style type="text/css">/*二级菜单默认隐藏*/ span{visibility:hidden}/*鼠标触发A标签实现A标签能影响到下面的所有标签【鼠标放到A标签上SPAN标签显示】*/ a:hover span{visibility:visible}</style></head><body><a> 我是一级菜单 <!--二级菜单默认隐藏--> <span>我是二级菜单</span></a></body></html>

这种的一般是是Css+js做的.移动调用JS函数.隐藏,显示

原理很简单的了,你看样式的结构ul下的Li下的ulHTML结构应该是这样:ul,li>一级菜单ul>li>二级菜单你设置一级菜单的LI,鼠标移上的时候,它里面的二级菜单LI显示出来就行了.就是hover而已.这个问题如果纠结这么久,真心推荐你认真看一下CSS的伪类的用法

二级菜单的disabled属性设置为false就可以了

ie中 hover 不兼容 简单改了一下 你自己看下 能显示了<html><head> <style type=text/css> <!-- body{} #navigation{font-family:宋体;font-size:20px;position:absolute;} #navigation ul {margin-left:40px;padding:20px} #navigation li {float:left} #

ul标签已经隐藏,无法触发到li的onmouseover事件.

qyhf.net | sytn.net | 596dsw.cn | alloyfurniture.com | ddng.net | 网站首页 | 网站地图
All rights reserved Powered by www.ydzf.net
copyright ©right 2010-2021。
内容来自网络,如有侵犯请联系客服。zhit325@qq.com