<ul>
<li class="shop"><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>
</ul>
.shop{
                    display: block;
                    background: #FFC600 ;
                    color: #FFF;
                    height: 58px;
                    line-height: 58px;
                    padding-left: 60px;
                    text-transform: uppercase;
                    font-weight: 500;
                    text-decoration: none;
  position: relative;
  max-width:230px;
            }

.shop ul{
                    list-style-type: none;
                    max-height: 0px;
                    overflow: hidden;
                    transition: max-height 0.7s linear;
                    min-width: 270px;
                    position: absolute;
                    left: 0;
                    top: 58px;
                    background: #FFF;
                    border: 2px solid #FFC600;
                    
                   
                }

.shop ul li{
                        height: 30px;
                        line-height: 30px;
                        background: #FFF;
                    }

.shop:hover ul{
  max-height:800px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.