I am looking to have the logo aligned in the center and social media buttons aligned on the right in the header. How do I achieve? I've been able to get it aligned with my nav bar but that's not what I'm looking for. Any help would be appreciated.
HTML
<body>
<div id="wrapper">
<header>
<div class="logo">
<img src="http://i.imgur.com/cosDXx1.png"/>
</div>
<div class ="social">
<img src="http://i.imgur.com/1GhbSOj.png"/>
<img src="http://i.imgur.com/oawoJtC.png"/>
<img src="http://i.imgur.com/2dAtAX3.png"/>
</div>
</header>
<nav>
<ul class="egmenu">
<li>Home</li>
<li>About
<ul>
<li>History</li>
<li>Brothers</li>
</ul>
</li>
<li>Philanthropy
<ul>
<li>Kovacs Color Run</li>
<li>Greek God</li>
<li>Boys & Girls Club</li>
</ul>
</li>
<li>Membership</li>
<li>Contact</li>
</ul>
</nav>
CSS
body {
margin:0px;
padding:0px;
}
header {
height:105px;
background-color:black;
text-align:center;
}
header img{
display:inline-block;
margin: 0 auto;
}
header .social a {
float:right;
}
ul.egmenu {
background: #333;
height: 30px;
width: 100%;
text-align:center;
}
ul.egmenu > li {
position: relative;
display:inline-block;
list-style:none;
}
ul.egmenu ul {
background: #444;
display: none;
position: absolute;
left: 0; top: 100%;
}
ul.egmenu a {
cursor: pointer;
display: block;
color: white;
line-height: 30px;
padding: 0 20px;
text-decoration:none;
}
ul.egmenu li {
list-style: none;
}
ul.egmenu li:hover {
background: #555;
}
ul.egmenu li:hover ul {
display: block;
padding:0;
}
#media all and (max-width: 600px) {
ul.egmenu { height: auto; padding:0;}
ul.egmenu > li { float: none; width: 100%; }
ul.egmenu a { line-height: 40px; }
ul.egmenu ul { position: relative; }
}
#media all and (min-width: 601px) {
ul.egmenu li:hover { background: #555; }
ul.egmenu li:hover ul { display: block; }
}
#media all and (max-width: 600px) {
ul.egmenu { height: auto; }
ul.egmenu > li { float: none; width: 100%; }
ul.egmenu a { line-height: 40px; }
ul.egmenu ul { position: relative; }
ul.egmenu li.tap { background: #555; }
ul.egmenu li.tap ul { display: block; }
}
Heres a fiddle: http://jsfiddle.net/mcxa341s/
Remove the logo div and use CSS to add a background for the header.
Change to this:
header {
height:105px;
background: url('http://i.imgur.com/cosDXx1.png') no-repeat center;
background-color:black;
text-align:center;
}
And use margin-top for the social div to adjust the positioning.
JSFiddle Demo
UPDATE
Change:
header .social a {
float:right;
}
To this:
header .social {
position: absolute;
right: 0;
top: 40px;
}
JSFiddle Demo
Make the logo a background for the header and get rid of the logo div. Then your social media icons will align without a problem.
Use position:absolute for social media.
.social {
position: absolute;
right: 20px;
top: 50px;
}
CSS:
body {
margin:0px;
padding:0px;
}
header {
height:105px;
background-color:black;
text-align:center;
}
header .logo{ margin: 0 auto;}
header .social{margin-top:-24px;}
header img{
display:inline-block;
}
header .social a {
float:right;
}
ul.egmenu {
background: #333;
height: 30px;
width: 100%;
text-align:center;
}
ul.egmenu > li {
position: relative;
display:inline-block;
list-style:none;
}
ul.egmenu ul {
background: #444;
display: none;
position: absolute;
left: 0; top: 100%;
}
ul.egmenu a {
cursor: pointer;
display: block;
color: white;
line-height: 30px;
padding: 0 20px;
text-decoration:none;
}
ul.egmenu li {
list-style: none;
}
ul.egmenu li:hover {
background: #555;
}
ul.egmenu li:hover ul {
display: block;
padding:0;
}
#media all and (max-width: 600px) {
ul.egmenu { height: auto; padding:0;}
ul.egmenu > li { float: none; width: 100%; }
ul.egmenu a { line-height: 40px; }
ul.egmenu ul { position: relative; }
}
#media all and (min-width: 601px) {
ul.egmenu li:hover { background: #555; }
ul.egmenu li:hover ul { display: block; }
}
#media all and (max-width: 600px) {
ul.egmenu { height: auto; }
ul.egmenu > li { float: none; width: 100%; }
ul.egmenu a { line-height: 40px; }
ul.egmenu ul { position: relative; }
ul.egmenu li.tap { background: #555; }
ul.egmenu li.tap ul { display: block; }
}
JSFiddle Demo
Related
Hi so I'm trying to align my navigation menu where the links align on one line with each other. But instead of aligning they are stacking. I'm currently coding in dreamweaver. I don't know what's going on.
Here is my css
body, html {
margin: auto;
width: 100%;
height: 100%;
}
.header {
width: 100%;
height: 100%;
background: url("") no-repeat;
display: block;
}
.header > .nav-container {
width: 100%;
height: 50px;
padding-top: 0px;
display: block;
}
.header > .nav-container > .logo {
width: 100%;
max-width: 196px;
display: inline-block;
margin-left: 20px;
background: #000;
}
.header > .nav-container > .navigation {
display: inline-block;
width: 60%;
background: #000;
}
.nav-container > ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.nav-container > li {
float: left;
display:inline-block;
}
.nav-container > li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav-container > li a:hover {
background-color: #111;
}
.nav-container > .active {
background-color: #4CAF50;
}
and the html
<div class="header">
<div class="nav-container">
<div class="logo">
<img src="C:\Users\Terrell\Documents\Designs\GetVersed\site\versedlogo.png">
</div>
<!-- Naviagation -->
<div class="navigation">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
<!-- End Navigation -->
</div>
Can anyone explain to me what I am doing wrong.
I think this is the simplest way that I can break down what i'm asking for this site is asking me to write more because it's so much code here so this is just exrta writing.
You need to set display property of each List item as Inline.
ul li{
display: inline;
}
Add the block below to your css
.navigation ul {
display: flex;
}
.navigation li {
padding: 5px;
}
.navigation ul {
display: flex;
}
.navigation li {
padding: 5px;
}
body,
html {
margin: auto;
width: 100%;
height: 100%;
}
.header {
width: 100%;
height: 100%;
background: url("") no-repeat;
display: block;
}
.header>.nav-container {
width: 100%;
height: 50px;
padding-top: 0px;
display: block;
}
.header>.nav-container>.logo {
width: 100%;
max-width: 196px;
display: inline-block;
margin-left: 20px;
background: #000;
}
.header>.nav-container>.navigation {
display: inline-block;
width: 60%;
background: #000;
}
.nav-container>ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.nav-container>li {
float: left;
display: inline-block;
}
.nav-container>li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav-container>li a:hover {
background-color: #111;
}
.nav-container>.active {
background-color: #4CAF50;
}
<div class="header">
<div class="nav-container">
<div class="logo">
<img src="C:\Users\Terrell\Documents\Designs\GetVersed\site\versedlogo.png">
</div>
<!-- Naviagation -->
<div class="navigation">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
<!-- End Navigation -->
</div>
ul{
list-style: none;
position: absolute;
left: 0px;
}
li>a{
display:inline;
}
li{
display:inline-block;
}
implement these css properties , you should get it inline
working fiddle
You should follow proper way to apply css
body, html {
margin:auto;
width:100%;
height:100%;
}
.header{
width:100%;
height:100%;
background:url("") no-repeat;
display:block;
}
.header > .nav-container{
width:100%;
height:50px;
padding-top:0px;
display:block;
}
.header > .nav-container > .logo{
width:100%;
max-width:196px;
display:inline-block;
margin-left:20px;
background:#000;
}
.header > .nav-container > .navigation{
display:inline-block;
width:60%;
background:#000;
vertical-align: middle
}
.navigation > ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.navigation ul > li {
float: left;
display:inline-block;
}
.navigation ul > li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navigation ul > li a:hover {
background-color: #111;
}
.navigation .active {
background-color: #4CAF50;
}
Remove the greater sign in css in between the element
ex:
.nav-container > li {
float: left;
display:inline-block;
}
write like this
.nav-container li {
float: left;
display:inline-block;
}
The greater than sign (>) selector in CSS is used to select the element with a specific parent. It is called as element > element selector. It is also known as the child combinator selector which means that it selects only those elements which are direct children of a parent. It looks only one level down the markup structure and not further deep down. Elements which are not the direct child of the specified parent is not selected.
https://www.geeksforgeeks.org/what-is-greater-than-sign-selector-in-css/
I need the last tab (About) to float to the right and the others to the left. It all floats left.
<div class="nav">
<ul>
<li>HOME</li>
<li>COSC 231</li>
<li>MAGIC 8 BALL</li>
<li>ABOUT</li>
</ul>
</div>
a {
color:#b7b7b7;
text-decoration:none;
}
body {
background-color:#0d0d0d;
font-family:Tahoma;
color:#ffffff;
text-align:center;
margin:0;
}
#lines {
line-height:.3px;
}
hr {
width:30%;
}
#page {
text-align:left;
}
div {
margin:0 auto;
text-align:center;
}
img {
width:50%;
border:1px solid white;
}
.nav {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
.nav div {
width:100%;
position: fixed;
}
.nav ul {
list-style-type: none;
width:100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #dbdbdb;
}
.nav li {
float: left;
}
.nav li a {
color: white;
text-align: center;
display: block;
padding: 12px 16px;
text-decoration: none;
-o-transition:.25s;
-ms-transition:.25s;
-moz-transition:.25s;
-webkit-transition:.25s;
transition:.25s;
}
.nav li a:hover {
background-color: #efefef;
}
.aboutRight {
position: fixed;
float: right;
left: 100px;
}
First of all have style for class aboutRight .aboutRight and your link has ID <li>ABOUT</li>. Rewrite id into class as it's a bad practice to use IDs for styling.
Second, you don't need position:fixed; in this style, it won't take space in a parent container, you need this link to be in a same position as other links.
Third, you should apply that class not to the <a> tag, but to the <li> element, because you want to float right <li> inside of <ul>, not <a> inside of <li>
And lastly, since you have this rule .nav li { float: left; } and want to override it for a certain li, you should write more specific selector, not just a class, e.g. nav li.aboutRight
I created a snippet for you with working code.
a {
color:#b7b7b7;
text-decoration:none;
}
body {
background-color:#0d0d0d;
font-family:Tahoma;
color:#ffffff;
text-align:center;
margin:0;
}
#lines {
line-height:.3px;
}
hr {
width:30%;
}
#page {
text-align:left;
}
div {
margin:0 auto;
text-align:center;
}
img {
width:50%;
border:1px solid white;
}
.nav {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
.nav div {
width:100%;
position: fixed;
}
.nav ul {
list-style-type: none;
width:100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #dbdbdb;
}
.nav li {
float: left;
}
.nav li a {
color: white;
text-align: center;
display: block;
padding: 12px 16px;
text-decoration: none;
-o-transition:.25s;
-ms-transition:.25s;
-moz-transition:.25s;
-webkit-transition:.25s;
transition:.25s;
}
.nav li a:hover {
background-color: #efefef;
}
.nav li.aboutRight {
float: right;
left: 100px;
}
<div class="nav">
<ul>
<li>HOME</li>
<li>COSC 231</li>
<li>MAGIC 8 BALL</li>
<li class="aboutRight">ABOUT</li>
</ul>
</div>
I am trying to make a responsive navigation bar with responsive style, if the size of screen is smaller than 750px then in the navigation bar will appear the menu icon in the middle and when hovering it will display the options in the list, below is my code, and possibly i have overlapped css styling.
.topnav {
position: relative;
overflow: hidden;
background-color: #a2d4c3;
margin: 3px 50px 3px 50px;
border: 1px solid black;
border-radius: 5px;
}
.topnav a {
float: left;
text-align: center;
padding: 14px 16px;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
#media screen and (max-width: 760px) {
.topnav a {
float: none;
display: block;
}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.hidden:hover a {
background-color: #dab756;
display: block;
}
.hidden:hover ul a:hover {
color: #fff;
}
.hidden li ul {
display: none;
}
.hidden li {
display: block;
float: none;
}
.hidden ul li a {
width: auto;
min-width: auto;
display: block;
}
.hidden .hidden:hover li a {
display: block;
}
#media screen and (max-width: 750px) {
.hidden ul {
position: static;
display: none;
}
.hidden li a {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link </head>
<body>
<header id="header">
<div class="topnav">
<ul class="hidden">
<li>Menu</li>
<li>Home</li>
<li>About Us</li>
</ul>
</div>
</header>
</body>
</html>
Now I think that this snippet is the same as you want...
body {
font-family: sans-serif;
}
* {
box-sizing: border-box;
}
header {
background: #181818;
height: 200px;
padding-top: 40px;
}
.inner {
max-width: 1000px;
margin: 0 auto;
padding: 0px 20px;
position: relative;
}
.logo {
text-decoration: none;
color: #777;
font-weight: 800;
font-size: 30px;
line-height: 40px;
}
h1 {
text-align: center;
width: 100%;
margin-top: 120px;
color: #eee;
font-weight: 800;
font-size: 40px;
}
nav > ul {
float: left;
}
nav > ul > li {
text-align: center;
line-height: 40px;
margin-left: 70px;
}
nav > ul li ul li {
width: 100%;
text-align: left;
}
nav ul li:hover {
cursor: pointer;
position: relative;
}
nav ul li:hover > ul {
display: block;
}
nav ul li:hover > a {
color: #777;
}
nav > ul > li > a {
cursor: pointer;
display: block;
outline: none;
width: 100%;
text-decoration: none;
}
nav > ul > li {
float: left;
}
nav a {
color: white;
}
nav > ul li ul {
display: none;
position: absolute;
left: 0;
top: 100%;
width: 100%;
z-index: 2000;
}
nav > ul li ul li > a {
text-decoration: none;
}
[type="checkbox"],
label {
display: none;
}
#media screen and (max-width: 750px) {
nav ul {
display: none;
}
label {
display: block;
background: #222;
width: 40px;
height: 40px;
cursor: pointer;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
label:after {
content: '';
display: block;
width: 30px;
height: 5px;
background: #777;
margin: 7px 5px;
box-shadow: 0px 10px 0px #777, 0px 20px 0px #777
}
[type="checkbox"]:checked ~ ul {
display: block;
z-index: 9999;
position: absolute;
right: 20px;
left: 20px;
}
nav a {
color: #777;
}
nav ul li {
display: block;
float: none;
width: 100%;
text-align: left;
background: #222;
text-indent: 20px;
}
nav > ul > li {
margin-left: 0px;
}
nav > ul li ul li {
display: block;
float: none;
}
nav > ul li ul {
display: block;
position: relative;
width: 100%;
z-index: 9999;
float: none;
}
h1 {
font-size: 26px;
}
}
<header>
<div class="inner">
<nav>
<input type="checkbox" id="nav" /><label for="nav"></label>
<ul>
<li>Menu</li>
<li>Home</li>
<li>About Us</li>
</ul>
</nav>
</div>
</header>
you need to change classes of your nav with javascript depending on conditions something like given below and then style this changed classes accordingly.
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
or refere this example
I'm trying to make my mobile menu load expanded (top level links only) on page load. I've got a second level of nested links I'd like to stay hidden. I'm sure this is a super simple fix but I've already spent an afternoon fiddling with my code that I think it's time to ask the professionals ;)
My code:
https://jsfiddle.net/ubxsksz2/
<nav id="nav" role="navigation">
<font size="+2">MENU</font>
<font size="+2">HIDE MENU</font>
<ul>
<li><b><font color="#CC9933">HOME:</font></b></li>
<li>
FIRST LEVEL <img src="ddlevelsfiles/arrow-down.gif">
<ul>
<li>SECOND LEVEL LINK</li>
</ul>
</li>
</ul>
</nav>
/* New Responsive Menu CSS */
#crumbs {
width: 97%;
overflow: hidden;
}
#nav {
/* container */
background: #333;
}
#nav > a {
display: none;
}
#nav a {
color: #FFF;
}
#nav li {
position: relative;
background: #CC9;
color: #000;
padding: 15px 15px;
padding-bottom: 15px;
border-bottom: 1px solid #333;
}
/* first level */
#nav > ul {
font: bold 14px Verdana;
}
#nav li ul li a {
color: black;
}
#nav > ul > li {
height: 100%;
float: left;
padding: 15px 10px;
background: #333;
}
/* second level */
#nav li ul {
display: none;
position: absolute;
top: 100%;
width: 100%;
}
#nav li:hover ul {
display: block;
}
#media only screen and ( max-width: 640px)
/* 640 */
{
#sticky-element {}
.nav-container {}
.f-nav {
z-index: 9999;
position: fixed;
left: 0;
top: 0;
width: 100%;
}
#nav {
position: relative;
}
#nav > a {}
#nav:not(:target) > a:first-of-type,
#nav:target > a:last-of-type {
display: block;
}
/* first level */
#nav > ul {
height: auto;
display: none;
position: absolute;
left: 0;
right: 0;
}
#nav:target > ul {
display: block;
}
#nav > ul > li {
width: 93%;
float: none;
}
/* second level */
#nav li ul {
position: static;
}
}
It actually took me a while to get this working...
Man, you are making some crazy navbar! +1
I hope this helps you!
Keep on coding!
/* New Responsive Menu CSS */
#crumbs {
width: 97%;
overflow: hidden;
}
#nav {
/* container */
background: #333;
}
#nav > a {
display: none;
}
#nav a {
color: #FFF;
}
#nav li {
position: relative;
background: #CC9;
color: #000;
padding: 15px 15px;
padding-bottom: 15px;
border-bottom: 1px solid #333;
}
/* first level */
#nav > ul {
font: bold 14px Verdana;
}
#nav li ul li a {
color: black;
}
#nav > ul > li {
height: 100%;
float: left;
padding: 15px 10px;
background: #333;
}
/* second level */
#nav li ul {
display: none;
position: absolute;
top: 100%;
width: 100%;
}
#nav li:hover ul {
display: block;
}
#media only screen and ( max-width: 640px)
/* 640 */
{
#sticky-element {}
.nav-container {}
.f-nav {
z-index: 9999;
position: fixed;
left: 0;
top: 0;
width: 100%;
}
#nav {
position: relative;
}
#nav > a {}
#nav:not(:target) > a:first-of-type,
#nav:target > a:last-of-type {
display: block;
}
/* first level */
#nav > ul {
height: auto;
display: none;
position: absolute;
left: 0;
right: 0;
}
#nav:target > ul {
display: block;
}
#nav > ul > li {
width: 93%;
float: none;
}
/* second level */
#nav li ul {
position: static;
}
}
<body onload="window.location.href+='#nav';">
<nav id="nav" role="navigation">
<font size="+2">MENU</font>
<font size="+2">HIDE MENU</font>
<ul>
<li><b><font color="#CC9933">HOME:</font></b></li>
<li>
FIRST LEVEL <img src="ddlevelsfiles/arrow-down.gif">
<ul>
<li>SECOND LEVEL LINK</li>
</ul>
</li>
</ul>
</nav>
</body>
I'm trying to create a pure css drop down menu. Everything works fine except for when I hover to drop the menu down, the entire nav bar also gets expanded and I don't want it to do that. Here is my code:
.nav-bar {
list-style:none;
}
#right {
padding-right: 100px;
}
#right li {
display: inline;
float: right;
padding: 3% 0 0.5% 0;
margin-top: -30px;
}
#right li img {
max-width: 70%;
max-height: auto;
}
#media screen and (max-width: 1000px) {
#right {
display: none;
}
}
#nav-refer {
padding: 5% 15% 5% 15%;
border-radius: 25px;
background: #FFC52D;
font-family: 'Bebas Neue Bold';
font-size: 22px;
text-align: center;
color: black;
text-decoration: none;
}
#media (max-width: 1000px) {
#nav-refer {
display: none;
}
}
#left {
padding-left: 100px;
}
#left li {
display: inline;
float: left;
display: block;
margin: -5px 0 0 -30px;
}
#left li img {
padding: 0 0 0 15px;
}
.drop_menu {
background: white;
padding:0;
margin:0;
list-style-type:none;
/*height: 30px;*/
}
.drop_menu li {
float:left;
}
.drop_menu li a {
padding:9px 20px;
display:block;
color: black;
text-decoration:none;
font-family: 'Bebas Neue Regular';
font-size: 22px;
}
.drop_menu li a img {
width: 60%;
height: auto;
padding: 0px;
}
/* Submenu */
.drop_menu ul {
position: absolute;
left:-9999px;
top:-9999px;
list-style-type: none;
}
.drop_menu:hover {
display:block;
height: 110px;
}
.drop_menu li:hover {
position:relative;
height: 30px;
}
.drop_menu li:hover ul {
left:70px;
top:50px;
background: white;
padding:0px;
}
.drop_menu li:hover ul li a {
padding:10px;
display:block;
width:168px;
text-indent:15px;
background-color: white;
}
.drop_menu li:hover ul li a:hover {
background: #E6E6E6;
padding: 5px;
}
#media (max-width: 1000px) {
#left {
display: none;
}
}
<div class="nav-bar">
<ul id="left">
<ul class="drop_menu">
<li><img src={{asset('images/hamburger2.png')}}>
<ul>
<li>ABOUT</li>
<li>TESTIMONIALS</li>
<li>REFER-A-FRIEND</li>
<li>CONTACT</li>
</ul>
</li>
</ul>
<li><img src={{asset('images/shine2_logo.png')}}></li>
</ul>
<ul id="right">
<li>REFER FRIENDS</li>
<li><img src={{asset('images/twitter_Icon.png')}}></li>
<li><img src={{asset('images/instagram_Icon.png')}}></li>
<li><img src={{asset('images/facebook_Icon.png')}}></li>
</ul>
</div>
Ive updated your CSS, you had some styles in the wrong place and you were also expanding the height of the menu when you hovered on the first <li>.
I also updated the position of the .drop_menu li:hover ul { to be 100% from the top of the parent <li>.
.clearfix:before,
.clearfix:after{
content: "";
display: table;
clear: both;
}
.clearfix:after {
clear: both;
}
.drop_menu {
background: white;
padding:0;
margin:0;
list-style-type:none;
background: green;
}
.drop_menu > li {
float:left;
position:relative;
}
.drop_menu li a {
padding:9px 20px;
display:block;
color: black;
text-decoration:none;
font-family: 'Bebas Neue Regular';
font-size: 22px;
}
.drop_menu li a img {
width: 60%;
height: auto;
padding: 0px;
}
/* Submenu */
.drop_menu ul {
position: absolute;
left:-9999px;
top:-9999px;
list-style-type: none;
}
.drop_menu:hover {
display:block;
/* height: 110px; */
}
.drop_menu li:hover ul {
left:70px;
top: 100%;
background: white;
padding:0px;
}
.drop_menu li:hover ul li a {
padding:10px;
display:block;
width:168px;
text-indent:15px;
background-color: white;
}
.drop_menu li:hover ul li a:hover {
background: #E6E6E6;
padding: 5px;
}
<ul class="drop_menu clearfix">
<li>hamburger
<ul>
<li>ABOUT</li>
<li>TESTIMONIALS</li>
<li>REFER-A-FRIEND</li>
<li>CONTACT</li>
</ul>
</li>
</ul>