0

这是我所拥有的 - 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 中。

有任何想法吗?

4

3 回答 3

2

给打开的 divz-index: -1

像这里:http: //jsfiddle.net/SQApr/3/

于 2013-06-24T23:40:38.967 回答
0

更改li:hover a- 添加白色底部边框,使其位置相对于添加 z-index

见:http: //jsfiddle.net/SQApr/1/

顺便说一句:我还必须添加负边距li:hover .mainDiv

编辑:

Chanckjh 版本比我的要简单得多。

于 2013-06-24T23:42:09.690 回答
0

您可以使用 z-index 属性将 nav 放在 mainDiv 上,从而使 mainDiv 的值低于 nav。

W3Schools 的 z-index

于 2013-06-24T23:43:43.083 回答