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) 的右下角位置。
更多文章：
dos命令清屏（Windows DOS内部命令详解04——del、ren、cls、ver、date、time）
2026年11月6日 15:40
constantly的用法及词组（英语时态对应的时间状语都有哪些）
2026年11月6日 15:20
sql2016安装后如何打开（怎么打开sql server 2016 管理工具）
2026年11月6日 15:10
2026年11月6日 12:50
2026年11月6日 12:20
arcgis怎么设置文本框样式？用JS怎么实现一个把一个文本框中的选中内容加粗，效果基本上和编辑器的加粗效果相同急需
2026年11月6日 10:50
2026年11月6日 10:40
bios setup（“Bios setup”怎么在电脑里面设置）
2026年11月6日 10:00
2026年11月6日 08:10
2026年11月6日 07:50
