如何用HTML和CSS编写一个导航下拉菜单,要鼠标经过显示

如题如何用HTML和CSS编写一个导航下拉菜单,要鼠标经过显示,只要一个就行

0

3个回答

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

网上太多案例了,参考http://www.zzjs.net/html/1411.html

0
0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
css+jquery鼠标滑过,显示下拉菜单效果
需求:鼠标滑过菜单项,显示下拉菜单。如图: html代码解析:因为下拉菜单为列表,所以需要使用 标签 待办件 1条 协办件 4条 督办件 3条 CSS解析: #im
如何用CSS制作横向菜单 ,鼠标经过变色 并显示下拉菜单...
如何用CSS制作横向菜单 ,鼠标经过变色 并显示下拉菜单... 本篇是转来的我觉得写得很详细,而且简洁..以前我虽然达到了目的但是好像思路不是很好... 只要有父级对象,无论父级是position:relative或poaition:absolute,子级元素都按父级元素来定位 第一步:建立一个无序列表 我们先建立一个无序列表,来建立菜单的结构。代码是: 首
HTML5与CSS3中鼠标悬停会有下拉列表
想来这个功能刚学的时候也是懵懵懂懂、糊里糊涂的,当时在网上也是没怎么找到有用的资料,知道被问题困住的痛苦,一晃半年就过去了,现在我就作为过来人给大家讲讲: 基本代码如下: &amp;lt;div id=&quot;nav&quot;&amp;gt; &amp;lt;nav class=&quot;container&quot;&amp;gt; &amp;lt;ul&amp;gt; &amp;lt;li&amp;gt;&amp;lt;a href=&quot;ddstore.php&quot;&amp
网页中鼠标移上弹出下拉菜单代码
<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-鼠标经过导航条,显示二级下拉菜单
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&amp;gt;
使用HTML+CSS实现鼠标划过的二级菜单栏
&amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;style&amp;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
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt; &amp;lt;style&amp;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鼠标悬停显示下拉菜单
&amp;lt;div class=&quot;swss_xx&quot;&amp;gt; &amp;lt;ul class=&quot;clearfix&quot;&amp;gt; &amp;lt;li id=&quot;xxwh&quot;&amp;gt;&amp;lt;a href=&quot;#&quot; onclick=&quot;javascript:studentInfoUpdate()&quot;&amp;gt;个人信息维护&amp;
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开
$(function () { $(&quot;.dropdown&quot;).mouseover(function () { $(this).addClass(&quot;open&quot;); }); $(&quot;.dropdown&quot;).mouseleave(function(){ $(this).removeClass(&quot;open&quot;); }) })
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放在列表元素下。通过控制列表来实现菜单显隐。这是常用的方式。 我们来了解一下第二种方式来控制菜单。 &amp;lt;div class=&quot;div1_2_2&quot;&amp;...
hover方法的使用,实现鼠标停上显示下拉列表离来后收
hover方法的使用&amp;lt;&amp;lt;实现鼠标停上显示下拉列表离来后收回 $(&quot;.menuSpan&quot;).hover(function(){ $(this).find(&quot;ul&quot;).fadeIn(); },function(){ $(this).find(&quot;ul&quot;).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标签上显示下拉菜单
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;Title&amp;lt;/title&amp;gt; &amp;lt;/head&amp;gt; &amp;lt;body&amp;gt; &amp;lt;style&amp
纯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已达到下划线的动画跟随效果,代码如下: &amp;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...
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 如何用乌班图编写python 人工智能在班组要如何用