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

Css二级菜单的隐藏与显示

最简单的就是利用CSS层级关系进行编写 比如:<ul class="main_menu"> <li> <span>主菜单</span> </li> <li> <span>主菜单二</span> <ul class="sub_menu"> <li>三级菜单</li> <li>三级菜单二</li> </ul> </li></ul> CSS部分可以这样写:<

写了以下代码希望能理解<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>

.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

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

你的html结构不对,一级菜单的结束li标签放错位置了<!--建立HTML框架--><div id="navigation"> <ul id="listUL"> <li><a href="#">Home</a></li> <li><a href="#">News</a> <ul class="myHide"> <li><a href="#">Lastest News</a></

<div><ul><li>一级菜单<div><ul><li>二级菜单</li></ul></div></li></ul></div> 一个盒子里面套一个盒子,在把布局做的美观点就好了.如果想横项排列的话可以让一级菜单float:left 左浮动 ,二级菜单定义为行块级 在一级菜单下,在设置为隐藏,鼠标hover时候显示,再给二级菜单布置一个背景图片,在设置一个边距border 字体颜色之类的.就好看了.

你试试用JS 来控制他的显示隐藏

在一级分类的 点击时 加入链接参数 可以是A的id,然后在小类前面做个判断,如果的到的A的id大于零就显示小类,否则就不显示

纯CSS的下拉菜单,我理解的意思就是标签套标签,然后再给标签设置样式.在被套的标签设置平时状态为隐藏,再等鼠标移动到上一个标签时,将被套的标签显示(样

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

jtlm.net | qwrx.net | rprt.net | mydy.net | rpct.net | 网站首页 | 网站地图
All rights reserved Powered by www.ydzf.net
copyright ©right 2010-2021。
内容来自网络,如有侵犯请联系客服。zhit325@qq.com