メガメニューのドリルダウンメニューで孫を出したい

<div id="mainsection">
<ul id="dropmenu">
  <li><a href="#"><img src="image/head/navi_chople_logo.png" width="72" height="25" alt=""/>カテゴリ</a>
    <ul>
      <li><a href="#">すべて</a></li>



      <li><a href="#">食品</a>
        <ul>
          <li><a href="#">お菓子</a></li>
          <li><a href="#">アイス</a></li>
        </ul>
      </li>
      <li><a href="#">飲料</a></li>
    </ul>
  </li>
  <li><a href="#">メニュー</a>
    <ul>
      <li><a href="#">サブメニュー</a></li>
      <li><a href="#">サブメニュー</a></li>
      <li><a href="#">サブメニュー</a></li>
      <li><a href="#">サブメニュー</a></li>
    </ul>
  </li>
  <li><a href="#">メニュー</a>
    <ul>
      <li><a href="#">サブメニュー</a></li>
      <li><a href="#">サブメニュー</a></li>
      <li><a href="#">サブメニュー</a></li>
    </ul>
  </li>
  <li><a href="#">メニュー</a>
    <ul>
      <li><a href="#">サブメニュー</a></li>
      <li><a href="#">サブメニュー</a></li>
    </ul>
  </li>
  <li><a href="#">メニュー</a>
    <ul>
      <li><a href="#">サブメニュー</a></li>
      <li><a href="#">サブメニュー</a></li>
      <li><a href="#">サブメニュー</a></li>
    </ul>
  </li>
</ul>

        <nav>

#dropmenu{
  position: relative;
  list-style-type: none;
  width: 1000px;
  height: 40px;
  margin:0;
  padding: 0;
  background: #8a9b0f;
  border-bottom: 5px solid #535d09;
  border-radius: 3px 3px 0 0;
}
#dropmenu li{
  width: 20%;
  float: left;
  margin: 0;
  padding: 0;
  text-align: center;
}
#dropmenu img{
    vertical-align:middle;
    margin-top:-10px;
    margin-right:10px;
}
#dropmenu li a{
  display: block;
  margin: 0;
  padding: 15px 0 11px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  text-decoration: none;
}
#dropmenu li ul{
  list-style: none;
/*  position: absolute; */ /*modified */
/*  top: 100%; */ /*modified */
/*  left: 0; */ /*modified */
  margin: 0;
  padding: 0;
  border-radius: 0 0 3px 3px;
}
#dropmenu li ul li{
  overflow: hidden;
  width: 1000px;
  height: 0;
  color: #fff;
  -moz-transition: .2s;
  -webkit-transition: .2s;
  -o-transition: .2s;
  -ms-transition: .2s;
  transition: .2s;
}
#dropmenu li ul li a{
  padding: 13px 15px;
  background: #6e7c0c;
  text-align: left;
  font-size: 12px;
  font-weight: normal;
}
#dropmenu li:hover > a{
  background: #6e7c0c;
  color: #eff7b1;
}
#dropmenu > li:hover > a{
  border-radius: 3px 3px 0 0;
}
#dropmenu li:hover{ /*modified */
  height:auto !important; /*modified */
} /*modified */
#dropmenu li:hover > ul > li{ /*modified */
  overflow: visible; /*modified */
  height: 38px;
  background: #6e7c0c;
  border-top: 1px solid #7c8c0e;
  border-bottom: 1px solid #616d0b;
}
#dropmenu li:hover ul li:first-child{
  border-top: 0;
}
#dropmenu li:hover ul li:last-child{
  border-bottom: 0;
}
#dropmenu li:hover ul li:last-child a{
  border-radius: 0 0 3px 3px;
}

https://jsfiddle.net/19b4eyr6/

なんかおかしいところあるかもしれませんが。
結構疲れました……

<ul>
  <li>a</li>
  <li>b</li>
  <li class="parent">c
    <ul class="child">
      <li>x</li>
      <li>y</li>
      <li>z</li>
    </ul>
  </li>
</ul>

htmlをこのような構成にして

.child{
  display: none;
}
.parent:hover>.child{
  display: block;
}

とすればcssだけでも可能です。li:hover未対応のブラウザも対象の場合はJavaScriptで同じことをしてあげれば大丈夫だと思います。

リンク先を拝見したのですが
「JavaScriptのコード」と「htmlコードの孫要素」がないようでしたので孫要素が残ってしまう件に関しては確認できませんが表示を切り替える部分をできるだけ単純化されると良いと思います。

孫要素の表示位置がおかしい件に関しては#dropmenu liと子孫セレクタでfloat:leftが指定されているので子/孫要素のliにもfloatが適用されているあたりが怪しそうです。

#dropmenu>liと子セレクタを使用するか#dropmenu li.parent等と親要素のみにclassを設定するなどして親要素のcssの指定が子要素に影響しないように工夫してみてください。