学着这个网站的样子，做了个下拉式的导航栏。使用javascript，如果你禁用了javascript，就不能正常工作了。我在firefox，ie，msn下都看了，挺正常的。如果你发现这个导航栏不能正常工作，请告诉我，在评论里留下你使用的系统和浏览器。

我简单介绍一下制作方法。

1。html 代码，例子：

<ul id=”navsite”>

<li><a href=”index.php” style=”width: 4em;” >首页</a>
</li>

<li><a href=”archives.php” style=”width: 4em;” >档案</a>
<ul id=”category”>
<li><a href=”index.php?cat=3″>科技</a></li>
<li><a href=”index.php?cat=2″>网络</a></li>
</ul>
</li>

</ul>

根据你的实际需要更改。

2、css code 例子：

ul#navsite,
#navsite ul {
font: 1em Verdana, sans-serif;
padding: 0;
margin: 0;
list-style: none;
background-color: white;
float: right;
}
#navsite li {
float: left; /* arrange top menu items horizontally */
text-align: center;
}
/* Absolute position with auto setting means the item will appear
where it would have appeared normally, but is taken out of the
flow and floats above all the content. */
#navsite li ul {
position: absolute;
top: auto;

left: -999em; /* for better accessibility than using display:none */
}
* > html #navsite li ul { /* “Tan Hack” for IE Mac only */
display: none;
left: auto;
}
#navsite li:hover ul,
* html #navsite li.sfhover ul { /* for IE-Win and other non-IE browsers */
left: auto;
}
* > html #navsite li.sfhover ul { /* “Tan Hack” for IE Mac only */
display: block; /* IE-Mac gets confused by the left:-999em rule, so we do this. */
border: 1px solid #778; /* to visually confirm this rule is being used on IE-Mac */
}
#navsite li ul li {
float: none; /* sub-menu items will stack vertically as normal list */
text-align: left;
}
#navsite a {
display: block;
text-decoration: none;
color: #FFF;
background-color: #73a0c5;
padding: 1px 0px 2px 0px; /* no right-left padding for top level items */
border: 1px solid #FFF;
}
#navsite li ul li a { /* for sub-menu items */
/* Apply the width here (not to li) so that IE regards entire width as clickable */
/* This also seems to fix the “3px gap between list items” bug in IE. */
width: 6em;
border-top-style: none; /* to get single line between items */
padding: 1px 10px 2px 10px;
}
/* note: important to keep ordering of LVHA link, visited, hover, active */
#navsite a:link:hover,
#navsite a:visited:hover {
color: #73a0c5;
background-color: #FFF;
border-color: #FFF;
}

根据你的设计需要进行更改。

3、javascript 代码

<script type=”text/javascript” language=”JavaScript”>
<!–
sfHover = function() {
var sfEls = document.getElementById(”navsite”).getElementsByTagName(”LI”);
for (var i=0; i sfEls[i].onmouseover=function() {
this.className+=" sfhover";

}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
else { //IE 5.2 Mac does not support attachEvent
var old = window.onload;
window.onload = function() { if (old) old(); sfHover(); }
}
//-->
</script>

加进网页的header里。

做了这三步就可以了。

6:36 下午 星期五, 一月 7th, 2005 贴于 本站, 网络资源. 引用通告地址：http://yan.me/dia/516/trackback