@import url(http://fonts.googleapis.com/css?family=Alef); * {margin: 0; padding: 0; border: 0 none;} html { padding: 2rem; background: #044C62; color: #7CD7C4; font-family: 'Alef', sans-serif; } body { background: #F57B6C; padding: 2rem; } .contenedor { padding: 2rem; height: 100px; background: #4788B0; } .max { display: inline-block; width: 40%; margin-right: 9%; height: 100%; vertical-align: top; } .b { background: #044C62; border-radius: 3px; display: inline-block; text-decoration: none; font-size: 1.5rem; padding: 0 1.5rem 0 .5rem; overflow: hidden; color: #7CD7C4; max-width: 0; -moz-transition: 2s linear; -webkit-transition: 2s linear; transition: 2s linear; } .b:hover{ max-width: 500px; } .b:before { content: '\25BA'; position: relative; color: #fff; padding: 0 1rem 0 0; color: inherit; font-weight: 900; } .menu { overflow: hidden; cursor: pointer; } h3 { background: #044C62; border-radius: 3px; } .redes { background: #044C62; max-height: 0; -moz-transition: max-height 2s linear; -webkit-transition: max-height 2s linear; transition: max-height 2s linear; } .menu li:hover .redes { max-height: 500px; color: #E8EEE7; } .redes li:hover {background: #F57B6C;}
<div class="contenedor"> <div class="max"> <p>Max-height</p> <ul class="menu"> <li><h3>Redes</h3> <ul class="redes"> <li>En Gplus</li> <li>En Twitter</li> <li>En Blogger</li> </ul> </li> </ul> </div> <div class="max"> <p>Max-width</p> <a class="b" href="">KsesoCss</a> </div> </div>