我有一个导航栏（上面写着“关于我们”、“寻求帮助”、“支持我们”、“培训”、“为我们工作”），鼠标悬停时会显示该特定标题的下拉菜单。下拉列表显示在以下 div 的“顶部”……这正是我想要的。
问题是尽管我希望鼠标悬停时显示的下拉 div 与包含“关于我们”、“寻求帮助”等的 div 底部完全对齐，而目前它没有。
关于我如何做到这一点的任何想法？
顺便说一句，我正在使用蓝图框架和 jquery ...
<style type="text/css" media="screen">
<!--
BODY {
font: .72em Candara, "Trebuchet MS", verdana, arial, sans-serif;
font-size: 86%;
background: url(./images/body-bg.jpg) repeat-y scroll center top #eae9e7;}
h2 {
color: #262161;
margin-bottom: 5px;
}
h3 {
color:white;
padding:5px;
margin-bottom:0;
border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
}
#tabH {margin-bottom:10px;}
div.tabs > div h2 {
margin-top: 0;
}
div.tabs > a {
text-decoration:none;
}
#topnav li {
list-style:none;
}
.navhead {
width:135px;
padding:3px;
margin-right:2px;
float:left;
border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
background-color: #F3F3F4;
border-top: 1px silver solid;
border-right: 1px silver solid;
}
.navhead a
{
font-size:1.2em;
text-decoration:none;
}
.navheadhover {
background: #262161;
color: white;
}
.navcontent {
background-color:white;
border: 1px solid #262161;
padding: 3px;
position:absolute;
}
.navcontent p, headTxt p {padding:5px;}
#headline {
margin-bottom:20px;
}
.blue-bg {
background-color:#262161;
}
#footer {
clear:both;
background: url(./images/footer.jpg) no-repeat scroll 0 0;
background: url(./images/body-bg.jpg) repeat-y scroll center top #eae9e7;
}
-->
</style>
<script>
$(document).ready(function()
{
var navContainers = $('.navcontent');
navContainers.hide();
$('div.tabs a').mouseover(function ()
{
var myhash=$(this).attr('hash');
console.log ('hash = ' + myhash);
navContainers.hide();
navContainers.filter(this.hash).show();
$('.navhead').removeClass('navheadhover');
$(this.parentNode).addClass('navheadhover');
return false;
})
$('.navcontent, .navigation-container').mouseleave(function ()
{
$('.navhead').removeClass('navheadhover');
navContainers.hide();
return false;
})
});
</script>
这是html：
<script type="text/javascript" src="jquery152.js"></script>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Tabs</title>
</head>
<body class="container">
<div class=span-24>
<BR>
<div id=logo class='span-4'>
<img src="./images/CANFull10.jpg">
</div>
<div id=tabH class="tabs span-20 last navigation-container">
<br><br>
<ul id=topnav class="right">
<li class='navhead'><a href="#first" id=mark>About Us</a><br>What we do & how you can help.</li>
<li class='navhead'><a href="#second" id=services>Looking For Help</a><br>Find a service to help you.</li>
<li class='navhead'><a href="#third" id=otherstuff>Support Us</a><br>More here. Second line of text</li>
<li class='navhead'><a href="#fourth" id=otherstuff>Training</a><br>See our courses. more text here.</li>
<li class='navhead'><a href="#fifth" id=otherstuff>Work for Us</a><br>See what we offer. more text here.</li>
</ul>
<div id="first" class="navcontent span-20">
<h2>About Us</h2>
<p> Some text here maybe followed by some links</p>
<ul>
<li>Link One</li>
<li>Link Two</li>
<li>Link Three</li>
</ul>
</div>
<div id="second" class="navcontent span-20">
<h2>Looking for Help</h2>
<p>Eastman Kodak, the company that invented the hand-held camera, has filed for bankruptcy protection. The move gives the company time to reorganise itself without facing its creditors, and Kodak said that it would mean business as normal for customers. The company has recently moved away from cameras to refocus on making printers to stem falling profits. The 133-year-old firm has struggled to keep up with competitors who were quicker to adapt to the digital era. Announcing the move to seek bankruptcy protection, Antonio M Perez, Kodak's chairman and chief executive, said: "The board of directors and the entire senior management team unanimously believe that this is a necessary step and the right thing to do for the future of Kodak." </p>
</div>
<div id="third" class="navcontent span-20">
<h2>Support Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis ostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="fourth" class="navcontent span-20">
<h2>Training</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis ostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="fifth" class="navcontent span-20">
<h2>Work for Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis ostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div id=headline class="span-24">
<div class='span-16'>
<img src="./images/place.jpg" alt="CAN is a one of the Best Companies to work for." title="CAN is a one of the Best Companies to work for.">
</div>
<div class='span-8 last' >
<h3 class=blue-bg>One of the best!</h3>
<p>Being a best company goes beyond the bottom line. <br><br>
It's about excelling in every area throughout the workplace and an organisation's commitment to its most important assets - its workforce.<br><br>
Focusing on employees brings real benefits such as, improved workplace engagement, better staff retention.</p>
</div>
</div>
<div id=footer class='span-24'>
<div class='span-12'>Footer</div>
</div>