现在，我们可以用语义化的标签，如li来完成。
菜单一：
new document *{margin:0px; padding:0px;font-family:verdana;} ul { list-style:none; font-size:10px; } li ul { display:none; } #nav li { text-align:center; margin:3px; width:100px; border:solid 1px #ccc; position:relative; padding:6px; display:block; } #nav li ul{position:absolute;top:-4px;left:112px;} #nav li ul li { padding:5px 6px 5px 5px; } #nav li ul li a { display:block; width:100px; text-decoration:none; border:solid 1px #fff; } #nav li a:hover { background:#efefef; border:solid 1px #ccc; text-indent:30%; } #nav li:hover ul,#nav li.over ul { display:block; border:none; } var a = function() { var nav = document.getElementById('nav'); var lis = nav.childNodes; for(var i = 0;i Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link
list-style:none;是去掉列表符号
#nav li下的ul要以li为标准进行绝对定位，这点很重要。
因IE不支持#nav li:hover ul，所以写了一个简单的js来实现，其目的只是给#nav li添加一个mouseover与mouseout事件，
动态改变它的cssName。
菜单二：
new document *{margin:0px; padding:0px;font-family:verdana;} ul { list-style:none; font-size:10px; } li ul { display:none; } #nav { width:700px; } #nav li { float:left; width:100px; text-align:center; margin:3px; border:solid 1px #003399; cursor:help; padding:6px; } #nav li ul li { border:none; padding:0; margin:0px; } #nav li ul li a { text-decoration:none; display:block; margin:1px; padding:6px 0px; width:97px; } #nav li ul li a:hover { background:#efefef; border:solid 1px #ccc; margin:0px; } #nav li:hover ul,#nav li.over ul { display:block; border:none; } var a = function() { var nav = document.getElementById('nav'); var lis = nav.childNodes; for(var i = 0;i Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link Link
这二个简单的菜单主要是对Box模型的理解，最开始我也被box弄糊涂。注意margin、padding、border。
查看更多关于初学div+css之菜单篇_html/css_WEB-ITnose的详细内容...