Reputation: 15

How do I display the bottom border of parent instead of top border of child?

Here is what I have - 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>

When ever you roll over the list items to display the hidden div they contain, the top border of the div overlaps the bottom border of the list item. I need to reverse this to make it look like the list item opens up into the div.

Any ideas?

Upvotes: 0