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

问题描述

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

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

解决方案

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>

解决方案二:

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

解决方案三:

http://demo.16css.com/menu/913/demo.html
http://www.16css.com/menu/913.html
下载一个使用就行了。

时间: 2024-11-08 18:12:20

html5-如何用HTML和CSS编写一个导航下拉菜单,要鼠标经过显示的相关文章

css快速的导航下拉菜单动画效果

这是一个带变形动画特效的下拉导航菜单特效.该导航菜单在菜单项之间切换时,下拉菜单会快速的根据菜单内容的大小来动态变形,显示合适的下拉菜单大小,效果非常棒. HTML 该导航菜单的HTML结构如下: <header class="cd-morph-dropdown">   <a href="#0" class="nav-trigger">Open Nav<span aria-hidden="true"

CSS技巧分享:如何用css制作横排二级下拉菜单

原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大家来制作横排二级下拉菜单,让我共同来学习吧. 首页我们打看dreamweaver或其它编辑器,创建一个名为nav的导航菜单 <div class="nav"> <ul> <li><a href="#">栏目一</a&

一个用纯CSS制作的网页下拉菜单

网页特效代码实例:一个用纯CSS制作的网页下拉菜单. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"[ <!ELEMENT a (#PCDATA | table)* > ]><html xmlns="http://www.w3.org/1999/xhtml" xml:lang

jQuery结合CSS制作动态的下拉菜单_jquery

当要在一个有限的导航菜单空间放一个大的子菜单时,我们一般采用下拉菜单的形式来弥补空间的不足.本文将带大家用最少的时间,使用jQuery和CSS结合制作一个动态的下拉菜单. XHTML 首先是要在页面的head部分引入jquery库,这是必须的. <script type="text/javascript" src="js/jquery.js"></script> 接着我使用一个无序列表来构建菜单. <ul class="men

实现一个日期下拉菜单

菜单|日期|下拉 这篇文章的主旨是弄清楚如何根据实际需求实现一个联动菜单以及联动菜单的原理,实例是实现一个日期选择下拉菜单.本文调试环境为IE6/firefox1.5. 首先来分析一下日期下拉菜单的需求.建议大家在写任何程序的时候都应该在动手编程之前想清楚自己需要些什么,这样编程才有效率. 年份: 一般来说有一个有效年份,比如说1900年至当前年份才是为效的,这个要根据实际需求来确定,如果是该下拉菜单是用来选择出生年月日还得把最大的年份减到一定的数目,如果有人的生日选择了2005年(即当前的年份

css结合js制作下拉菜单的具体实现

 这篇文章主要介绍了css结合js制作下拉菜单的具体实现,需要的朋友可以参考下  代码如下: <%@page pageEncoding="utf-8"  contentType="text/html;charset=utf-8" %>    <HTML>  <HEAD>  <title>WebForm5</title>    <style>/* Root = Horizontal, Second

框架-界面用QUI 怎么写一个单选下拉菜单

问题描述 界面用QUI 怎么写一个单选下拉菜单 界面用QUI框架,在jsp里面写一个下拉菜单,下拉菜单的数据从后台数据库中查询获取, jsp页面中该怎么写?js代码该怎么写?action里面的方法该怎么写? 解决方案 http://www.uileader.com/v3/pages/sample.html 解决方案二: 参考:http://www.codefans.net/soft/20904.shtml

如何解决这样一个动态下拉菜单赋值的问题

问题描述 在datagridView中设置了一个ComboBox下拉菜单为了限制用户的选择范围,采用的是DropDownList下拉菜单的DataSource是动态绑定了一个数据库辣莫问题来了在数据绑定范围变化(比如缩小时)时,我的历史数据读入就会出错(因为下拉菜单中已经没有对应数据),这种的问题用什么思路去解决呢,先感谢各位大神了 解决方案 解决方案二:这跟什么ComboBox没有关系你用别的控件,一样会出错你历史记录里放的是编号,而码表里放的是文本码表才是主表,历史记录表是从表,历史记录表的

Bootstrap CSS组件之按钮下拉菜单_javascript技巧

按钮下拉菜单 结合使用.btn-group(btn-group-lg/btn-group-sm/btn-group-xs) .dropup .btn .dropdown-menu 按钮下拉菜单是在普通的下拉菜单的基础上封装了.btn样式得效果,就类似于单击一个button按钮,然后显示隐藏的下拉菜单. 组合式下拉菜单 分离式下拉菜单 向上弹起的下拉菜单 //源码,css实现方式主要是设置.dropdown-menu样式容器的bottom为100% .dropup .dropdown-menu,