确定!所以我制作了这个导航栏,它在除IE7之外的所有浏览器中都能很好地工作。 这是一个左侧导航,由于某种原因,它在IE7中崩溃,但每个其他浏览器都显示它很好。
这是html。
<!doctype html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<ul class="navbar">
<li class="nav_head"><div class="navhd_outline"><a href="/admin/products/">Products</a></div></li>
<ul>
<li class="nav_subhead"><div class="navsub_outline"><a href="#">View Categories</a></div></li>
<li class="nav_subhead"><div class="navsub_outline"><a href="#">Add/Remove</a></div></li>
</ul>
</li>
<li class="nav_head"><div class="navhd_outline"><a href="/admin/email/">Email</a></div></li>
<ul>
<li class="nav_subhead"><div class="navsub_outline"><a href="#">New Blast</a></div></li>
<li class="nav_subhead"><div class="navsub_outline"><a href="#">View Blast</a></div></li>
</ul>
</li>
<li class="nav_head"><div class="navhd_outline"><a href="/admin/reports/">Reports</a></div></li>
<ul>
<li class="nav_subhead"><div class="navsub_outline"><a href="#">By Month</a></div></li>
<li class="nav_subhead"><div class="navsub_outline"><a href="#">By Type</a></div></li>
</ul>
</li>
<li class="nav_head"><div class="navhd_outline"><a href="/admin/recipes/">Recipes</a></div></li>
<ul>
<li class="nav_subhead"><div class="navsub_outline"><a href="#">View Recipes</a></div></li>
<li class="nav_subhead"><div class="navsub_outline"><a href="#">Add/Remove</a></div></li>
</ul>
</li>
<li class="nav_head"><div class="navhd_outline"><a href="/admin/television/">Television</a></div></li>
<ul>
<li class="nav_subhead"><div class="navsub_outline"><a href="#">View List</a></div></li>
<li class="nav_subhead"><div class="navsub_outline"><a href="#">Add/Remove</a></div></li>
</ul>
</li>
<li class="nav_head blog_head"><div class="navhd_outline"><a href="/admin/blog/">Blog</a></div></li>
<ul>
<li class="nav_subhead"><div class="navsub_outline"><a href="#">View Posts</a></div></li>
<li class="nav_subhead"><div class="navsub_outline"><a href="#">Add/Remove</a></div></li>
</ul>
</li>
<li class="nav_bottom"> </li>
</ul>
</body>
</html>
这是CSS。
.navbar {
float: left;
background-color: #4d89d1;
background-repeat: no-repeat;
background-position: 18px 0px;
top: -25px;
width: 200px;
margin-top: 20px;
margin-left: 30px;
padding-top: 25px;
padding-bottom: 30px;
}
.nav_head {
margin: 0 auto;
padding: 1px;
height: 36px;
list-style: none;
}
.nav_head a {
font-size: 15px;
color: #900606;
}
.nav_head a:hover {
color: #f5bf2b;
}
.navhd_outline {
margin: 1px;
padding-top: 8px;
padding-left: 40px;
padding-bottom: 22px;
border: 1px dashed #f5bf2b;
width: 154px;
height: 2px;
}
.nav_subhead {
padding: 1px;
background-color: #900606;
height: 36px;
list-style: none;
margin-left: 25px;
width: 155px;
text-align: right;
}
.nav_subhead a {
color: #ffffff;
text-decoration: none;
padding-right: 10px;
}
.nav_subhead a:hover {
color: #f5bf2b;
}
.navsub_outline {
margin: 1px;
padding-top: 10px;
padding-left: 20px;
padding-bottom: 20px;
border: 1px dashed #f5bf2b;
width: 131px;
height: 2px;
}
.nav_bottom {
height: 30px;
background-position: 33px 0px;
background-repeat: no-repeat;
}
答案 0 :(得分:0)
您的HTML仍然无效。问题在每一个<li>
重复出现,所以我只展示第一个......
<ul class="navbar">
<li class="nav_head">
<div class="navhd_outline"><a href="/admin/products/">Products</a></div>
</li> <!-- <<< this one closes the LI item -->
<ul>
<li class="nav_subhead">
<div class="navsub_outline"><a href="#">View Categories</a></div>
</li>
<li class="nav_subhead">
<div class="navsub_outline"><a href="#">Add/Remove</a></div>
</li>
</ul>
</li> <!-- <<< this is presently an extra one outside of the LI item -->
...
<li class="nav_bottom"> </li>
</ul>
每个</li>
项目仍有额外的结束<li>
标记。内部<ul>
需要包含在里面 <li></li>
,其中在之外以及另一个</li>
。删除</li>
标记,如下所示...
<ul class="navbar">
<li class="nav_head">
<div class="navhd_outline"><a href="/admin/products/">Products</a></div>
<ul> <!-- <<< the entire child UL is inside the LI where it belongs -->
<li class="nav_subhead">
<div class="navsub_outline"><a href="#">View Categories</a></div>
</li>
<li class="nav_subhead">
<div class="navsub_outline"><a href="#">Add/Remove</a></div>
</li>
</ul>
</li> <!-- <<< this one closes the LI item -->
...
<li class="nav_bottom"> </li>
</ul>
运行您的网页