bycj.net
当前位置:首页 >> Css鼠标点击显示二级菜单 >>

Css鼠标点击显示二级菜单

你需要先将二级菜单初始设置为不显示(display:none),然后在一级菜单哪里设置显示(display:block)

ul 最好里面不要再嵌套ul了 你可以把 下拉菜单 写成一个隐藏的div display:none 用JS 控制 当鼠标移动到某个li 时 把 display改为 block; 移开 再改为 none

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

<a class="tooltips" href="#tooltips">这就是Tooltips<span>正是你见到的,这些附加的说明文字是在鼠标经过的时候显示.</span></a> <style type="text/css"> /*Tooltips*/ .tooltips{ position:relative; /*这个是关键*/ z-index:2; } .tooltips:hover

为什么css做的二级导航,当鼠标停留在一级上时候,二级菜单正常显示.当鼠标如果我猜的不错的话,你用的方法是鼠标在一级上时,二级的display设置为

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

从你的代码可以看出 display:none为不显示 如果要其显示的话为display:block;当鼠标移动到一级导航li:hover改变display才会显示,也就是移动到li的内容中才能显示,当你移到二级导航中时加上一个relative为相对定位,占元素空间默认为li的一部分,因此显示正常

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

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

鼠标滑过哪显示啥?滑过 产品介绍 显示下面的子菜单?onmouseover是鼠标移动到某元素执行的鼠标事件.onmousemove是鼠标在某元素上移动执行的事件.你先把这两个分清楚了,根据你的需求是 先获取你要鼠标滑过的元素 也就是产品介

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