求css水平菜单导航源码

html-css09

求css水平菜单导航源码,第1张

这个可以作为参考

http://www.jimzhan.com/demo/ie6_li_display_inline.html

那样的话,得有宽度保证了.要不然会出去的(比如最后一个)

<!DOCTYPE HTML>

<html lang="en-US">

<head>

<meta charset="UTF-8">

<title>nav</title>

<style type="text/css">

ul{list-style:noneheight:32pxline-height:32px}

li{float:leftpadding:5px}

li span{display:none}

</style>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">google.load('jquery','1.4')</script>

</head>

<body>

<ul>

<li><a href="#jimzhan.com">首页</a><span>这里要显示的内容</span></li>

<li><a href="#jimzhan.com">blog</a></li>

<li><a href="#jimzhan.com">super fashion</a><span>jimzhan.com</span></li>

<li><a href="#jimzhan.com">readead</a></li>

</ul>

<script>

$(function(){

$('li').hover(function(){

$('span',this).show()

},function(){

$('span',this).hide()

})

})

</script>

</body>

</html>

其实你说的不是很清楚,如果有什么不明白的再说:

首先是css:

 a{ color: #000000}

 a:hover {color: #fff background: #000 }

然后a标签

 <a href="@">点击按钮</a>

这些是a标签的一些样式

a  标签对是一个网站的一条信息链接定义的,a:link {}     /* 未访问的链接 */

a:visited {}  /* 已访问的链接 */

a:hover {}    /* 当有鼠标悬停在链接上 */

a:active {}   /* 被选择的链接 */

然后你下面的我大体的说一下

background:none没有背景;

border:none没有边框;

color:#000000font-size:15pxfont-weight:bold字体颜色是黑色的,大小15像素,加粗

background:transparent。意思就是背景透明。实际上background默认的颜色就是透明的属性。所以写和不写都是一样的