按照下面的经验做二级导航,为什么显示不出来?(CSS&html)

http://jingyan.baidu.com/article/60ccbceb23396364cab19735.html
按照上面的百度经验,为什么二级标题不见了。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>Left</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<style type="text/css">
#function ul li{
list-style:circle;
padding:1px;

}
#function ul li a{
background-color:#FFC;
font-style:italic;
}
#function ul li a:hover{
background-color:#9FF;}
</style>
<script type="text/javascript" src="<%=path%>/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//alert("ssssssssssss");
$("ul li").hide();
$("ul a").click(function(){
$(this).siblings().toggle("3000");
});
});
<%-- function exit(){
$("#exit");
$.ajax({
type: "POST",
url: "<%=path%>/servlet/Adminservlet?method=exit",
data: "name=John&location=Boston",
success: function(data){
alert( "谢谢使用");
}
});
} --%>

</script>
<style type="text/css">
li{
list-style: none;
}
</style>
</head>

<body>
<div>
<ul>
<a href="javascript:void(0);" >管理员管理</a>
<li><a href="manage/admins/insert.jsp" target="mainFrame">添加管理员信息</a></li>
<li><a href="manage/admins/update.jsp" target="mainFrame">修改管理员信息</a></li>
<li><a href="manage/admins/selectAll.jsp" target="mainFrame">管理员列表</a></li>
<li><a href="manage/login.jsp" target="mainFrame">管理员login</a></li>
</ul>
<ul>
<a href="javascript:void(0);">用户管理</a>
<li><a href="manage/userinfo/insert.jsp" target="mainFrame">用户简单注册</a></li>
<li><a href="manage/userinfo/update.jsp" target="mainFrame">修改用户信息/添加用户详细信息</a></li>
<li><a href="manage/userinfo/selectAll.jsp" target="mainFrame">用户列表</a></li>
<li><a href="manage/userinfo/login.jsp" target="mainFrame">用户登录</a></li>
</ul>
<ul>
<a href="javascript:void(0);">新闻管理</a>
<li><a href="manage/news/insert.jsp" target="mainFrame">添加</a></li>
<li><a href="manage/news/update.jsp" target="mainFrame">修改</a></li>
<li><a href="manage/news/selectAll.jsp" target="mainFrame">列表</a></li>
</ul>
<ul>
<a href="javascript:void(0);">管理员登录日志管理</a>
<li><a href="manage/adminLogs/selectAll.jsp" target="mainFrame">查看管理员登录日志</a></li>
</ul>
<ul>
<a href="javascript:void(0);">菜单管理</a>
<li><a href="manage/menu/selectAll.jsp" target="mainFrame">菜单列表/添加菜单/修改菜单</a></li>
</ul>
<ul>
<a href="javascript:void(0);">新闻类型管理</a>
<li><a href="manage/newsType/selectAll.jsp" target="mainFrame">新闻类型列表/添加/修改</a></li>
</ul>

<ul>
<a href="javascript:void(0);">密码问题提示管理</a>
<li><a href="manage/passwordQuestion/selectAll.jsp" target="mainFrame">密码问题提示列表/添加/修改</a></li>
</ul>
<ul>
<a href="javascript:void(0);">配置管理</a>
<li><a href="manage/webConfig/selectAll.jsp" target="mainFrame">列表/添加/修改</a></li>
</ul>
<a href="<%=path%>/servlet/Adminservlet?method=exit" onclick="exit()" id="exit"> 退出</a>
</div>

<!--
<div id="function">
<ul>

<li><a href="manage/userinfo/selectAll.jsp" target="mainFrame">全部用户</a></li>
<li><a href="manage/admins/selectAll.jsp" target="mainFrame">全部管理员</a></li>
<li><a href="manage/adminLogs/selectAll.jsp" target="mainFrame">全部登录日志</a></li>
<li><a href="manage/menu/selectAll.jsp" target="mainFrame">全部菜单项</a></li>
<li><a href="manage/news/selectAll.jsp" target="mainFrame">全部新闻</a></li>
<li><a href="manage/newsType/selectAll.jsp" target="mainFrame">全部新闻类型</a></li>
<li><a href="manage/passwordQuestion/selectAll.jsp" target="mainFrame">全部密码问题</a></li>
<li><a href="manage/webConfig/selectAll.jsp" target="mainFrame">全部配置</a></li>
<li><a href="manage/newsFavorite/selectAll.jsp" target="mainFrame">全部收藏</a></li>
<li><a href="manage/newsComment/selectAll.jsp" target="mainFrame">全部评论</a></li>
<li><a href="manage/userinfo/insert.jsp" target="mainFrame">添加用户</a>----ok</li>
<li><a href="manage/userinfo/update.jsp" target="mainFrame">更新用户</a></li>
<li><a href="manage/userinfo/selectOne.jsp" target="mainFrame">一个用户</a></li>
<li><a href="manage/userinfo/login.jsp" target="mainFrame">用户登录</a>----ok</li>
<li><a href="manage/admins/insert.jsp" target="mainFrame">添加管理员</a>----ok</li>
<li><a href="manage/admins/update.jsp" target="mainFrame">管理员信息更新</a></li>
<li><a href="manage/admins/selectOne.jsp" target="mainFrame">一个管理员</a></li>
<li><a href="manage/adminLogs/selectOne.jsp" target="mainFrame">一个管理员登录日志</a></li>

<li><a href="manage/menu/insert.jsp" target="mainFrame">添加菜单项</a></li>
<li><a href="manage/menu/update.jsp" target="mainFrame">修改菜单项</a></li>
<li><a href="manage/menu/selectOne.jsp" target="mainFrame">一个菜单项</a></li>

<li><a href="manage/news/insert.jsp" target="mainFrame">添加新闻</a></li>
<li><a href="manage/news/update.jsp" target="mainFrame">修改新闻</a></li>
<li><a href="manage/news/selectOne.jsp" target="mainFrame">一个新闻</a></li>

<li><a href="manage/newsComment/insert.jsp" target="mainFrame">添加新闻评论</a></li>
<li><a href="manage/newsComment/update.jsp" target="mainFrame">更改新闻评论</a></li>
<li><a href="manage/newsComment/selectOne.jsp" target="mainFrame">一个评论</a></li>

<li><a href="manage/newsFavorite/insert.jsp" target="mainFrame">创建收藏</a></li>
<li><a href="manage/newsFavorite/update.jsp" target="mainFrame">修改收藏</a></li>
<li><a href="manage/newsFavorite/selectOne.jsp" target="mainFrame">查看某个收藏</a></li>

<li><a href="manage/newsType/insert.jsp" target="mainFrame">添加新闻分类</a></li>
<li><a href="manage/newsType/update.jsp" target="mainFrame">修改新闻分类</a></li>
<li><a href="manage/newsType/selectOne.jsp" target="mainFrame">查看某个新闻分类详细</a></li>

<li><a href="manage/passwordQuestion/insert.jsp" target="mainFrame">添加密码提示问题</a></li>
<li><a href="manage/passwordQuestion/update.jsp" target="mainFrame">修改密码提示问题</a></li>
<li><a href="manage/passwordQuestion/selectOne.jsp" target="mainFrame">查看某个密码提示问题详细</a></li>

<li><a href="manage/webConfig/insert.jsp" target="mainFrame">添加配置</a></li>
<li><a href="manage/webConfig/update.jsp" target="mainFrame">更新配置</a></li>
<li><a href="manage/webConfig/selectOne.jsp" target="mainFrame">查看某个配置详细</a></li>
-->

<!--
<li><a href="showOneAdmin.jsp" target="mainFrame">ShowOneAdmin</a></li>
<li><a href="adminLogs.jsp" target="mainFrame">AdminLogs</a></li>
<li><a href="newsTypeManager.jsp" target="mainFrame">NewsTypeManager</a></li>
<li><a href="newsShowAll.jsp" target="mainFrame">NewsShowAll</a></li>
<li><a href="newsShowOne.jsp" target="mainFrame">NewsShowOne</a></li>
<li><a href="newsComment.jsp" target="mainFrame">NewsComment</a></li>
<li><a href="newsCommentShowOne.jsp" target="mainFrame">NewsCommentShowOne</a></li>
<li><a href="passwordQuestionAll.jsp" target="mainFrame">PassedWordQusetionShowAll</a></li>
<li><a href="passwordQuestionOne.jsp" target="mainFrame">PassedWordQusetionShowOne</a></li>
<li><a href="menu.jsp" target="mainFrame">Menu</a></li>
<li><a href="webConfig.jsp" target="mainFrame">webConfig</a></li>
<!-- <li><a href="" target="mainFrame">Test</a></li> -->
<!-- -->
</ul>
</div>

</body>
</html>
以前写的`可以无视注释掉的地方``````
温馨提示:答案为网友推荐,仅供参考
第1个回答  推荐于2016-03-14
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>导航</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        .menu,.menu ul,.menu li,.menu a{margin: 0;padding: 0;border: none;outline: none;}
        .menu{height: 40px;width: 510px;background: #4c4e5a;background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
        .menu li{position: relative;list-style: none;float: left;display: block;height: 40px;}
        .menu li a{display: block;padding: 0 14px;margin: 6px 0;line-height: 28px;text-decoration: none;border-left: 1px solid #393942;border-right: 1px solid #4f5058;font-family: Helvetica, Arial, sans-serif;font-weight: bold;font-size: 13px;color: #f3f3f3;text-shadow: 1px 1px 1px rgba(0,0,0,.6);-webkit-transition: color .2s ease-in-out;-moz-transition: color .2s ease-in-out;-o-transition: color .2s ease-in-out;-ms-transition: color .2s ease-in-out;transition: color .2s ease-in-out;}
        .menu li:first-child a{border-left: none;}
        .menu li:last-child a{border-right: none;}
        .menu li:hover > a{color: #8fde62;}
        .menu ul{position: absolute;top: 40px;left: 0;opacity: 0;background: #1f2024;-webkit-border-radius: 0 0 5px 5px;-moz-border-radius: 0 0 5px 5px;border-radius: 0 0 5px 5px;-webkit-transition: opacity .25s ease .1s;-moz-transition: opacity .25s ease .1s;-o-transition: opacity .25s ease .1s;-ms-transition: opacity .25s ease .1s;transition: opacity .25s ease .1s;}
        .menu li:hover > ul{opacity: 1;}
        .menu ul li{height: 0;overflow: hidden;padding: 0;-webkit-transition: height .25s ease .1s;-moz-transition: height .25s ease .1s;-o-transition: height .25s ease .1s;-ms-transition: height .25s ease .1s;transition: height .25s ease .1s;}
        .menu li:hover > ul li{height: 36px;overflow: visible;padding: 0;}
        .menu ul li a{width: 100px;padding: 4px 0 4px 40px;margin: 0;border: none;border-bottom: 1px solid #353539;}
        .menu ul li:last-child a{border: none;}
        .menu a.documents{background: url(../img/docs.png) no-repeat 6px center;}
        .menu a.messages{background: url(../img/bubble.png) no-repeat 6px center;}
        .menu a.signout{background: url(../img/arrow.png) no-repeat 6px center;}

    </style>
</head>
<body>
    <ul class="menu">
        <li><a href="http://www.web0752.com/">网站建设</a></li>
        <li><a href="http://www.web0752.com/">网站制作</a></li>
        <li><a href="http://www.web0752.com/">网站优化</a>
            <ul>
                <li><a href="#" class="documents">Documents</a></li>
                <li><a href="#" class="messages">Messages</a></li>
                <li><a href="#" class="signout">Sign Out</a></li>
            </ul>
        </li>
        <li><a href="#">Uploads</a></li>
        <li><a href="#">Videos</a></li>
        <li><a href="#">Documents</a></li>
    </ul>


</body>
</html>

他的教程,多了一个</li>

本回答被提问者采纳
相似回答