我在网上使用了一个下拉菜单的模板，并尝试尽可能地修改代码，但是我完全不知道下一步该做什么。我试图让菜单以70％的宽度居中在页面上，所以这将与图像和文本对齐，但无论我试图改变什么都不起作用。我已经看了一下，有几次提到相对定位可能会搞乱
同样在下拉菜单中，我试图逃避必须使用em并开始使用百分比，但每当我尝试将indexmenu的宽度更改为百分比时，它完全破坏了一切。对不起，如果这不是措辞最好的问题，我只是想尽可能多地提供信息（忽略颜色和蹩脚的图像，仅用于布局）
提前致谢！
<!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>
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;
}
答案 0 :(得分：0)
仅指定width，然后使用margin:0 auto;同时确保将其应用于<div>。取消position:relative和其他任何内容。
另外，请务必在text-align:center中设置<div>，以便将<li>文字放在中心位置。
div { margin:0px auto; max-width: 80%; min-width:70%; width: 80%; }
ul { list-style-type:none; }
ul li { display: inline-block; padding:4px 7px; }
ul li a { text-decoration:none; color: black; }
这通常是我用来启动菜单的方法。我使用max-width似乎在width没有width时约束<a>。
如果您使用重置css文件（搜索google以重置css），则无需设置任何其他属性，例如width width，因为它将采用其父级的宽度。与其他每个元素相同，如果您希望它是float:left或float:right，请确保在其之后输入<div style="clear:both"></div>以便父容器成为其子容器的height。如果不这样做，您会注意到父母没有height。
这是一个Fiddle，可以帮助您解决问题并找出答案。
您需要在HTML中观察Box模型，在此处Box Model查看并记住margin padding border outline将添加对于您的元素width，因此请确保在指定width时考虑到这一点，因为整体width将包含框模型。