0
我有一個導航欄（'關於我們'，'尋找幫助'，'支持我們'，'訓練'，'爲我們工作'），在鼠標懸停時，顯示該特定標題的下拉菜單。該下拉顯示'在'以下的div頂部......這正是我想要的。需要CSS幫助嗎？需要下拉菜單以降低顯示效果
問題是，雖然我想要在鼠標懸停上顯示的下拉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>
一個http://jsfiddle.net會真的幫助這裏。 – 2012-04-12 09:29:32
請提供一個工作示例？ – 2012-04-12 09:46:53
http://work.can.org.uk/tabs-basic.html上的問題示例 – user1106252 2012-04-13 08:12:34