这是我所拥有的 - http://jsfiddle.net/SQApr/
CSS
/*
** MainNav is the div containing the navigation information
** This is defining overall size and shape
*/
#mainNav {
clear: both;
min-height: 40px;
width: 100%;
font-size: 18px;
position: relative;
}
/*
** Main list padding and style
*/
#mainNav ul {
padding: 0;
margin: 0 auto;
list-style: none;
}
/*
** Expand nav list for new information
*/
#mainNav ul:hover {height: 240px;}
/*
** Main item size and position
*/
#mainNav li {
float: left;
width: 19.805%;
height: 40px;
border-left: 1px solid #E8DEA5; /*******************************************/
border-right: 1px solid #E8DEA5; /* Make the border exist for sizing issues */
border-top: 1px solid #E8DEA5; /*******************************************/
}
/*
** Main item on hover
*/
#mainNav li:hover {
background-color: #ffffff; /* White */
border-left: 1px solid green;
border-right: 1px solid green;
border-top: 1px solid green;
border-bottom: 1px solid white;
}
/*
** Main item link formatting
*/
#mainNav li a {
margin: 0;
display: block;
line-height: 40px;
text-align: center;
text-decoration: none;
color: #000000; /* Black */
}
/*
** Main div position and bg color on list item hover
*/
#mainNav li:hover .mainDiv {
position: absolute;
left: 0;
background-color: #ffffff; /* White */
}
/*
** Any div within mainNav's li must have position relative
*/
#mainNav li div {
position: relative;
padding: 0;
margin: 0;
}
/*
** Main div position
*/
#mainNav li .mainDiv {
width: 1024px; /* Same as #wrapper in styles.css */
height: 200px;
left: -9999px;
border: 1px green solid;
}
#mainNav li .title {
clear: both;
position: relative;
top: 30px;
left: 50px;
font-size: 24px;
font-weight: bold;
color: #0b5a5a; /* Gray blue */
border-bottom: 2px solid #0b5a5a; /* Gray blue */
}
.navLinks li {
float: left;
display: block;
border: none;
}
HTML
<div style="width:1024px;">
<div id="mainNav">
<ul>
<li><a href="#">Home</a>
<div class="mainDiv">
<span class="title">Welcome to the website!</span>
<div style="border:red 1px solid;
top: 60px;
left: 60px;
width: 400px;
height: 80px;">
Here will be a paragraph filled with more information about what the site does
and how it will benefit the community and companies. Or anything else you
would like to say on every page.
</div>
<div style="border:red 1px solid;
clear: both;
top: -60px;
left: 600px;
width: 200px;
height: 80px;">
<ul class="navLinks">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">Third link</a></li>
</ul>
</div>
</div>
</li>
<li><a href="#">Community</a>
<div class="mainDiv">
<span class="title">Community</span>
<a href="#">Browse People & Companies</a></br>
<a href="#">Directory</a></br>
Make Your Voice Heard</br>
<a href="#">Forums</a>
</div>
</li>
<li><a href="#">Information</a>
<div class="mainDiv">
<span class="title">Information</span>
<a href="#">First link</a></br>
List within a list
First link</a></br>
Second link</a></br>
Section Title</br>
<a href="#">Third link</a>
</br>
<a href="#">Third link</a>
</div>
</li>
<li><a href="#">Business Opportunities</a>
<div class="mainDiv">
<span class="title">Business Opportunities</span>
<a href="#">First link</a></br>
<a href="#">Second link</a></br>
<a href="#">Third link</a>
</div>
</li>
<li><a href="#">Support</a>
<div class="mainDiv">
<span class="title">Support</span>
<a href="#">FAQs</a></br>
<a href="#">Site Map</a></br>
<a href="#">Third link</a>
</div>
</li>
</ul>
</div>
</div>
当您滚动列表项以显示它们包含的隐藏 div 时，div 的顶部边框与列表项的底部边框重叠。我需要扭转这一点，使其看起来像列表项打开到 div 中。
有任何想法吗？