Как отобразить нижнюю границу родительского элемента вместо верхней границы дочернего элемента?

Вот что у меня есть - 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