我自愿为一个非营利组织设计一个纯粹的CSS和HTML网站，我的董事会是这样的。我已经成功创建了一个水平导航栏和网站的其余部分但我无法显示子菜单，尽管我花了几个小时观看youtube教程并尝试在本网站上调整其他类似问题的答案。 / p>
我希望我们的子菜单与http://www.bgca.org/Pages/index.aspx处的子菜单类似（小白字母，紫色背景和页面长度（980px））。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<link rel="shortcut icon" href="images/rsfavicon8.jpg" />
<style type="text/css">
</style>
<div id="ad">
<center><img src="images/rsheader3.jpg" alt="Loading image..." class="featuredimage" /></center>
</div></div><!--end ad-->
<div class="div1">
<ul>
<li><a href="#" class="noborder leftedge"> HOME </a></li>
<li><a href="#"> ABOUT US </a></li>
<ul>
<li><a href="#">HOME1</a></li>
<li><a href="#">HOME1</a></li>
<li><a href="#">HOME1</a></li>
</ul>
<li><a href="#"> GET INVOLVED </a></li>
<ul>
<li><a href="#">HOME2</a></li>
<li><a href="#">HOME2</a></li>
<li><a href="#">HOME2</a></li>
</ul>
<li><a href="#"> EMPLOYMENT OPPORTUNITIES </a></li>
<ul>
<li><a href="#">HOME3</a></li>
<li><a href="#">HOME3</a></li>
<li><a href="#">HOME3</a></li>
</ul>
<li><a href="#"> CONTACT </a></li>
<li><a href="#" class="rightedge"> DONATE </a></li>
</ul>
</div>
</head>
</body>
</html>
</div>
</div>
</div>
@charset "UTF-8";
/* CSS Document */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a {
text-decoration:none;
color: black;
}
a.hover {
text-decoration: underline;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Arial" Gadget, sans-serif;
font-weight: normal;
text-transform: uppercase;
line-height: 100%;
margin-top: 0;
}
h1 {
font-family: "Arial" Gadget, sans-serif;
font-size:16px;
font-weight: 100;
color: white;
}
h2 {
font-family: "Arial" Gadget, sans-serif;
font-weight:bold;
font-size:16px;
color: black;
}
h3 {
font-family: "Arial" Gadget, sans-serif;
font-size:14px;
color: black;
}
/*Main CSS*/
html {
background-color: white;
}
.noborder {
border-left-style: none !important;
}
.div1 ul li {
float: left;
list-style-type: none;
}
.div1 ul li a {
color: #FFF;
text-decoration: none;
background-color: #36c;
display: block;
height: 10px;
padding: 12px 25px;
text-align: center;
line-height: 10px;
border-left-width: thin;
border-left-style: solid;
border-left-color: #000;
}
.div1 ul li a:hover {
background-color: #609;
}
.leftedge {
border-radius: 8px 0px 0px 8px;
}
.rightedge {
border-radius: 0px 8px 8px 0px;
}
.div1 ul {
margin-right: auto;
margin-left: auto;
width: 61em;
}
.div1 ul ul {
float: none;
display: none;
position: absolute;
top: 40px;
left: 0px;
margin: -1px 0 0px 10px;
padding: 5px 10px 5px 10px;
white-space: nowrap;
}
.div1 ul ul:hover {
display: block;
}
.div1 ul ul li {
position: static;
float: none;
display: inline;
padding: 5px 10px 5px 10px;
margin: 0px 0px 0px -10px;
background-color: #025179;
}
.div1 ul ul li a {
display: inline;
margin: 0 0px 0 0px;
padding: 0px 10px 0px 10px;
font-weight: normal;
-webkit-border-radius: 0;
border-radius: 0;
}
答案 0 :(得分：0)
您的代码中存在大量语法错误和拼写错误。在这里，我将仅在菜单部分给出解决方案。您必须检查其他问题和其他菜单样式。
<强> HTML
<div class="div1">
<ul>
<li><a href="#" class="noborder leftedge"> HOME </a></li>
<li><a href="#"> ABOUT US </a>
<ul>
<li><a href="#">HOME1</a></li>
<li><a href="#">HOME1</a></li>
<li><a href="#">HOME1</a></li>
</ul>
</li>
<li><a href="#"> GET INVOLVED </a>
<ul>
<li><a href="#">HOME2</a></li>
<li><a href="#">HOME2</a></li>
<li><a href="#">HOME2</a></li>
</ul>
</li>
<li><a href="#"> EMPLOYMENT OPPORTUNITIES </a>
<ul>
<li><a href="#">HOME3</a></li>
<li><a href="#">HOME3</a></li>
<li><a href="#">HOME3</a></li>
</ul>
</li>
<li><a href="#"> CONTACT </a></li>
<li><a href="#" class="rightedge"> DONATE </a></li>
</ul>
</div>
<强> CSS
.div1 ul {
margin-right: auto;
margin-left: auto;
width: 61em;
}
.div1 ul ul {
float: none;
display: none;
position: absolute;
top: 30px;
left: 0px;
margin: -1px 0 0px 10px;
padding: 5px 10px 5px 10px;
white-space: nowrap;
}
.div1 ul li:hover ul {
display: block;
}
.div1 ul ul li {
float: none;
display: inline-block;
padding: 10px;
margin: 0px 0px 0px -10px;
background-color: #025179;
}
.div1 ul ul li a {
margin: 0 0px 0 0px;
padding: 0px 10px 0px 10px;
font-weight: normal;
-webkit-border-radius: 0;
border-radius: 0;
}
.div1 ul li
{
position:relative;
}