Edit file File name : responsive-menu.css Content :body, nav, ul, li, a {margin: 0; padding: 0;} body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } a {text-decoration: none;} .container { width: 90%; max-width: 900px; margin: 10px auto; } .toggleMenu { display: none; background: #666; padding: 10px 15px; color: #fff; } .nav1 { list-style: none; *zoom: 1; background:#175e4c; } .nav1:before, .nav1:after { content: " "; display: table; } .nav1:after { clear: both; } .nav1 ul { list-style: none; width: 9em; } .nav1 a { padding: 10px 15px; color:#fff; } .nav1 li { position: relative; } .nav1 > li { float: left; border-top: 1px solid #104336; } .nav1 > li > .parent { background-image: url("images/downArrow.png"); background-repeat: no-repeat; background-position: right; } .nav1 > li > a { display: block; } .nav1 li ul { position: absolute; left: -9999px; } .nav1 > li.hover > .side_menu { left: 0; } .nav1 li li.hover .side_menu { left: 100%; top: 0; } .nav1 li li a { display: block; background: #1d7a62; position: relative; z-index:100; border-top: 1px solid #175e4c; } .nav1 li li li a { background:#249578; z-index:200; border-top: 1px solid #1d7a62; } @media screen and (max-width: 768px) { .active { display: block; } .nav1 > li { float: none; } .nav1 > li > .parent { background-position: 95% 50%; } .nav1 li li .parent { background-image: url("images/downArrow.png"); background-repeat: no-repeat; background-position: 95% 50%; } .nav1 ul { display: block; width: 100%; } .nav1 > li.hover > ul , .nav1 li li.hover ul { position: static; } } Save