added down arrows

index.html

@@ -11,7 +11,7 @@
 <a class="toggleMenu" href="#">Menu</a>
 <ul class="nav">
 	<li  class="test">
-		<a href="#" class="parent" >Shoes</a>
+		<a href="#">Shoes</a>
 		<ul>
 			<li>
 				<a href="#">Womens</a>
@@ -188,6 +188,9 @@
 			</li>
 		</ul>
 	</li>
+	<li>
+		<a href="#">Shipping Info</a>
+	</li>
 </ul>
 </div>
 

script.js

@@ -1,5 +1,11 @@
 var adjustMenu = function() {
 
+	$(".nav li  a").each(function() {
+		if ($(this).next().length > 0) {
+			$(this).addClass("parent");
+		};
+	})
+
 	$(".toggleMenu").click(function(e) {
 		// can't use toggle because we don't know original state
 		e.preventDefault();

style.css

@@ -35,18 +35,22 @@ a {text-decoration: none;}
 }
 .nav > li {
     position: relative;
-    background: #175e4c;
     float: left;
     border-top: 1px solid #104336;
 }
+.nav > li > .parent {
+    background-image: url("images/downArrow.png");
+    background-repeat: no-repeat;
+    background-position: right;
+}
 .nav > li > a {
     display: block;
 }
 .nav > li > ul {
     position: absolute;
     left: -9999px;
-
 }
+
 .nav > li.hover > ul {
     left: 0;
 }
@@ -79,6 +83,14 @@ a {text-decoration: none;}
     .nav > li {
         float: none;
     }
+    .nav > li > .parent {
+        background-position: 95% 50%;
+    }
+    .nav li li .parent {
+        background-image: url("images/downArrow.png");
+        background-repeat: no-repeat;
+        background-position: 95% 50%;
+    }
     .nav ul {
         display: block;
         width: 100%;