nav.css

.bottom-nav { font-family: helvetica, arial, sans-serif; position: fixed; left: 0; bottom: 0; width: 100%; height: 80px; background: rgba(0, 0, 0, 0.8); color: white; }
.bottom-nav ul, .bottom-nav li { margin: 0; padding: 0; border: 0; list-style: none; }
.bottom-nav a { color: white; color: inherit; text-decoration: inherit; cursor: inherit; font-size: 13px; line-height: 1.5; }
.bottom-nav a:active, .bottom-nav a:focus { outline: none; }
.bottom-nav .bottom-nav-item { position: relative; text-align: center; width: 7em; float: left; padding-top: 1em; }
.bottom-nav .sub-menu { position: absolute; bottom: 100%; left: 0; width: 100%; height: 0px; opacity: .75; overflow: hidden; margin: 0 -99999px 0; padding: 0 99999px 0; background: rgba(0, 0, 0, 0.8); -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; transition: 1s; }
.bottom-nav .sub-menu a { display: block; padding: 3px; }
.bottom-nav .sub-menu a:hover { text-decoration: none; background: #de9c31; }
.bottom-nav .sub-menu li:first-child { margin-top: 1em; }
.bottom-nav .bottom-nav-item:hover .sub-menu { height: auto; opacity: 1; min-height: 0px; max-height: 1000px; }

nav.html

<div class="bottom-nav">
  <ul>

    <li class="bottom-nav-item">

          <a href="#">
              <div class="zh">關於我們</div>
              <div class="en">About us</div>
          </a>

          <ul class="sub-menu">
              <li><a href="#">子項目文字</a></li>
              <li><a href="#">子項目文字</a></li>
              <li><a href="#">子項目文字</a></li>
              ...

          </ul>

    </li>
    <li class="bottom-nav-item">... 第二個大項目...</li>

</ul>
</div>