css横向二级导航菜单代码（横向导航栏css代码）[20240422更新]

本篇文章给大家谈谈css横向二级导航菜单代码，以及横向导航栏css代码对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、css编写的简单的二级菜单怎么横向排列？
• 2、如何使用css，布局横向导航栏
• 3、怎么样制作二级横向导航菜单（二级菜单横向展开），最好只用css，如果要带javascript，最好也简单一点
• 4、CSS技巧分享：如何用css制作横排二级下拉菜单
• 5、css 二级导航横向菜单的核心代码是什么

css编写的简单的二级菜单怎么横向排列？

这是我写的一个导航，你自己看吧。li并列应该定义其float属性为left。

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"

HTML

HEAD

TITLE menu /TITLE

/HEAD

style

body{

padding-top:200px;

text-align:center;

font-size:13px;

}

#content{

margin:0 auto;

text-align:left;

width:720px;

background:orange;

background-color:black;

}

ul{

margin-top:1px;

list-style:none;

}

#father li{

float:left;

position:relative;

margin-right:10px;

width:120px;

text-align:center;

border:1px solid black;

border-bottom:none;

}

#father li a:link,#father li a:visited{

line-height:30px;

color:darkred;

font-weight:bold;

}

#father li ul *{

float:none;

margin-right:0px;

padding:0;

color:none;

width:90px;

background-color:orange;

border:none;

}

.child{

position:absolute ;

top:29px;

right:0px;

display:none;

}

#father li ul li a:link,#father li ul li a:visited{

margin:1px;

color:blue;

text-decoration:none;

font-weight:normal;

line-height:20px;

}

#father li ul li a:hover{

background-color:white;

}

/style

script

function showMenu(emt,id1,id2){

document.getElementById(id1).style.textDecoration = "none";

document.getElementById(id1).style.color = "white";

document.getElementById(id2).style.display = "block";

emt.style.backgroundColor = "orange";

emt.style.borderColor = "white";

}

function hiddenMenu(emt,id1,id2){

document.getElementById(id1).style.textDecoration = "underline";

document.getElementById(id1).style.color = "darkred";

document.getElementById(id2).style.display = "none";

emt.style.backgroundColor = "black";

emt.style.borderColor = "black";

}

/script

BODY

/table

div id="content"

ul id="father"

li onmouseover="showMenu(this,'a1','ul1')" onmouseout="hiddenMenu(this,'a1','ul1')"

a id="a1" href="#"主页/a

ul id="ul1" class="child"

lia href="#"文字测试/a/li

lia href="#"使用中文字符/a/li

lia href="#"你看可以吗/a/li

lia href="#"Item 4/a/li

lia href="#"Item 5/a/li

lia href="#"Item 6/a/li

lia href="#"Item 7/a/li

/ul

/li

li onmouseover="showMenu(this,'a2','ul2')" onmouseout="hiddenMenu(this,'a2','ul2')"

a id="a2" href="#"程序设计/a

ul id="ul2" class="child"

lia href="#"JAVA/a/li

lia href="#"C/C++/a/li

lia href="#"C#.NET/a/li

lia href="#"游戏开发/a/li

lia href="#"汇编/a/li

/ul

/li

li onmouseover="showMenu(this,'a3','ul3')" onmouseout="hiddenMenu(this,'a3','ul3')"

a id="a3" href="#"网页技术/a

ul id="ul3" class="child"

lia href="#"HTML/a/li

lia href="#"CSS/a/li

lia href="#"JavaScript/a/li

lia href="#"XML/a/li

lia href="#"ASP/a/li

lia href="#"JSP/a/li

lia href="#"PHP/a/li

lia href="#"Perl/a/li

/ul

/li

li onmouseover="showMenu(this,'a4','ul4')" onmouseout="hiddenMenu(this,'a4','ul4')"

a id="a4" href="#"动态网页/a

ul id="ul4" class="child"

lia href="#"ASP/a/li

lia href="#"JSP/a/li

lia href="#"PHP/a/li

lia href="#"Perl/a/li

/ul

/li

li onmouseover="showMenu(this,'a5','ul5')" onmouseout="hiddenMenu(this,'a5','ul5')"

a id="a5" href="#"关于我/a

ul id="ul5" class="child"

lia href="#"Item 1/a/li

lia href="#"Item 2/a/li

lia href="#"Item 3/a/li

lia href="#"Item 4/a/li

lia href="#"Item 5/a/li

/ul

/li

/ul

div

/BODY

/HTML

如何使用css，布局横向导航栏

如果是导航菜单可以使用ul无需列表来制作

同时使用CSS中的float：left来控制li靠左浮动即可实现横向菜单

注意UL或UL的父级容器宽度必须大于所有li宽度的和

例如styleul {padding:0;margin:0;list-style:none;width:600px;height:50px;line-height:50px;text-align:center;}ul li {width:100px;height:50px;float:left;}styleulli菜单项目1/lili菜单项目2/lili菜单项目3/lili菜单项目4/lili菜单项目5/lili菜单项目6/liul

怎么样制作二级横向导航菜单（二级菜单横向展开），最好只用css，如果要带javascript，最好也简单一点

二级菜单导航最主要的还是定位position。理解了定位的用法，就可以使用css来实现简单的菜单效果。对于低版本的浏览器，则可以使用onMouseover来动态控制当前主导航条目的class。

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

工具/材料

notepad++

浏览器

打开Notepad++，先输入个页面框架

！DOCTYPE html

html xmlns=""

hade

/hade

body

/body

框架好了，那么就该定义页面的title，关键词keyword，和描述description

meta charset="UTF-8" content="text/html" http-equiv="content-type"

title纯css二级导航下拉菜单/title

meta name="keyword" content="搜狗略懂"

meta name="description" content="描述"

这些内容只能在head/head中完成。

定义页面使用的css样式，也是需要在head里定义的。

style type="text/css"

* {

margin:0;

padding:0;

}

.jiao ul li a:hover{

color:#red;

}

ul, li {

list-style:none;

}

a {

text-decoration:none;

}

.jiao {

border:5px solid #pink;

border-right:none;

overflow:hidden;

float:left;

margin:200px 0 0 600px;

}

.jiao ul li ul li a {

border-right:solid;

border-top:2px dotted #666;

background:#black;

}

.jiaoulli { float:left;}

.jiao ul li a { width:150px; height:80px; text-align:center; line-height:100px; display:block; border-right:5px solid #red; background:#red; color:#red;}

.jiao ul li ul { position:absolute; display:none;}

.jiao ul li:hover ul{ display:block; }

.jiaoulliulli { float:none;}

!--navul只选择nav下一级里面的ul元素

nav ul选择nav内所包含的所有ul元素

navul比nav ul限定更严格，必须后面的元素只比前面的低一个级别。

这里根据你的需求来自己定义。

--

/style

添加一个DIV标签，在页面中划分出一个块来，用来显示。

div中所用的样式为刚才咱们声明的样式“jiao”这个盒子来描述

然后使用无序标签ul+样式li 来实现模块。

div class="jiao"

ul

lia href="#"搜狗略懂/a

ul

lia href="#"搜狗问问/a/li

lia href="#"搜狗输入法/a/li

lia href="#"搜狗浏览器/a/li

lia href="#"搜狐/a/li

/ul

/div

放上全部的代码吧，可以参考一下啊，

!DOCTYPE html

html xmlns=""//允许你通过一个网址来识别你的标记

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

meta name="keyword" content="利用css实现下拉菜单"

meta name="description" content="搜狗略懂、css分享"

titlecss实现下拉导航栏菜单/title

style type="text/css"

* {

margin:0;

padding:0;

}

.jiao ul li a:hover{

color:#red;

}

ul, li {

list-style:none;

}

a {

text-decoration:none;

}

.jiao {

border:5px solid #pink;

border-right:none;

overflow:hidden;

float:left;

margin:200px 0 0 600px;

}

.jiao ul li ul li a {

border-right:solid;

border-top:2px dotted #666;

background:#black;

}

.jiaoulli { float:left;}

.jiao ul li a { width:150px; height:80px; text-align:center; line-height:100px; display:block; border-right:5px solid #red; background:#red; color:#red;}

.jiao ul li ul { position:absolute; display:none;}

.jiao ul li:hover ul{ display:block; }

.jiaoulliulli { float:none;}

!--navul只选择nav下一级里面的ul元素

nav ul选择nav内所包含的所有ul元素

navul比nav ul限定更严格，必须后面的元素只比前面的低一个级别。

这里根据你的需求来自己定义。

--

/style

/head

body

div class="jiao"

ul

lia href="#"搜狗略懂/a

ul

lia href="#"搜狗问问/a/li

lia href="#"搜狗输入法/a/li

lia href="#"搜狗浏览器/a/li

lia href="#"搜狐/a/li

/ul

/li

/ul

/div

/body

/html

如果要添加更多的菜单，只需要后边继续添加ul/li即可

特别提示

写代码过程中一定要记得换行，开头留空，否则过后找东西，连你自己都不知道写的是什么。何谈从哪里找起？

css 二级导航横向菜单的核心代码是什么

style    

* {margin:0px; padding:0px;}    

li {list-style:none; width:100px; height:30px; font-size:14px; text-align:left; line-height:30px; border:1px solid #000; position:relative;}    

.boxli {float:left; position:relative;}    

.son {position:absolute; top:30px; left:-1px;}    

.grason {position:absolute; top:-1px; left:100px;}    

.son,.grason {display:none;}    

.active {display:block; background:#FF0;}    

/style    

script    

window.onload=function(){    

var aLi = document.getElementsByTagName('li');    

for(var i=0;iaLi.length;i++)    

{    

aLi[i].onmouseover = function(){    

this.className = 'active';    

var oSon = this.getElementsByTagName('ul')[0];    

if(oSon)    

{    

oSon.style.display='block';    

}    

};    

aLi[i].onmouseout = function(){    

this.className = '';    

var oSon = this.getElementsByTagName('ul')[0];    

if(oSon)    

{    

oSon.style.display='none';    

}    

};    

}    

};    

/script    

/head    

body    

ul class="box"    

li首页/li    

li公司简介    

ul class="son"    

li大事件/li    

li领导致辞    

ul class="grason"    

li2013年    

ul class="grason"    

li10月份/li    

li9月份/li    

li8月份/li    

/ul    

/li    

li2014年    

ul class="grason"    

li10月份/li    

li9月份/li    

li8月份/li    

/ul    

/li    

/ul    

/li    

li企业文化/li    

/ul    

/li    

li联系我们/li    

li产品显示/li    

/ul    

/body

css横向二级导航菜单代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于横向导航栏css代码、css横向二级导航菜单代码的信息别忘了在本站进行查找喔。