css导航菜单

html-css020

css导航菜单,第1张

<!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>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>仿菜单</title>

<style type="text/css">

body{font-size:14px}

ul{margin:0padding:0list-style:none}

a{text-decoration:nonecolor:#000}

#menu{position:absolutetop:0left:100pxwidth:780px}

#menu li{float:leftheight:34pxline-height:34px}

#menu li a{ display:blockfont-weight:boldbackground:url(link.gif) left toppadding-left:20px}

#menu span{display:blockbackground:url(link.gif) no-repeat right toppadding-right:20px}

#menu li a:hover{background:url(hover.gif) no-repeat left topcolor:#C30}

#menu li a:hover span{background:url(hover.gif) no-repeat right top}

#sub_menu {position:absolutetop:35pxfont-size:12pxline-height:2em}

#sub_menu #sub_2{margin-left:150px}

#sub_menu #sub_3{margin-left:250px}

#sub_menu #sub_4{margin-left:350px}

.dis { display:block}

.undis { display:none}

</style>

<script type="text/javascript" language="javascript">

<!--

function show(n){

//如果有N个标签,就将i<=N

for(var i=1i<=6i++){

document.getElementById('sub_'+i).className='undis'

}

document.getElementById('sub_'+n).className='dis'

}

-->

</script>

</head>

<!--急冲冲赶出来的,还没有什么时间去添加一些注析,你要是有什么不明白的,可以问我。其他的一些小细节,你再自己修改啦!-->

<body>

<div id="Nav">

<div id="menu">

<ul>

<li><a href="#" onmouseover="show(1)"><span>凯撒首页</span></a></li>

<li><a href="#" onmouseover="show(2)"><span>最新动态页</span></a></li>

<li><a href="#" onmouseover="show(3)"><span>产品及预定中心页</span></a></li>

<li><a href="#" onmouseover="show(4)"><span>帮助及查询中心页</span></a></li>

<li><a href="#" onmouseover="show(5)"><span>会员俱乐部页</span></a></li>

<li><a href="#" onmouseover="show(6)"><span>凯撒论坛页</span></a></li>

</ul>

</div>

<div id="sub_menu">

<div id="sub_1" class="undis" ></div>

<div id="sub_2" class="undis" ><a href="#">聚焦凯撒</a>| <a href="#">国内新闻</a>| <a href="#">国际新闻</a></div>

<div id="sub_3" class="undis" ><a href="#">聚焦凯撒</a>| <a href="#">国内新闻</a>| <a href="#">国际新闻</a>聚焦凯撒</a>| <a href="#">国内新闻</a></div>

<div id="sub_4" class="undis" ><a href="#">预定流程</a>| <a href="#">订单查询</a>| <a href="#">在线答疑</a><a href="#">签证服务</a>| <a href="#">出游宝典</a>| <a href="#">网站地图</a></div>

<div id="sub_5" class="undis" ></div>

<div id="sub_6" class="undis" ></div>

</div>

</div>

</body>

</html>

程序输入如下:

<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) 的右下角位置。

比如我现在要滑动到此p标签区域,可先给p标签加上一个id,

导航处的a标签利用它的href属性,如<a href="#scroll"></a>

<p id="scroll"></p>