css 调用二级栏目代码问题

html-css036

css 调用二级栏目代码问题,第1张

主要分3种方法：

1.行内式，就是直接在网页中加入css样式表，在标记的后面加上style属性来设定css样式。

如：

<p style="font-size:12pxcolor:#000">行内式测试</p>

注：读取速度最快，但维护最麻烦

2.嵌入式,在页面的<head>和</head>之间。

如：

<style type="text/css">

p{margin: 0padding: 0color:red}

</style>

注：读取速度居中，但维护也居中

3.连接式

<link href="style.css" rel="stylesheet" type="text/css"/>

注：读取速度不及上面2种，但维护较方便；网页设计师最常用~

一、首先，打开dreamweaver或其它编辑器（注：Ctrl+N  新建）

二、接着，写代码

<!doctype html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8">

<title>横排二级下拉菜单</title>

<style type="text/css">

* { margin:0 padding:0}

ul, li { list-style:none}

a { text-decoration:none}

.nav { border:2px solid #ccc border-right:none overflow:hidden float:left margin:100px 0 0 300px}

.nav ul li { float:left}

.nav ul li a { width:120px height:40px text-align:center line-height:40px display:block border-right:2px solid #ccc background:#eee color:#666}

.nav ul li a:hover{ color:#f00 }

.nav ul li ul { position:absolute display:none}

.nav ul li ul li { float:none}

.nav ul li ul li a { border-right:none border-top:1px dotted #ccc background:#f5f5f5}

.nav ul li:hover ul{ display:block }

</style>

</head>

<body>

<div class="nav">

  <ul>

    <li><a href="#">栏目一</a>

      <ul>

        <li><a href="#">二级栏目</a></li>

        <li><a href="#">二级栏目</a></li>

        <li><a href="#">二级栏目</a></li>

        <li><a href="#">二级栏目</a></li>

      </ul>

    </li>

    <li><a href="#">栏目二</a>

      <ul>

        <li><a href="#">二级栏目</a></li>

        <li><a href="#">二级栏目</a></li>

        <li><a href="#">二级栏目</a></li>

        <li><a href="#">二级栏目</a></li>

      </ul>

    </li>

    <li><a href="#">栏目三</a>

      <ul>

        <li><a href="#">二级栏目</a></li>

        <li><a href="#">二级栏目</a></li>

        <li><a href="#">二级栏目</a></li>

        <li><a href="#">二级栏目</a></li>

        <li><a href="#">二级栏目</a></li>

      </ul>

    </li>

    <li><a href="#">栏目四</a></li>

    <li><a href="#">栏目五</a></li>

  </ul>

</div>

</body>

</html>

三、最后，效果图

四、注意：这种写法不支持IE6浏览器，IE6只支持a下的hover，所以无法实现正确的显示，但是微软已经将IE6浏览器淘汰了，但是如果您还在使用，那么请添加相应的js实现。

这是我写的一个导航，你自己看吧。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">

<li><a href="#">文字测试</a></li>

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

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

<li><a href="#">Item 4</a></li>

<li><a href="#">Item 5</a></li>

<li><a href="#">Item 6</a></li>

<li><a 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">

<li><a href="#">JAVA</a></li>

<li><a href="#">C/C++</a></li>

<li><a href="#">C#.NET</a></li>

<li><a href="#">游戏开发</a></li>

<li><a 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">

<li><a href="#">HTML</a></li>

<li><a href="#">CSS</a></li>

<li><a href="#">JavaScript</a></li>

<li><a href="#">XML</a></li>

<li><a href="#">ASP</a></li>

<li><a href="#">JSP</a></li>

<li><a href="#">PHP</a></li>

<li><a 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">

<li><a href="#">ASP</a></li>

<li><a href="#">JSP</a></li>

<li><a href="#">PHP</a></li>

<li><a 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">

<li><a href="#">Item 1</a></li>

<li><a href="#">Item 2</a></li>

<li><a href="#">Item 3</a></li>

<li><a href="#">Item 4</a></li>

<li><a href="#">Item 5</a></li>

</ul>

</li>

</ul>

<div>

</BODY>

</HTML>