html导航栏下拉菜单怎么做（请问怎样做导航栏的下拉菜单）

本文目录

• 请问怎样做导航栏的下拉菜单
• html 导航条下拉列表怎么做
• 如何用HTML编程实现下拉菜单
• html 怎么做鼠标悬浮菜单上的选项能出现下拉菜单

请问怎样做导航栏的下拉菜单

一般来讲实现导航栏指定是采用绝对定位的方式。示例代码如下：
《div class=“nav“》这里是导航所在的DIV容器。《/div》
CSS代码：
.nav{
position:fixed; /* 绝对定位，fixed是相对于浏览器窗口定位。 */
top:0; /* 距离窗口顶部距离 */
left:0; /* 距离窗口左边的距离 */
width:100%; /* 宽度设置为100% */
height:40px; /* 高度 */
z-index:99; /* 层叠顺序，数值越大就越高。页面滚动的时候就不会被其他内容所遮挡。 */
}
设置方式，原理及大致内容请看css代码注释。

html 导航条下拉列表怎么做

先把导航条做出来，然后在每个想有下拉列表的栏目下，画出来下拉的选项，格式一般为
《div》《ul》《li》《a》1《/a》《/li》《li》《a》2《/a》《/li》《/ul》《/div》，然后调好样式。并将div的style设置，display=none
然后获取到你的栏目，添加鼠标事件onMouseover或onclick都行。事件中添加jquery代码。
$(“要下来的那个div的选择器“).slideDown(100); 100为时间
基本上就是这个思路。

如何用HTML编程实现下拉菜单

下拉菜单，其实就是使用HTML+css和一些小小的js就能很简单的实现，

1. 首先需要你有至少有2个div然后在将第一个div作为父级元素，然后在使用position:absolut;绝对定位一下；

2. 然后在使用JS，获取对象，然后添加一个鼠标的onmouseover事件就行了

3. 在这里给你看下我以前的写的一个代码

《!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN“ “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“》

《html xmlns=“http://www.w3.org/1999/xhtml“》

《head》

《title》简洁实用的二级下拉导航菜单《/title》

《meta http-equiv=“content-type“ content=“text/html;charset=gb2312“》

《!--把下面代码加到《head》与《/head》之间--》

《style type=“text/css“》

body,html{padding:0;margin:0;text-align:center;font:normal 14px ’arial’;}

#mainNavBar{width:100%;background:#999;padding:10px 0;}

#nav{width:760px;height:30px;margin:0 auto;}

#nav ul{padding:0;margin:0;}

#nav ul li{position:relative;float:left;width:60px;height:30px;line-height:30px;overflow:hidden;list-style-type:none;}

#nav ul li a{display:block;color:#fff;text-decoration:none;}

#nav ul li a:hover{font-weight:bold;background:#666;}

#subNav{position:absolute;width:150px;top:30px;left:0px;padding:5px;background:#666;color:#fff;text-align:left;}

#subNav a{text-decoration:none;font-weight:normal;display:block;}

#subNav a:hover{color:#f00;background:#f00;}

《/style》

《/head》

《body》

《!--把下面代码加到《body》与《/body》之间--》

《div id=“mainNavBar“》

《div id=“nav“》

《ul》

《li》

《a href=“#“》Add《/a》

《div id=“subNav“》

《a href=“#“》写日志《/a》

《a href=“#“》增加分类《/a》

《/div》

《/li》

《li》

《a href=“#“》Edit《/a》

《div id=“subNav“》

《a href=“#“》修改分类《/a》

《a href=“#“》文章编辑《/a》

《/div》

《/li》

《li》

《a href=“#“》Admin《/a》

《div id=“subNav“》

《a href=“#“》文章管理《/a》

《a href=“#“》评论管理《/a》

《a href=“#“》留言管理《/a》

《a href=“#“》退出《/a》

《/div》

《/li》

《/ul》

《/div》

《/div》

《script language=“javascript“》

var nav=document.getElementById(“nav“).getElementsByTagName(“li“);

for(i=0;i《nav.length;i++){

nav[i].onmouseover=function(){

this.style.fontWeight=“bold“;

this.style.overflow=“visible“;

this.style.background=“#666666“;

}

nav[i].onmouseout=function(){

this.style.fontWeight=“normal“;

this.style.background=“#999999“

this.style.overflow=“hidden“;

}

}

《/script》

《/body》

《/html》

#header #shousuo{

width:950px;

height:50px;

background:#f4f4f4;

margin-top:10px;

}

#shousuo ul li{

line-height:50px;

list-style-type:none;

float:left;

margin-left:5px;

font-weight:bold;

font-size:14px;

}  

html 怎么做鼠标悬浮菜单上的选项能出现下拉菜单

1. 比较好的方法是用JS做，但是非要用CSS呢，也可以

2. 首先 一般HTML中的动态效果都是JS做的，不太推荐用CSS完成

3. dropdown-content {  
       display: none;
       position: absolute;  
       background-color: #f9f9f9;  
       min-width: 160px;
       box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   }  
   .dropdown-content a:hover {  
   background-color: #f1f1f1  
   }  
   .dropdown:hover .dropdown-content {  
       display: block;  
   } 
   .dropdown:hover .dropbtn {  
       background-color: #f5f5f5;  
   }

   首先定义一个 dropdown的类 然后定义 HOVER的伪类实现一些特效