css怎么做下拉式导航栏（div+css制作横向下拉式菜单方面的问题）
本文目录
div+css制作横向下拉式菜单方面的问题
按照你的结构，考虑到ie6不支持li:hover伪类写法，所以用jQuery解决了。
《style type="text/css"》
*{margin:0;padding:0;font-size:14px;line-height:35px;}
a{color:#0099cc;text-decoration:none;}
ul,li{list-style:none;}
#menu{width:800px;height:35px;background:#333333;}
#menu ul li{float:left;width:100px;margin-left:1px;position:relative;}
#menu ul li ul li{margin-left:0;}
#menu ul li a{width:100%;height:100%;text-align:center;display:block;background:#666666;}
/*二级栏目*/
#menu ul li ul{display:none;position:absolute;left:0;top:35px;}
#menu ul li ul a{background:#333333;}
《/style》
《div id="menu"》
《ul》
《li》《a href="#"》一级栏目1《/a》《/li》
《li》《a href="#"》一级栏目1《/a》《/li》
《li》《a href="#"》一级栏目3《/a》
《ul》
《li》《a href="#"》二级栏目1《/a》《/li》
《li》《a href="#"》二级栏目2《/a》《/li》
《li》《a href="#"》二级栏目3《/a》《/li》
《/ul》
《/li》
《li》《a href="#"》一级栏目4《/a》
《ul》
《li》《a href="#"》二级栏目4《/a》《/li》
《li》《a href="#"》二级栏目5《/a》《/li》
《li》《a href="#"》二级栏目6《/a》《/li》
《/ul》
《/li》
《li》《a href="#"》一级栏目5《/a》《/li》
《/ul》
《/div》
《script type="text/javascript" src="js/jq.js"》《/script》《!--这里要引入jQuery库--》
《script type="text/javascript"》
$(function(){
$("#menu ul 》 li").hover(function(){
$(this).find("ul").stop(true,true).show(100);
},function(){
$(this).find("ul").stop(true,true).hide(100);
})
})
《/script》
css导航栏鼠标hover的时候就出现下拉菜单是怎么做的
程序输入如下：
《div id="menu"》
《br/》
《ul》
《li》..《/li》
《li》..《/li》
《li》..《/li》
《/ul》
《/div》
#menu{
overflow:hidden;
height:20px;}
#menu:hover {
height:100px;}
选择鼠标指针浮动在其上的元素，并设置其样式：
a:hover{
background-color:yellow;}
对于HTML 部分：
可以使用任何的 HTML 元素来打开下拉菜单，如：《span》, 或 a 《button》 元素。使用容器元素 (如： 《div》) 来创建下拉菜单的内容，并放在任何你想放的位置上。使用 《div》 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。
对于CSS 部分：
.dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。
更多文章：
数据库管理系统和数据库系统分别侧重（数据库，数据库管理系统，数据库系统，这三个分别是什么意思并举个实例）
2026年9月7日 17:00
2026年9月7日 16:10
2026年9月7日 15:40
springmvc的依赖（springMVC的注入方式有哪几种，这与springMVC依赖）
2026年9月7日 14:00
2026年9月7日 13:00
2026年9月7日 12:40
display flex 自动换行（overflow-y:hidden;overflow-x:auto;无效解决方法）
2026年9月7日 11:00
2026年9月7日 10:50
timestamp without time zone（Postgresql中to_date（）函数使用问题）
2026年9月7日 09:40
2026年9月7日 04:20
