body, ul, li,a {
 margin: 0;
 padding: 0;
 list-style: none;
}
.menu{
 background:#000;
}
.menu a{
 display: block;
 text-decoration: none;
 padding: 8px 22px;
 color: #4a1f00;
 border: 1px solid #a0d14a;
 font-family: 'open_sansregular';
 font-size:16px;
 text-transform:capitalize;
 line-height:18px;

 
}
.menu li{
 position: relative;
}
.menu li ul{
 display: block;
 background: rgba(0, 0, 0, 0.6);
 max-height: 0;
 overflow: hidden;
}
nav{
  max-height:50px;
 overflow: hidden;
}
.menu-btn{
 background:#a0d14a;
 text-align: left;
 cursor: s-resize;
 font-family: 'open_sansregular';
 font-size:16px; 
 color:#fff;
 text-transform:capitalize;

}
.menu-btn img{
 vertical-align: middle;
 height: 50px;
}
.menu-open,
.menu .open > ul{
 max-height: 2000px;
}
.menu .open > .more img{
 transform: rotate(-90deg);
}
.more img{
 height: 40px;
}
.more{
 background: rgba(0, 0, 0, 0.38);
 float: right;
 cursor: move; display:block;
}

@media all and (min-width: 768px){
nav{
 max-height: 100%;
 overflow: visible;
}
.menu-btn{
 display: none;
}

.menu a{ 
 background: #232d3b;
}
.menu a:hover{

}
.menu > li{
 float:left;
 margin:0px;
 

}
.menu li ul{
 left: -9999px;
 position:absolute;
 overflow: visible;
}
.menu > li > ul ul{
 top: 0;
}
.menu li:hover > ul{
 left:100%; 
}
.menu > li:hover > ul{
 left: 0;
}
.menu .open > ul{
 left:100%; 
}
.menu > li.open > ul{
 left: 0;
}

.more{
 display:none;
}

.menu a{background:none; border:none;}

.menu ul{
	background:#333 !important;
	min-width:170px;
	max-height:inherit !important;
	}
.menu ul ul{
	background:#333 !important;
	min-width:170px;
	max-height:inherit !important;
	}	
	
.menu li li a	{font-size:14px; color:#fff; text-align:left; padding: 10px 15px;}

.menu > li{position:relative;}

	
}
.box{
    height: 300px;
    background: hotpink;
}

.box p{
  padding: 30px;
  font-family:verdana;
  text-align:center;
  font-size:24px;
}
.box a{
  color:#fff;
  text-decoration:none;
}