这是我的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
#holder {width:750px; height:350px; position:relative; font-family:arial, sans-serif; border-top:1px solid #da8; border-bottom:1px solid #da8; z-index:100;}
#holder table {border-collapse:collapse; margin:-1px;}
#holder ul {float:left; padding:0; margin:0; list-style:none;}
#holder ul.sub {margin-bottom:-4px;}
#menuOuter li a.lv1-a {background:blue; zoom:1;}
#menuOuter li a.lv1-a:hover {direction:ltr;}
#holder ul.sub {float:left;}
#holder ul.sub ul {position:absolute; left:-9999px; top:180px;}
#holder ul.sub li.sub-li a img {display:block; position:absolute; left:-9999px; border:0; height:200px; width:750px;}
#holder ul.sub li.sub-li {display:block; float:left; width:150px; height:240px;}
#holder ul.sub li.sub-li a {margin-top:200px; width:110px; display:block; padding:0 20px; height:40px; line-height:40px; color:#fff; text-decoration:none; font-family:arial, sans-serif; font-size:14px;}
#holder ul.sub li.sub-li a.a1 {background:#e9a358;}
#holder ul.sub li.sub-li a.a2 {background:#e9a358;}
#holder ul.sub li.sub-li a.a3 {background:#9ea64b;}
#holder ul.sub li.sub-li a.a4 {background:#dfb344;}
#holder ul.sub li.sub-li a.a5 {background:#b8826e;}
#menuOuter li:hover ul.sub li.current a {margin-top:200px; height:40px;}
#menuOuter li:hover ul.sub li.current ul {left:-9999px;}
#menuOuter li:hover ul.sub li.current a img {left:-9999px;}
#menuOuter a:hover ul.sub li.current a {margin-top:200px; height:40px;}
#menuOuter a:hover ul.sub li.current ul {left:-9999px;}
#menuOuter a:hover ul.sub li.current a img {left:-9999px;}
#holder ul.sub li.sub-li:hover > a {margin-top:0; height:350px;}
#holder ul.sub li.sub-li a:hover {margin-top:0; height:350px;}
#holder ul.sub li.current a {margin-top:0; height:350px;
top: 14px;
left: 28px;
}
#holder ul.sub li.current a.a1 img {left:0; top:0; z-index:-1;}
#holder ul.sub li.current a.a2 img {left:-150px; top:0; z-index:-1;}
#holder ul.sub li.current a.a3 img {left:-300px; top:0; z-index:-1;}
#holder ul.sub li.current a.a4 img {left:-450px; top:0; z-index:-1;}
#holder ul.sub li.current a.a5 img {left:-600px; top:0; z-index:-1;}
#menuOuter li:hover ul.sub li.current:hover a {margin-top:0; height:350px;}
#menuOuter li:hover ul.sub li.current:hover ul {left:0;}
#menuOuter li:hover ul.sub li.current:hover ul li {float:left; height:15px; padding:0; margin:0;}
#menuOuter li:hover ul.sub li.current:hover ul li a {height:15px; line-height:15px; margin:0; padding:0 20px;}
#menuOuter li:hover ul.sub li.current:hover ul li a:hover {height:15px; line-height:15px; margin:0; padding:0 20px; text-decoration:underline;}
#menuOuter a:hover ul.sub li.current a:hover {margin-top:0; height:350px;}
#menuOuter a:hover ul.sub li.current a:hover ul {left:0;}
#menuOuter a:hover ul.sub li.current a:hover ul li {float:left; height:15px; padding:0; margin:0;}
#menuOuter a:hover ul.sub li.current a:hover ul li a {height:15px; line-height:15px; margin:0; padding:0 20px;}
#menuOuter a:hover ul.sub li.current a:hover ul li a:hover {height:15px; line-height:15px; margin:0; padding:0 20px; text-decoration:underline;}
#holder ul.sub li {position:relative;}
#holder ul.sub li.sub-li:hover ul {left:0; width:130px;}
#holder ul.sub li.sub-li:hover ul li {float:left; height:15px; padding:0; margin:0;}
#holder ul.sub li.sub-li:hover ul li a {height:15px; line-height:15px; margin:0; padding:0 20px; font-size:11px;}
#holder ul.sub li.sub-li:hover ul li a:hover {height:15px; line-height:15px; margin:0; padding:0 20px; text-decoration:underline;}
#holder ul.sub li.sub-li:hover a.a1 img {left:0; top:0; z-index:-1;}
#holder ul.sub li.sub-li:hover a.a2 img {left:-150px; top:0; z-index:-1;}
#holder ul.sub li.sub-li:hover a.a3 img {left:-300px; top:0; z-index:-1;}
#holder ul.sub li.sub-li:hover a.a4 img {left:-450px; top:0; z-index:-1;}
#holder ul.sub li.sub-li:hover a.a5 img {left:-600px; top:0; z-index:-1;}
#holder ul.sub li.sub-li a:hover ul {left:0; width:130px;}
#holder ul.sub li.sub-li a:hover ul li {float:left; height:15px; padding:0; margin:0;}
#holder ul.sub li.sub-li a:hover ul li a {height:15px; line-height:15px; margin:0; padding:0 20px; font-size:11px;}
#holder ul.sub li.sub-li a:hover ul li a:hover {height:15px; line-height:15px; margin:0; padding:0 20px; text-decoration:underline;}
#holder ul.sub li.sub-li a.a1:hover img {left:0; top:0; z-index:-1;}
#holder ul.sub li.sub-li a.a2:hover img {left:-150px; top:0; z-index:-1;}
#holder ul.sub li.sub-li a.a3:hover img {left:-300px; top:0; z-index:-1;}
#holder ul.sub li.sub-li a.a4:hover img {left:-450px; top:0; z-index:-1;}
#holder ul.sub li.sub-li a.a5:hover img {left:-600px; top:0; z-index:-1;}
#holder ul.sub li.current ul {left:0; width:130px;}
#holder ul.sub li.current ul li {float:left; height:15px; padding:0; margin:0;}
#holder ul.sub li.current ul li a {height:15px; line-height:15px; margin:0; padding:0 20px; font-size:11px;}
#holder ul.sub li span {display:block;position:absolute; top:240px; left:0; line-height:15px; width:130px; padding:10px; height:90px; z-index:-1; color:#000; text-decoration:none; font-size:11px;}
#holder ul.sub li.p1 span {background:#ffe398;}
#holder ul.sub li.p2 span {background:#ffe398;}
#holder ul.sub li.p3 span {background:#dee68b;}
#holder ul.sub li.p4 span {background:#fff384;}
#holder ul.sub li.p5 span {background:#f8c2ae;}
#holder ul.sub li.sub-li {
display: block;
float: left;
height: 240px;
width: 150px;
z-index: 1;
}
/*-----------------------------------------------------*/
#slider img {
border-style: none;
border-color: inherit;
border-width: medium;
position:absolute;
visibility:hidden;
top: 4px;
left: -4px;
height: 315px;
width: 729px;
}
/*---------------------------------------------------------------*/
/* ----------- thumbnails ----------- */
#thumbs
{
background:white url(thumbs-bar.gif) repeat-x 0 0;
border:1px solid white; text-align:center;
font-size:0px;
line-height:45px;/*Setting the expected height to line-height fixes many IE8 erratic behaviours*/
position:fixed;
top: 184px;
left: 378px;
width: 22px;
height: 18px;
bottom: 325px;
}
#thumbs .thumb
{
width:60px;height:45px;
cursor:pointer;
text-align:center;
border-left:1px solid #FFF; border-right:1px solid #DDD;
display:inline-block;
*display:inline;zoom:1; /*IE Hack*/
}
#thumbs .thumb-on {background-image: url(active-bg.png);}
#thumbs .thumb img {vertical-align:middle;}
/* ----------- navigation buttons in the thumbnails bar ---------- */
a.group2-Play, a.group2-Pause
{
width:20px; height:20px;
background:transparent url(navButtons.gif);
display:inline-block;
*display:inline;zoom:1;/*IE hack*/
margin-right:8px;
vertical-align:middle;
cursor:pointer;
}
a.group2-Pause{background-position:0 0;
}
a.group2-Play {background-position:0 -20px;
}
a.group2-Pause:hover{background-position:20px 0;}
a.group2-Play:hover {background-position:20px -20px;}
</style>
</head>
这些是css课程。
<body id="www-cssplay-co-uk" class="menus">
<div id="holder">
<ul id="menuOuter">
<li class="lv1-li">
<!--[if lte IE 6]><a class="lv1-a" href="#url1"><table><tr><td><![endif]-->
<ul class="sub" id="d">
<li class="sub-li p1 current" href="#url"><a class="a1" href="" >
<div id="slider" style="position:fixed; width:750px; height:200px; background-color:white; top: 9px; left: 12px; z-index:-1; background:transparent url(loading.gif) no-repeat 50% 50%;">
<img src="a2.jpg" />
<img src="slider-2.jpg" />
<img src="slider-3.jpg" />
<img src="slider-4.jpg" />
</div>
<div id="thumbs">
<a onclick="switchAutoAdvance()" id='auto' class="group2-Pause"></a>
</div>
<b>guest room</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">1</a></li>
<li><a href="#url">2</a></li>
<li><a href="#url">3</a></li>
<li><a href="#url">4</a></li>
<li><a href="#url">5</a></li>
<li><a href="#url">6</a></li>
<li><a href="#url">7</a></li>
</ul>
<span>explainations</span>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="sub-li p5"><a class="a5" href="#url"><img src="pic5.jpg" /><b>baby room</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Sleep Suits</a></li>
<li><a href="#url">//</a></li>
<li><a href="#url">//</a></li>
<li><a href="#url">//</a></li>
<li><a href="#url">//</a></li>
<li><a href="#url">//</a></li>
<li><a href="#url">//</a></li>
</ul>
<span>//</span>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
<script type="text/javascript">
amenu.open("v_is", true);
//The following script is for the group 2 navigation buttons.
function switchAutoAdvance() {
imageSlider.switchAuto();
switchPlayPauseClass();
}
function switchPlayPauseClass() {
var auto = document.getElementById('auto');
var isAutoPlay = imageSlider.getAuto();
auto.className = isAutoPlay ? "group2-Pause" : "group2-Play";
auto.title = isAutoPlay ? "Pause" : "Play";
}
switchPlayPauseClass();
//take tm1 out of the div.main
function dm1() {
var dm1 = document.getElementById("dm1");
//var main = document.getElementById("main");
//main.parentNode.appendChild(dm1);
document.body.appendChild(dm1);
}
dm1();
</script>
</body>
</html>
这是我的悬停菜单，'自动'锚标签是我幻灯片放映的停止按钮，但我无法将其放置在正确的位置，并且更改其大小，因为当它改变其大小时其他锚标签也改变虽然每个锚标签都有自己的class.although锚标签有自己的类，但它们不是独立的，当我改变'auto'锚标签的大小时，其他锚标签大小也会改变，我怎样才能使锚标签独立？而我的另一个问题是，虽然'自动'锚标记是在'拇指'部分中定义的，但它不会留在分区中并且放在它之外或者比它大。