咨询一个问题:用ul li 写的导航栏,下拉菜单怎么不显示? 谢谢各位_html/css_WEB-ITnose
CSS code :
* {
margin:0;
padding:0;
list-style:none;
}
body {
background:#f0f0f0;
color:#999;
font-size:12px;
font-family:"Lucida Grande",Arial,sans-serif;
line-height:1.5em;
overflow-y:auto;
overflow-x:auto;
}
img {
border:0;
}
a {
color:write;text-decoration:none;
bblr:expression(this.onFocus=this.blur());
outline:none;
}
li {list-style:none;}
.logo_box{ width:399px; height:100px; align:left;float:left;}
.logo_box a{font-size:1.2em;Line-height:1.8em}
.top_right{ width:500px; float:right;}
.hydl_box{ width:500px; text-align:right; height:12px; line-height:12px; color:#999999;}
.hydl_box a{color:#999999;}
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.topNav {
position:relative;
z-index:1;
height:40px;
line-height:40px;
background: url(../images/nav_bg.JPG) repeat-x top left;
font-family:"Lucida Grande",Arial,sans-serif;
font-size:12px;
}
.topNav-width {
width:1640PX;
height:40px;
margin:0 auto;
}
.topNav h3 {
font-weight:normal;
font-size:12px;
}
.topNav .tnLeft {
float:left; ;
}
.topNav li {
float:left;
position:relative;
}
.topNav li h3 {
float:center;
font-weight:normal;
font-size:12px;
}
.topNav li h3 a {
display:inline-block;
*display:inline;
zoom:1;
font-size:12px;
height:14px;
line-height:14px;
padding:13px 20px;
color:white
}
.topNav li h3 a i {
display:inline-block;
width:8px;
height:5px;
margin:0 0 0 5px;
overflow:hidden;
vertical-align:middle;
font-size:12px;
line-height:13px;
background:url(images/nav_bg.JPG) 0 -61px no-repeat;
}
.topNav li h3 a:hover,.topNav li.on h3 a {
background:#1C86EE;
}
.topNav .welcome {
padding-right:15px;
color:white;
}
.topNav .welcome a {
color:white;
}
.topNav li ul {
display:none;
position:relative;
left:0;
border:1px solid #CDC9C9;
border-top:0;
background:#1C86EE;
-moz-box-shadow:3px 3px 3px rgba(0,0,0,.1);
-webkit-box-shadow:3px 3px 3px rgba(0,0,0,.1);
box-shadow:3px 3px 3px rgba(0,0,0,.1);
}
.topNav li ul li {
line-height:31px;
}
.topNav li ul li a {
display:block;
color:white;
padding:0 15px;
}
.topNav li ul li a:hover {
background:#CFCFCF;
color:white;
}
.topNav li ul li a span {
color:white;
margin-left:5px;
}
/*
.body{
position:relative;
}
*/
.foot_box{ width:100%; background:url(../images/foot_bg_03.jpg) repeat-x; height:36px;}
.foot_con{ width:1000px; margin:0 auto; text-align:right; color:#FFF; height:32px; line-height:32px;}Html code:
nbsp;html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<script></script>
<script></script> src="../javascript/jquery.SuperSlide.2.1.js">
<script>jQuery(".topNav").slide({ type:"menu", titCell:"dd", targetCell:"ul", delayTime:0,defaultPlay:false,returnDefault:true }); </script>
回复讨论(解决方案)
问题比较多,一一列举,仅供参考。
1. js调用的方式有问题,不正确的已经注释。
// jQuery(".topNav").slide({ type:"menu", titCell:"dd", targetCell:"ul", delayTime:0,defaultPlay:false,returnDefault:true }); jQuery(".topNav").slide({ type:"menu", titCell:".m", targetCell:".sub", effect:"slideDown", delayTime:300, triggerTime:100,returnDefault:true });
2. li,或子集ul上缺少标志class。
<ul> <li class="m"><h3 id="a-nbsp-href-main-jsp-Home-nbsp-Page-a"><a href="main.jsp">Home Page</a></h3></li> <li class="m"><h3 id="a-Report-nbsp-Management-a"><a>Report Management</a></h3> <ul class="sub"> <li><a href="../jsp/getsmetricreport">Weekly</a></li> <li><a href="../jsp/getsmetricreportmonth">Monthly</a></li> </ul>
3. css,li要展开的话,必须修改。
.topNav li ul li{line-height:31px;float: none;}
最后完整的html
Metric Report <ul> <li class="m"><h3 id="a-nbsp-href-main-jsp-Home-nbsp-Page-a"><a href="main.jsp">Home Page</a></h3></li> <li class="m"><h3 id="a-Report-nbsp-Management-a"><a>Report Management</a></h3> <ul class="sub"> <li><a href="../jsp/getsmetricreport">Weekly</a></li> <li><a href="../jsp/getsmetricreportmonth">Monthly</a></li> </ul>Data Management
Metric Management
User Management
可能是content没写宽度的原因。
.content{width:900px;}

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

热门话题

HTML适合初学者学习,因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓,易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高,可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML定义网页结构,CSS负责样式和布局,JavaScript赋予动态交互。三者在网页开发中各司其职,共同构建丰富多彩的网站。

AnexampleOfAstartingTaginHtmlis,beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements,defiteTheeTheErtypes,andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

网页批注功能的Y轴位置自适应算法本文将探讨如何实现类似Word文档的批注功能,特别是如何处理批注之间的间�...

GiteePages静态网站部署失败:404错误排查与解决在使用Gitee...

实现图片点击后周围图片散开并放大效果许多网页设计中,需要实现一种交互效果:点击某张图片,使其周围的...

HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构,使用标签如、等。2.CSS控制网页样式,使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互,通过事件监听和DOM操作。
