hover就好了,ie6-不支持，不过也不需要考虑ie6了。。
<!doctype html>
<style>
ul.menu, ul.menu li{margin:0px;padding:0px;list-style:none;position:relative;}
ul.menu li{line-height:25px}
ul.menu li{float:left;margin-left:10px}
ul.menu div{display:none;position:absolute;top:20px;left:0px}
ul.menu div a{display:block}
ul.menu li:hover div{display:block;}
</style>
<ul class="menu">
<li><a href="#">Menu1</a><div><a href="#">menu11</a><a href="#">menu12</a></div></li>
<li><a href="#">Menu2</a><div><a href="#">menu21</a><a href="#">menu22</a></div></li>
<li><a href="#">Menu3</a><div><a href="#">menu31</a><a href="#">menu32</a></div></li>
</ul>
1
0
- 其他相关推荐
- css+jquery鼠标滑过，显示下拉菜单效果
- 需求：鼠标滑过菜单项，显示下拉菜单。如图： html代码解析：因为下拉菜单为列表，所以需要使用 标签 待办件 1条 协办件 4条 督办件 3条 CSS解析： #im
- 如何用CSS制作横向菜单 ,鼠标经过变色 并显示下拉菜单...
- 如何用CSS制作横向菜单 ,鼠标经过变色 并显示下拉菜单... 本篇是转来的我觉得写得很详细,而且简洁..以前我虽然达到了目的但是好像思路不是很好... 只要有父级对象，无论父级是position:relative或poaition：absolute，子级元素都按父级元素来定位 第一步：建立一个无序列表 我们先建立一个无序列表，来建立菜单的结构。代码是： 首
- HTML5与CSS3中鼠标悬停会有下拉列表
- 想来这个功能刚学的时候也是懵懵懂懂、糊里糊涂的，当时在网上也是没怎么找到有用的资料，知道被问题困住的痛苦，一晃半年就过去了，现在我就作为过来人给大家讲讲： 基本代码如下： &lt;div id="nav"&gt; &lt;nav class="container"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="ddstore.php"&
- 网页中鼠标移上弹出下拉菜单代码
- <br /><SCRIPT language=javascript><!-- <br />function out() <br />{ <br />if(window.event.toElement.id!="menu" && window.event.toElement.id!="link") <br />menu.style.visibility="hidden"; <br />} <br />//--> <br />function out1() <br />{ <br />if(window.eve
- css创建鼠标悬停下拉菜单样式
- 下拉菜单在网站中到处可见。 下面用css设置下拉菜单样式。 淘宝 我的淘宝 已买到的宝贝 我的足迹 css来设置样式 .dropdown-content { display: none;//隐藏下拉菜单的内容 position: absol
- JS+CSS实现鼠标滑过时动态翻滚的导航条效果
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> "Content-Type" content="text/html; charset=gb2312" /> 动态翻滚的导航条 "tex
- jquery-鼠标经过导航条，显示二级下拉菜单
- &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
- 使用HTML+CSS实现鼠标划过的二级菜单栏
- &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;style&gt; body{ text-align:center; } .menuDiv{ border:1px solid #aac; overflow:hidden; display:inline-block; } .menuD...
- web前端，鼠标放上去出现下拉框html+css
- dl{ width: 100px; display: none; margin-top: -20px; text-align: center; } dl dt{ border-bottom: solid #000 1px;
- 鼠标滑过 下拉菜单CSS3
- &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; .hezi{ position: relative; display: inline-block;
- css隐藏下拉菜单的设置，当鼠标放上去时，自动显示下拉菜单
- html部分： .... ..... ..... css部分: #a ul li{ display:none } #a ul li:hover li{ display:list-item; } 在li里写上内容，就能实现；
- 实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单
- 使用Bootstrap导航条组件时，如果你的导航条带有下拉菜单，那么这个带下拉菜单的导航在点击时只会浮出下拉菜单，它本身的href属性会失效，也就是失去了超链接功能，这并不是我想要的，我希望导航条的链接可以正常打开它的链接，但又需要下拉菜单功能，开始折腾~ 首先解决带下拉菜单的导航条可以点击问题，下拉菜单效果是JS实现的，分析bootstrap.js文件发现，Bootstrap把下拉菜单写成
- jquery鼠标滑过显示二级下拉菜单代码
- jquery鼠标滑过显示二级下拉菜单代码，代码完成可运行。包括html, js, css.
- 导航栏Tab内容 hover延迟出现（CSS）
- 导航栏的菜单TAB在鼠标hover的时候会在下方出现隐藏的内容是很多网站很常见的一种样式。 大家很容易想到的是在每个TAB下让各自单元的内容用dispaly:none，先隐藏起来，然后再在：hover选择器中写display:bock样式让其显现出来。可是直接display:block的话隐藏内容瞬间显示，鼠标移开瞬间消失，这样的体验是很不好的。 然后我们又很快想到利用transition来设置
- 鼠标悬停控制下拉框的显示和隐藏
- 先上图：
- 用div+css做下拉菜单，当鼠标移向2级菜单时，为什么1级菜单的a:hover背景色就不管用了？
- 伪类:hover只是鼠标停留当前元素时。 鼠标一离开马上就没有了。 主菜单鼠标经过样式单写一个，例 .nav_hover{background-color:blue;} 判断一下： if（鼠标移到此菜单元素为真 || 2级菜单的显示为真）{ 主菜单元素className = “nav_hover”； }
- js-鼠标经过显示下拉菜单
- 在网页中，下拉菜单的样式非常多，这里介绍一下如何用js代码来控制 分析：1、效果：控制样式display的显示和隐藏 2、事件：当鼠标经过时onmouseover和当鼠标移出时onmouseout 3、获取元素：DOM文档对象模型：赋予js控制结构和样式的能力。document.getElementById（）；获取 元素 通过 id；
- js css鼠标悬停显示下拉菜单
- &lt;div class="swss_xx"&gt; &lt;ul class="clearfix"&gt; &lt;li id="xxwh"&gt;&lt;a href="#" onclick="javascript:studentInfoUpdate()"&gt;个人信息维护&
- Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开
- $(function () { $(".dropdown").mouseover(function () { $(this).addClass("open"); }); $(".dropdown").mouseleave(function(){ $(this).removeClass("open"); }) })
- Bootstrap导航栏下拉菜单鼠标滑过展开
- boostrap的导航栏不提供鼠标滑过展开，通过给类为dropdown的li标签添加和移除open类实现$(function () { $(".dropdown").mouseover(function () { $(this).addClass("open"); }); $(".dropdown").mouseleave(function(){
- 鼠标移入显示一个菜单列表 移出隐藏
- 鼠标移动到图片显示一个菜单列表。移出隐藏菜单列表。 "/> 全部 投保人 险种 //js部分 $(function(){ $("#show").hide(); $("#clicshow").mouseover(function(){ // $("dd:visible").slideUp("slow"); $(this).pare
- 悬浮鼠标实现下拉菜单
- 悬浮鼠标实现下拉菜单 前端页面实现下拉菜单有很多方式。 设置一个div，然后下面有一个子div。通过控制子div的显隐来实现菜单的显示和隐藏。 设置li列表元素，把div放在列表元素下。通过控制列表来实现菜单显隐。这是常用的方式。 我们来了解一下第二种方式来控制菜单。 &lt;div class="div1_2_2"&...
- hover方法的使用,实现鼠标停上显示下拉列表离来后收
- hover方法的使用&lt;&lt;实现鼠标停上显示下拉列表离来后收回 $(".menuSpan").hover(function(){ $(this).find("ul").fadeIn(); },function(){ $(this).find("ul").fadeOut(); ...
- CSS+DIV实现鼠标经过背景变色
- CSS+DIV实现鼠标经过背景变色 供稿：润之康 时间：2009-2-11 22:32:43 方法一 #div:hover{background:#000000;} 解释:鼠标经过id为div的元素时背景变色 IE6.0、Firefox2.0、Opera 9.23都不行 方法二 方法三: .d_over{background-c
- Bootstrap导航条鼠标悬停下拉菜单
- Bootstrap的导航条下拉菜单为了适应移动设备没有鼠标hover的状态，都是点击弹出下拉菜单，为了适应一般网站使用，我稍作了一些修改，鼠标hover时就弹出二级菜单。
- CSS技巧分享：如何用css制作横排二级下拉菜单
- 导航菜单是每个网站所必备的功能，也是每个学习制作网站的朋友所必须接触的，如何用css样式制作一个简单漂亮的二级下拉菜单呢，下来小编就一步一步教大家来制作横排二级下拉菜单，让我共同来学习吧。
- Bootstrap鼠标悬停下拉导航总结
- Bootstrap鼠标悬停下拉导航总结 以bootstrap.js未压缩版本V3.3.7为例。 Bootstrap的导航条为适应移动设备，都是click弹出二级下拉菜单，没有鼠标hover的特效； 所以为了实现鼠标hover弹出下拉菜单，提升网站用户体验和满足一般网站特效需求，将直接改动bootstrap的源码。 源码修改 找到下图，第908~913行： 修改为： $(d...
- js鼠标移动导航菜单出现下拉菜单
- 非常实用的导航菜单 $(function(){ $('#mobanwang_com li').hover(function(){ $(this).children('ul').stop(true,true).show('slow'); },function(){ $(this).children('ul').stop(true,true).hide('slow'); });
- 标签隐藏、鼠标移到li标签上显示下拉菜单
- &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;style&
- 纯CSS的导航下拉菜单
- 写在案例前： 本案例并非原创，百度一搜“css下拉菜单”一定能看见一模一样的案例，而且不止一个，所以就仿照这个案例又自己做了一遍，并且总结一下自己遇到的一些问题结合思考给出的解决办法，虽然不知道原作者是谁，但是还是要在这里感谢一下原作者，给了我不止一点思路。废话不多说，上图。 <nav> <ul> <li><a href="#">导航一<
- HTML鼠标移到导航上面时当前的LI变色
- 原文地址：http://www.cnblogs.com/roucheng/p/3452230.html 鼠标移到导航上面 当前的LI变色 处于当前的位置，广泛应用于当前导航。 点击这里查看效果 以下是源代码： 1 html> 2 head> 3 meta http-equiv="Content-Type" content="text/html; charset=utf8"
- Bootstrap导航条可点击和鼠标悬停显示下拉菜单
- 默认的bootstrap的二级或多级菜单是点击才出现的。那么如果你想点击时跳转页面，就只能是实现点击出现下拉菜单，页面跳转失效。 如何实现点击跳转页面，鼠标滑过出现下级菜单呢？？ 你就需要修改Bootstrap.js里面的一个js。你也可以在自己的页面中覆盖原来的js啦 $(document).ready(function(){ $(document).off('click
- 纯CSS代码导航栏渐变下拉菜单
- 今天尝试着做导航栏下拉菜单。 编写思路。 ①将二级menu的ul高度设为0px并将溢出的部分隐藏； ②再运用transition过渡高度和透明度的方式编写渐变下拉菜单； ③用伪类hover标记鼠标放置在一级菜单相应li上则二级菜单出现。
- 如何用hover实现下拉菜单
- 作为初学者的一点积累<!Doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> div,ul,span,li { padding: 0;
- Html+css、javascript和JQuery三种方法实现导航条下拉菜单的炫酷效果
- 分别采用Html+css、javascript和JQuery三种方法实现导航条下拉菜单的炫酷效果
- CSS实现鼠标经过div时改变背景图片
- 很多时候我们都能够看到，当我们用鼠标滑过div时，div的背景将会变成另外一个图片。下面我就将实现该功能的代码分享出来，希望能够帮助到大家。 .biankuang { height: 126px; width: 15%; margin-left: 14px; margin-top: 20px; background-image: url(bj1.png...
- css动画效果：实现鼠标移入菜单栏文字下出现下划线
- 菜单栏下划线动画 body{ margin: 0; padding: 0; } header{ width: 100%; height: 100px; background-color:#2D3E50; } header nav ul{ width: 50%; padding: 0; margin: 0 auto; }
- 鼠标经过导航自动显示子列表
- 无标题文档 .menubar {line-height: 24px;} .menubar .menuend {clear: both;} .menuitem {background: #fff; border: 1px solid #c00; position: relative; float: left; margin-r
- js css 实现导航栏下划线鼠标跟随效果
- pc网页端商城导航栏鼠标滑过会出现下划线，接下来就是实现鼠标滑过出现下划线的动画效果 用到的知识 css的伪元素选择器 ::before。 效果图如下： 下划线的效果一般是给元素添加boder-bottom实现的，但这是一个生硬的效果，为了给下划线添加动画效果，我们使用伪元素选择器，通过::before设置border-bottom已达到下划线的动画跟随效果，代码如下： &lt;!DOC...
- 利用:hover, :after实现鼠标经过图标显示一张图片的效果
- :hover跟:after应该平时css都有用过，这次想要纯css实现鼠标经过某元素显示一张图片的效果。:after能添加好图片，控制好位置，:hover来控制显示隐藏。重要的就是在鼠标经过时添加:after的实现，写法为:hover::after，代码如下：.lsow-icon-list .lsow-icon-list-item:nth-child(2):hover::after{ conte...