List items to be same width with background image

Question

Any suggestions for this one?

I've added a background image of an arrow for any list item that has a drop down with the class of 'dropable' now because of this the list items are no longer evenly spaced to account for the added arrow, any suggestion on how to solve this as had no success so far.

CodePen: http://codepen.io/nickelse/pen/GJezQX?editors=110

HTML:

<div class="wrapper">
  <div class="container">
    <nav>
      <ul class="clearfix">
        <li><a href="#">Home</a></li>
        <li class="dropable"><a href="#">WordPress</a>
          <!-- First Tier Drop Down -->
          <ul>
            <li><a href="#">Themes</a></li>
            <li><a href="#">Plugins</a></li>
            <li><a href="#">Tutorials</a></li>
          </ul>        
        </li>
        <li class="dropable"><a href="#">Web Design</a>
          <!-- First Tier Drop Down -->
          <ul>
            <li><a href="#">Resources</a></li>
            <li><a href="#">Links</a></li>
            <li><a href="#">Tutorials</a></li>
          </ul>
        </li>
        <li><a href="#">Graphic Design</a></li>
        <li><a href="#">Inspiration</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </nav>
  </div>
</div>

CSS:

/* CSS Document */

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import url(http://fonts.googleapis.com/css?family=Bree+Serif);

body {
    background: #212121;
    font-family: 'Open Sans', sans-serif;
  margin: 0;
}

.wrapper {
  background: #454545;
  border-bottom: 3px solid #666;
  width: 100%;
}

.container {
    margin: 0 auto;
    width: 1000px;
}

nav { 
    margin: 0;
  font-size: 0;
  text-align: center;
}

nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
}

nav ul li {
    margin: 0px;
    display: inline-block;
}

nav a {
    display: block;
    padding: 0 20px;    
    color: #fff;
    font-size: 14px;
    line-height: 56px;
    text-decoration: none;
}

nav a:hover { 
    background-color: #000000; 
}

nav > ul > li {
    background: url(http://i.imgur.com/ijNENpN.png) no-repeat left 50%;     
}

nav > ul > li:first-child {
  background: none;
}

nav li:hover + li {
    background-image: none;
}

nav > ul > li:hover > a {
  background-color: #666;
}

nav ul li:hover > ul {
    display: block;
  text-align: left;
}

nav ul ul {
    display: none;
    position: absolute; 
    top: 56px;
  background-color: #666;
}

nav ul ul li {
  border-top: 1px solid #454545;
    width: 270px;
    float: none;
    display: list-item;
    position: relative;
}

nav ul ul li:first-child {
  border-top: none;
}

nav ul ul li a {
  line-height: 42px;
}

nav li.dropable a {
  background: url(http://i.imgur.com/5Clqhz5.png) no-repeat 93% center; 
}

nav li.dropable li a {
  background-image: none;
}

nav li.dropable li a:hover {
  background: #333;
}

/*
li > a:after { content:  ' +'; }
li > a:only-child:after { content: ''; }
*/

Cheers

Nick

Answer 1

Instead of using images for caret, I would suggest using fonts from font-awesome.

This works pretty good

/* CSS Document */

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import url(http://fonts.googleapis.com/css?family=Bree+Serif);

body {
	background: #212121;
	font-family: 'Open Sans', sans-serif;
  margin: 0;
}

.wrapper {
  background: #454545;
  border-bottom: 3px solid #666;
  width: 100%;
}

.container {
	margin: 0 auto;
	width: 1000px;
}

nav { 
	margin: 0;
  font-size: 0;
  text-align: center;
}

nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
	position: relative;
}
	
nav ul li {
	margin: 0px;
	display: inline-block;
}

nav a {
	display: block;
	padding: 0 20px;	
	color: #fff;
	font-size: 14px;
	line-height: 56px;
	text-decoration: none;
}

nav a:hover { 
	background-color: #000000; 
}

nav > ul > li {
	background: url(http://i.imgur.com/ijNENpN.png) no-repeat left 50%; 	
}

nav > ul > li:first-child {
  background: none;
}

nav li:hover + li {
 	background-image: none;
}

nav > ul > li:hover > a {
  background-color: #666;
}
	
nav ul li:hover > ul {
	display: block;
  text-align: left;
}

nav ul ul {
	display: none;
	position: absolute; 
	top: 56px;
  background-color: #666;
}

nav ul ul li {
  border-top: 1px solid #454545;
	width: 270px;
	float: none;
	display: list-item;
	position: relative;
}

nav ul ul li:first-child {
  border-top: none;
}

nav ul ul li a {
  line-height: 42px;
}

nav ul > li.dropable > a:after {
/*  display:inline;
  content: "\00a0\00a0\00a0\00a0";*/
/*  background:url(http://i.imgur.com/5Clqhz5.png) no-repeat center center;*/
}

nav li.dropable li a {
  background-image: none;
}

nav li.dropable li a:hover {
  background: #333;
}

/*
li > a:after { content:  ' +'; }
li > a:only-child:after { content: ''; }
*/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="wrapper">
  <div class="container">
    <nav>
      <ul class="clearfix">
        <li><a href="#">Home</a></li>
        <li class="dropable"><a href="#">WordPress&nbsp;&nbsp;<i class="fa fa-caret-down"></i></a>
          <!-- First Tier Drop Down -->
          <ul>
            <li><a href="#">Themes</a></li>
            <li><a href="#">Plugins</a></li>
            <li><a href="#">Tutorials</a></li>
          </ul>        
        </li>
        <li class="dropable"><a href="#">Web Design&nbsp;&nbsp;<i class="fa fa-caret-down"></i></a>
          <!-- First Tier Drop Down -->
          <ul>
            <li><a href="#">Resources</a></li>
            <li><a href="#">Links</a></li>
            <li><a href="#">Tutorials</a></li>
          </ul>
        </li>
        <li><a href="#">Graphic Design</a></li>
        <li><a href="#">Inspiration</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </nav>
  </div>
</div>

Answer 2

Figured it out, cheers anyway.

I did this:

nav li.dropable a {
  background: url(http://i.imgur.com/5Clqhz5.png) no-repeat right 20px center ;
  padding-right: 34px;
}

Answer 3

I would take advantage of the :after pseudo class in CSS. The margins become evenly spaced and you forgo having to put the image into the navigation unnecessarily.

CodePen

nav ul > li.dropable > a:after {
  display:inline;
  content: "\00a0\00a0\00a0\00a0";
  background:url(http://i.imgur.com/5Clqhz5.png) no-repeat center center;
}