Develop Reference

How do I add a div to a parent element in a navigation menu?

I have a navigation menu with class name: "custom-menu-class". It's in Wordpress.
I want to make an active class meaning that when a link is active (url matches), and/or mouse hovers a link, a div is inserted in the parent element (a white circle on top of the text).
enter image description here
Playing around with inspect element, I found that adding:
<div style="
border: 6px solid white;
border-radius: 50px;
width: 12px;
position: absolute;
top: -15%;
left: 33%;
">
</div>
to the parent element gives me what I need.
I also need it for the active menu item only.
Can someone help me? Trying to achieve this:
enter image description here

I wouldn't insert a div — I would use the ::before pseudo-element. Read more on that here.
If you are using a WordPress menu wp_nav_menu(), WP will automatically add .current-menu-item to the current menu item li — meaning if you are at www.example.com/contact — the contact menu item will be given the .current-menu-item class. Here's a screenshot of the markup:
For any hovering styling you would just use :hover — read more here
Using the Twenty Twenty theme's menu markup, here is what I would do — I added in bootstrap just for demo purposes.
/* For demo purposes */
ul {
background-color: #999;
list-style: none;
padding-bottom: 20px;
padding-top: 20px;
}
ul li a {
color: #fff;
}
ul li a:hover {
color: #fff;
text-decoration: none;
}
/* Start custom styles */
ul li {
position: relative;
}
ul li.current-menu-item a::before,
ul li a:hover::before {
background-color: #fff;
border-radius: 100%;
content: ' ';
display: block;
height: 10px;
left: 50%;
position: absolute;
top: -10px;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
width: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="primary-menu-wrapper" aria-label="Horizontal" role="navigation">
<ul class="primary-menu reset-list-style row">
<li id="menu-item-90" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-90 col-auto">
Home
</li>
<li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75 col-auto">
Exhibitions
</li>
<li id="menu-item-73"
class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-69 current_page_item menu-item-has-children menu-item-73 col-auto">
About Us
</li>
<li id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-74 col-auto">
News
</li>
</ul>
</nav>

This worked
/* For demo purposes */
ul {
background-color: #999;
list-style: none;
padding-bottom: 20px;
padding-top: 20px;
}
ul li a {
color: #fff;
}
ul li a:hover {
color: #fff;
text-decoration: none;
}
/* Start custom styles */
ul li {
position: relative;
}
ul li.current-menu-item a::before,
ul li a:hover::before {
background-color: #fff;
border-radius: 100%;
content: ' ';
display: block;
height: 10px;
left: 50%;
position: absolute;
top: -10px;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
width: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="primary-menu-wrapper" aria-label="Horizontal" role="navigation">
<ul class="primary-menu reset-list-style row">
<li id="menu-item-90" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-90 col-auto">
Home
</li>
<li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75 col-auto">
Exhibitions
</li>
<li id="menu-item-73"
class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-69 current_page_item menu-item-has-children menu-item-73 col-auto">
About Us
</li>
<li id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-74 col-auto">
News
</li>
</ul>
</nav>

exactly what you expected. i have written small js function to toggle between active class.
var btns = document.querySelectorAll(".menu-box li a");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function(e) {
for (var j = 0; j < btns.length; j++) {
btns[j].classList.remove('active')
}
e.target.classList.add('active')
});
}
* {
margin: 0;
padding: 0
}
.menu-container {
width: 100%;
background: red;
}
.menu-box {
display: flex;
justify-content: space-evenly;
padding: 15px
}
.menu-box li {
text-decoration: none;
list-style-type: none;
}
.menu-box li a {
text-decoration: none;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
}
.menu-box li a:hover:before {
opacity: 1;
}
.menu-box li a.active:before {
opacity: 1;
}
.menu-box li a:before {
opacity: 0;
content: '';
display: inline-block;
width: 11px;
height: 11px;
-moz-border-radius: 7.5px;
-webkit-border-radius: 7.5px;
border-radius: 7.5px;
background-color: #fff;
margin: 0 auto;
transition: .3s
}
<nav class="menu-container">
<ul class="menu-box">
<li><a class="active" href="#home">Home</a></li>
<li>Emisione</li>
<li>Blog</li>
<li>About us</li>
</ul>
</nav>

How to create dropdown under a dropdown menu

I want to have a dropdown menu that can keep dropping down but instead of going down, dropping to the right like this pic
I know how to create a dropdown menu that goes below only like this pic
My current HTML code :
<div class="nav navbar-fixed-top">
<ul>
<li class="home">Home</li>
<li class="tutorials">Consumer Management
<ul>
<li class="tuto2">www.e-homes.com.my</li>
<ul>
<li>hehe</li>
</ul>
</ul>
</li>
My current CSS style :
.nav li {
font-size: 1.2em;
text-align: left;
width: 220px;
line-height: 60px;
font-size: 1.4em;
display: inline-block;
margin-right: -7px;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav li li {
font-size: .8em;
}
#media screen and (min-width: 650px) {
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
Does anyone know the CCS style to enable it going to the right?

You can simply do it like this:
.outer {display: inline-flex; flex-direction: column}
.tutorials > ul, .tuto2 > ul {display: none}
.tutorials:hover > ul, .tuto2:hover > ul {display: inline-block}
<ul class="outer">
<li class="home">Home</li>
<li class="tutorials">Consumer Management
<ul>
<li class="tuto2">www.e-homes.com.my
<ul>
<li>hehe</li>
</ul>
</li>
</ul>
</li>
</ul>

I hope the below helps.
* {
box-sizing: border-box;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
padding: 1rem;
position: relative;
max-width: 200px;
width: 200px;
}
li:not(:last-child) {
border-bottom: thin solid white;
}
li>a {
color: white;
}
.main>li {
background-color: blue;
}
.sub>li {
background-color: red;
}
.subsub>li {
background-color: green;
}
.sub,
.subsub {
display: none;
}
.main>li:hover>.sub,
.sub>li:hover>.subsub {
display: inline-block;
position: absolute;
top: 0;
right: -200px;
}
<div class="nav">
<ul class="main">
<li class="home">Home</li>
<li class="tutorials">Consumer Management
<ul class="sub">
<li class="tuto2">www.e-homes.com.my
<ul class="subsub">
<li>hehe</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

html code
<div class="container">
<h2>Multi-Level Dropdowns</h2>
<p>In this example, we have created a .dropdown-submenu class for multi-level dropdowns (see style section above).</p>
<p>Note that we have added jQuery to open the multi-level dropdown on click (see script section below).</p>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">HTML</a></li>
<li><a tabindex="-1" href="#">CSS</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li class="dropdown-submenu">
<a class="test" href="#">Another dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>3rd level dropdown</li>
<li>3rd level dropdown</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
css code
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
jquery
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
if you have doubt for creatring drop down link you may Refer this link https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_dropdown_multilevel_css&stacked=h

Media query not working at 798px BUT will work on 1786px?

Okay I have what seems to be a simple problem. I have a media query that changes the nav from burger to expanded version in 768px. However it doesn't work.
As in: it should apply burger nav when it is less then 768px and then expand accordingly.
Any ideas what is happening, I THINK its a small mistake I can't seem to catch
/* NAVIGATION ON CLICK */
// Primary menu drop down (mobile)
$(".dropdown-toggle").click(function() {
$(this).parent().find(".sub-menu:first").toggleClass("toggle-on");
});
/* NAVIGATION ON HOVER */
// Sub menu drop down
$(".main-navigation ul li.menu-item-has-children").hover(function() {
$(this).find(".sub-menu:first").toggleClass("toggle-on");
});
$(".primary-toggle").click(function() {
$(" .main-navigation ul:first").toggleClass("toggle-on");
});
// $(".main-navigation li.menu-item-has-children").mouseleave(function() {
// $(".sub-menu").removeClass("toggle-on");
// });
/*
# HEADER
*/
*,
html {
margin: 0;
font-size: 36px;
}
.site-header {
background-color: black;
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
/* Burger Nav Styling */
#sidebar-btn {
vertical-align: middle;
width: 40px;
height: 25px;
cursor: pointer;
margin: 10px;
position: relative;
top: 4px;
}
#sidebar-btn span {
height: 2px;
background: black;
margin-bottom: 5px;
display: block;
}
#sidebar-btn span:nth-child(2) {
width: 75%;
}
#sidebar-btn span:nth-child(3) {
width: 50%;
}
/* Main Menu */
.main-navigation {
padding: 2rem;
}
/*.main-navigation .menu {
display: none;
padding: 1rem;
} */
.menu-test-container {
position: absolute;
top: 264px;
left: 0;
width: 100%;
}
.main-navigation .menu.toggle-on {
display: block;
}
.main-navigation ul li {
min-width: 80px;
}
.main-navigation ul {
display: none;
padding: 1rem;
position: relative;
/* display: flex;
flex-direction: column;*/
background-color: yellow;
}
.main-navigation ul li a {
color: #fff;
text-decoration: none;
}
/* SUB Menu styles */
.sub-menu.toggle-on {
display: block;
}
.main-navigation ul,
.main-navigation ul ul,
.main-navigation ul ul ul {
list-style: none;
position: relative;
display: none;
}
/* Positioning x y of EACH sub menus */
.main-navigation ul ul {
background-color: pink;
}
.main-navigation ul ul ul {
left: 150px;
top: 0;
background-color: blue;
}
.main-navigation ul ul ul ul {
background-color: green;
top: 20px;
left: 0;
}
.main-navigation ul ul ul ul ul {
background-color: black;
top: 0px;
left: 200px;
}
.main-navigation ul ul ul ul ul ul {
background-color: silver;
top: 0px;
left: 200px;
}
/* TABLET MENU */
#media screen and (min-width: 768px) {
#sidebar-btn {
display: none;
}
.primary-toggle {
display: none;
}
.main-navigation ul {
display: flex;
flex-direction: row;
background-color: blue;
}
.menu-test-container {
display: block;
position: relative;
top: 0;
}
}
<html>
<header id="masthead" class="site-header">
<div class="site-branding">
<div class="site-branding-text">
<p class="site-title">LOGO</p>
</div>
</div>
<!-- .site-branding -->
<nav id="site-navigation" class="main-navigation">
<button class="primary-toggle" aria-expanded="false">
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</button>
<div class="menu-test-container">
<ul id="primary-menu" class="menu" aria-expanded="true">
<li id="menu-item-2035" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2035">
Services
<button class="dropdown-toggle" aria-expanded="false">
<span class="dropdown-symbol">+</span>
</button>
<ul class="sub-menu">
<li id="menu-item-2076" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2076">
Commercial
<button class="dropdown-toggle toggled-on" aria-expanded="true">
<span class="dropdown-symbol">-</span>
</button>
<ul class="sub-menu">
<li id="menu-item-2082" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2082">
Rural
<button class="dropdown-toggle toggled-on" aria-expanded="true">
<span class="dropdown-symbol">-</span>
</button>
<ul class="sub-menu">
<li id="menu-item-2081" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2081">
Electrical
<button class="dropdown-toggle" aria-expanded="false">
<span class="dropdown-symbol">+</span>
</button>
<ul class="sub-menu">
<li id="menu-item-2079" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2079">
Residential
<button class="dropdown-toggle" aria-expanded="false">
<span class="dropdown-symbol">+</span>
</button>
<ul class="sub-menu">
<li id="menu-item-2083" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2083">News Updates</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li id="menu-item-2084" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2084">
Projects
</li>
<li id="menu-item-2045" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2045">
Blog
<button class="dropdown-toggle" aria-expanded="false">
<span class="dropdown-symbol">+</span>
</button>
<ul class="sub-menu">
<li id="menu-item-2078" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2078">
About
<button class="dropdown-toggle" aria-expanded="false">
<span class="dropdown-symbol">+</span>
</button>
<ul class="sub-menu">
<li id="menu-item-2099" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2099">
News Updates
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<!-- #site-navigation -->
<link rel="stylesheet" type="text/css" href="style.css">
</header>
<body>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>

Okay, I figured it out. Thought I'll post it here so I can close the question.
Answer: View port tag missing! Make sure you have the following in the html head tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">

#Shaz if you want to change your menu in smaller screens you should change your media query to
#media screen and (max-width: 1024px) {
/*
Code Here
*/
}
#media screen and (max-width: 768px) {
/*
Code Here
*/
}

What you have doe is right. just replace min-width with max-width.
for more details refer: here
use min-width when writing media queries from mobile to desktop screens.
use max-width when writing media queries from desktop to mobile screens.

Pure css dropdown menu's submenu with scroller not showing the multidropdown menu

I am using the pure css dropdown menu in one of my project. The submenu contains the multiple lists just like in the snippet:
/*Set the parent <li>’s CSS position property to ‘relative’.*/
ul {
list-style: none;
padding: 0;
margin: 0;
background: #ce4040;
border: 1px solid #e08d8d;
}
ul>li {
border-left: 1px solid #e08d8d;
}
ul li {
display: block;
position: relative;
float: left;
background: #ce4040;
border-bottom: 1px solid #e08d8d;
}
/*The CSS to hide the sub menus.
*/
li ul {
display: none;
}
ul li a {
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: #fff;
}
ul li a:hover {
background: #ce4040;
}
/*Displays the dropdown menu on hover.*/
li:hover > ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
}
li:hover a {
background: #ce4040;
}
li:hover li a:hover {
background: #962e2e;
color: #fff;
}
.main-navigation li ul li {
border-top: 0;
}
/*Displays second level dropdown menus to the right of the first level dropdown menu.*/
ul ul ul {
left: 100%;
top: 0;
}
/*Simple clearfix.*/
ul:before,
ul:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
ul:after {
clear: both;
}
<ul class="main-navigation">
<li>Home
</li>
<li>Front End Design
<ul>
<li>HTML
</li>
<li>CSS
<ul>
<li>Resets
</li>
<li>Grids
</li>
<li>Frameworks
<ul>
<li>Bootstrap
</li>
<li>Foundation
</li>
<li>Sass
</li>
<li>Less
<ul>
<li>Bootstrap
</li>
<li>Foundation
</li>
<li>Sass
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>JavaScript
<ul>
<li>Ajax
</li>
<li>jQuery
</li>
</ul>
</li>
</ul>
</li>
<li>WordPress Development
<ul>
<li>Custom Post Types
<ul>
<li>subPortfolios
</li>
<li>subTestimonials
</li>
<li>subPortfolios
</li>
<li>subTestimonials
</li>
</ul>
</li>
<li>Themes
</li>
<li>Plugins
</li>
<li>Themes
</li>
<li>Plugins
</li>
<li>Themes
</li>
<li>Plugins
</li>
<li>Options
</li>
<li>Options
</li>
<li>Themes
</li>
<li>Plugins
</li>
<li>Options
</li>
<li>Options
</li>
</ul>
</li>
<li>About Us
</li>
</ul>
And tried to place scroller like this by additon of css:
li:hover > ul {
display: block;
position: absolute;
max-height:250px;
overflow-y:auto;
}
The result:
/*Set the parent <li>’s CSS position property to ‘relative’.*/
ul {
list-style: none;
padding: 0;
margin: 0;
background: #ce4040;
border:1px solid #e08d8d;
}
ul>li{
border-left:1px solid #e08d8d;
}
ul li {
display: block;
position: relative;
float: left;
background: #ce4040;
border-bottom:1px solid #e08d8d;
}
/*The CSS to hide the sub menus.
*/
li ul { display: none; }
ul li a {
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: #fff;
}
ul li a:hover { background: #ce4040; }
/*Displays the dropdown menu on hover.*/
li:hover > ul {
display: block;
position: absolute;
max-height:250px;
overflow-y:auto;
}
li:hover li { float: none; }
li:hover a { background: #ce4040; }
li:hover li a:hover { background: #962e2e; color:#fff;}
.main-navigation li ul li { border-top: 0; }
/*Displays second level dropdown menus to the right of the first level dropdown menu.*/
ul ul ul {
z-index: 9999;
}
/*Simple clearfix.*/
ul:before,
ul:after {
content: " "; /* 1 */
display: table; /* 2 */
}
ul:after { clear: both; }
<ul class="main-navigation">
<li>Home</li>
<li>Front End Design
<ul>
<li>HTML</li>
<li>CSS
<ul>
<li>Resets</li>
<li>Grids</li>
<li>Frameworks
<ul>
<li>Bootstrap</li>
<li>Foundation</li>
<li>Sass</li>
<li>Less
<ul>
<li>Bootstrap</li>
<li>Foundation</li>
<li>Sass</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>JavaScript
<ul>
<li>Ajax</li>
<li>jQuery</li>
</ul>
</li>
</ul>
</li>
<li>WordPress Development
<ul>
<li>Custom Post Types
<ul>
<li>subPortfolios</li>
<li>subTestimonials</li>
<li>subPortfolios</li>
<li>subTestimonials</li>
</ul>
</li>
<li>Themes</li>
<li>Plugins</li>
<li>Themes</li>
<li>Plugins</li>
<li>Themes</li>
<li>Plugins</li>
<li>Options</li>
<li>Options</li> <li>Themes</li>
<li>Plugins</li>
<li>Options</li>
<li>Options</li>
</ul>
</li>
<li>About Us</li>
</ul>
By placing scroller, the second and third level dropdown menu isnot showing. How can I placescroller without not interrupting the normal functionality of the pure multidowndown css? Any suggestions, tutorials and solutions are highly welcomed as long it leads to solution.

Please change your css
ul ul ul {
left: 100%;
top: 0;
}
to
ul ul ul {
z-index: 9999;
}
I hope it will help you..

css + html menu hitbox

I wrote some code using different internet sources. I ran into a problem -
every object that's in the bottom part of the menu cannot be interacted with.
The menu interferes with everything below where the dropdown falls.
<style>
body {
padding: 0;
margin: 0;
font-family: Arial;
font-size: 23px;
}
#nav {
background-color:1a1a1a;
opacity: 0.9;
}
#nav_wrapper {
width: 960px;
margin: 0 auto;
text-align: right;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 200px;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #333;
}
#nav ul li a, visited {
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #333;
border: 0px solid #222;
border-top: 0;
margin-left: -5px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: #699;
}
.left-to-right {
text-align: left;
}
</style>
<html lang="he">
<body dir-"rtl"><div id="nav">
<div id="nav_wrapper">
<div>
<ul <ul dir="RTL">
<li> תרמילים
<ul class="left-to-right">
<!-- <li class="backpacks" id="firstlight-20l"> FirstLight 20L </li>
<li class="backpacks" id="firstlight-30l"> FirstLight 30L </li>
<li class="backpacks" id="firstlight-40l"> FirstLight 40L </li>-->
<li class="backpacks"> rotation180° Professional 38L Deluxe </li>
<li class="backpacks"> rotation180° Horizon 34L </li>
<li class="backpacks"> rotation180° Panorama 22L </li>
<!-- <li class="backpacks" id="rotation180-travel-away"> rotation180° Travel Away 22L </li>-->
<li class="backpacks" id="rotation180-trail"> rotation180° Trail 16L </li>
</ul>
</li>
<li> תיקי מצלמות ספורט
<ul class="left-to-right">
<li>GP 1 kit case
</li>
<li>GP 2 kit case
</li>
</ul>
</li>
<li> אביזרים
<ul class="left-to-right">
<li>r180º Panorama/Horizon Photo Insert
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>

#nav_wrapper ul ul li{ text-align:left;}
you need to add this only: demo

You might be able to use vertical-align for the list elements & text-align for the links.

Just add a class to the <ul> tag of each dropdown and add text-align: left to it.
FIDDLE Here