0
マウスバーでは、マウスバーで、「私たちについて」、「ヘルプを探しています」、「トレーニングを受けています」、その特定の見出しのドロップダウンを示します。ドロップダウンは次のdivの上に表示されます...これはまさに私が望むものです。CSSのヘルプが必要ですか？下に表示されるようにドロップダウンが必要です
マウスオーバーで表示されるドロップダウン・ボックスが、「About Us」、「Help for Looking」などを含むdivの一番下に正確に並んでいて、現時点ではdoesntしたいのですが問題です。
どのように私がそれを達成できるかについてのアイデアはありますか？
ところで、私は...
<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>
を青写真フレームワークとjQueryを使用しています。ここの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が本当に役に立ちます。 –
実例を示してください。 –
http://work.can.org.uk/tabs-basic.htmlの問題の例 – user1106252