我使用了一个在线下拉菜单的模板，并尝试尽可能多地修改代码，但是我完全不知道下一步该做什么。我试图让菜单以 70% 的宽度在页面上居中，因此这将与图像和文本对齐，但是无论我尝试更改什么都不起作用。我环顾四周，有几次提到相对定位可能会弄乱
同样在下拉菜单中，我试图摆脱必须使用 em 并开始使用百分比，但是每当我尝试将 indexmenu a 的宽度更改为百分比时，它都会完全破坏一切。抱歉，如果这不是最好的措辞问题，我只是想提供尽可能多的信息（忽略颜色和蹩脚的图像，仅用于布局）
提前致谢！
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<link href="slideshow.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="javascript.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Stages School Of Dance</title>
</head>
<body>
<div id="indexmenu">
<ul>
<li><a href="index.html">Home</a>
</li>
<li><a href="courses.html">Courses</a>
</li>
<li><a href="General.html">General Classes</a>
</li>
<li><a href="venue.html">Venue</a>
</li>
<li><a href="gallery.html">Gallery And Video </a>
<ul>
<li><a href="#">2007</a>
<div class="nav2">
<ul>
<li><a href="#">January</a>
</li>
<li><a href="#">February</a>
</li>
</ul>
</div>
</li>
<li><a href="#">2008</a>
<div class="nav2">
<ul>
<li><a href="#">March</a>
</li>
<li><a href="#">May</a>
</li>
</ul>
</div>
</li>
<li><a href="#">2009</a>
<div class="nav2">
<ul>
<li><a href="#">June</a>
</li>
<li><a href="#">July</a>
</li>
</ul>
</div>
</li>
<li><a href="#">2010</a>
</li>
<li><a href="#">2011</a>
</li>
</ul>
</li>
<li><a href="studentlife.html">Student Life</a>
</li>
<li><a href="news.html">News</a>
</li>
<li><a href="about.html">About</a>
</li>
</ul>
</div>
<div id="index1">
<div id="slideshowContainer">
<div class="slideshow">
<img src="4.jpg" />
<img src="2.jpg" />
<img src="1.jpg" />
<img src="3.jpg" />
<img src="5.jpg" />
</div>
</div>
<div id="indexaboutus">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit condimentum mi id sodales. Mauris eu nisl nec nibh aliquam cursus ut quis lacus. Duis et erat non sem sollicitudin volutpat a eget lorem. Integer feugiat diam vitae odio auctor gravida. Nullam congue nisi nec felis tristique, id fringilla quam ullamcorper. Cras a sem at justo imperdiet sagittis sodales id eros. Cras tristique urna ipsum, vel sagittis tortor imperdiet ac. Duis volutpat lacus sem, et molestie risus dapibus vitae. Mauris convallis elit sed sapien consectetur fringilla. Nulla consectetur mollis libero, vel eleifend purus rutrum ut. Donec posuere velit leo, et facilisis est vehicula non. Aliquam vel turpis felis. Sed molestie orci sem, in lobortis dui tempor eu. Morbi tempor mauris et aliquam consequat.</p>
<p>Cras id sodales tellus, ut euismod erat. Nunc mi lacus, lobortis nec metus in, laoreet vehicula enim. Fusce semper velit et augue viverra vulputate. Donec suscipit lorem sed nulla tincidunt sodales. Nullam vehicula arcu sapien, sit amet posuere augue tristique pellentesque. Integer sit amet pretium leo, non lobortis dolor. Vivamus sodales eget leo in rhoncus. Phasellus quis dolor faucibus, convallis metus eget, sodales diam. Nulla scelerisque, magna eget placerat gravida, neque ante fringilla enim, at aliquet tortor nibh accumsan quam. Pellentesque iaculis elementum dolor, sed facilisis felis scelerisque sit amet. Praesent aliquam diam erat, eu pellentesque magna blandit ut. Donec vulputate luctus tellus, at iaculis felis faucibus sit amet. Nam nec diam elit. Integer cursus varius ante, nec ullamcorper risus tristique eu. Fusce sed posuere sem.</p>
</div>
</div>
<div class="logo">
<img id="logo1" src="logo2.jpg" alt="Slideshow" />
</div>
</body>
</html>
CSS
body {
background-color:green;
}
#index1 {
padding-top:2%;
width:70%;
margin-left:auto;
margin-right:auto;
}
#indexmenu {
clear:both;
border-style:solid;
margin-left:20%;
}
#indexaboutus {
width:45%;
float:right;
}
#slideshowContainer {
float:left;
width:35%;
}
.slideshow {
height: 50%;
}
.slideshow img {
}
#indexmenu { /* */
width:80%;
position:relative;
left:13%;
}
.nav2 { /* */
margin-left:-50%;
}
#indexmenu, #indexmenu ul { /* */
padding: 0;
margin: 0;
list-style: none;
}
#indexmenu a { /* changes menu width MUST CHANGE */
display: block;
width:10em;
}
#indexmenu ul li a {
}
#indexmenu li { /* Xhanged all menu text */
float: left;
font-size:115%;
}
.nav2 li { /*Sets year and month */
}
#indexmenu li ul { /*Changes year and month text */
position: absolute;
width: 6%;
font-size:80%;
left: -999em;
}
#indexmenu li:hover ul { /* */
left: auto;
}
#indexmenu li:hover ul, #nav li.sfhover ul { /* */
left: auto;
}
#indexmenu li ul li {
margin-left:-50%;
margin-top:-5%;
}
#indexmenu li ul ul { /* A, B, C, D - A sets the X axis, D sets the Y axis of the months */
margin: -42% 0 0 180%;
}
#indexmenu li a { /*sets all of the links in the id nav, in li and a */
text-decoration:none;
color:white;
font-weight:bold;
text-align:center;
}
#indexmenu, #indexmenu ul { /* */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}
#indexmenu li:hover ul ul, #indexmenu li.sfhover ul ul { /* */
left: -999em;
}
#indexmenu li:hover ul, #indexmenu li li:hover ul, #indexmenu li.sfhover ul, #indexmenu li li.sfhover ul {
left: auto;
}
#indexmenu li ul li a { /* sets the month and year in drop down option*/
font-size:100%;
margin-top:15%;
}
.logo {
clear:both;
float:left;
margin-left:15%;
width:70%;
padding-top:2%;
}
#logo1 {
width:100%;
vertical-align: bottom;
}