私はオンラインのドロップダウンメニューのテンプレートを使用し、コードを可能な限り変更しようとしましたが、次に何をすべきか完全に困惑しています. メニューをページの中央に 70% の幅で配置しようとしているので、これは画像とテキストに合わせて配置されますが、何を変更しようとしてもうまくいきません。私は周りを見回しましたが、相対位置が混乱する可能性があると何度か言及されています
また、ドロップダウン メニューでは、em を使用してパーセンテージを使用する必要がなくなりましたが、indexmenu の幅をパーセンテージに変更しようとすると、すべてが完全に台無しになります。これが最良の言葉遣いの質問ではない場合は申し訳ありませんが、できるだけ多くの情報を提供しようとしています（レイアウト専用の色やくだらない画像は無視してください）
前もって感謝します！
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;
}