如何显示父级的底部边界而不是顶部边界？

这里是我 - 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中。

任何想法？

来源

2013-06-24 PBarnum

你有认识的任何问题信息“的jsfiddle必须由代码伴随着”？ http://meta.stackexchange.com/questions/149890/prevent-posts-with-links-to-jsfiddle-and-no-code –

是的，如果有人为测试提供链接，我觉得它完全没用。 ..但我会添加代码，如果它会保护我不被投票。 – PBarnum

通过使用javascript。 AFAIK，用CSS，悬停父母会影响孩子。但是，悬停小孩不会影响父母。因此JS。只需用JS添加/删除特定的类。如果你这样做，你仍然可以使用CSS。 – enhzflep