dropdown box on navigation not aligning

Question

i need some help again. the dropdown on my navigation menu under "gallery" is not aligned under the word gallery see live site: lofthairstudio.ie.

can anyone see where im going wrong - im looking to have the dropdown content for gallery appear right under the word gallery on the menu instead of the way it is.

thanks in advance gus

/* Main Navigation
----------------------------------------------------------- */
/*core styles*/
.dropdown-menu {text-align: center; margin: 0; padding: 0; list-style: none;}
.dropdown-menu li { position: relative text-align: center;}
.dropdown-menu ul {position: absolute; nowhitespace: afterproperty; nowhitespace: afterproperty; nowhitespace:

afterproperty; top: 100%; left: 0; z-index: 99; opacity: 0; visibility: hidden; transition: all .2s ease-in-out; margin: 10px 0 0 0; _margin: 0; /IE6 only/

}
.dropdown-menu > li { display:inline; text-align: center; }
.dropdown-menu li:hover > ul { opacity: 1; visibility: visible; margin: 0; }
.dropdown-menu a { display: inline; text-align: center; position: relative; font-family: 'MyWebFont';}
.dropdown-menu ul ul { top: 0; left: 100%;}
.dropdown-menu > li ul { min-width: 150px }
.dropdown-menu ul ul li { width: 100% }

/* position arrows */
.nav-menu .icon-angle-down { position: absolute; right: 13px; top: 50%; font-size: 12px; margin-top: -6px; }
.nav-menu .icon-angle-right { position: absolute; right: 20px; top: 50%; font-size: 12px; margin-top: -6px; }
/*styling*/
.nav-toggle { display: none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; 

-moz-user-select: none; -ms-user-select: none; user-select: none; }
#navbar {background: #E4DDC8; border-bottom: 2px solid #FFF; border-top: 2px solid #FFF;  position: relative; 

margin-bottom: 10px;  }

.nav-menu { border-right: 0px solid rgba(0,0,0,1);  

}
.nav-menu a { font-size: 20px; height: 50px; line-height: 50px; color:#000; padding: 0 8px; text-decoration: none; 

font-weight: 700; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
.nav-menu li { float: none; display:inline-block; }
.nav-menu li.dropdown a { padding-right: 30px }
.nav-menu > li > a {border-right: 0px solid #000; border-left: 0px solid rgba(0,0,0,1); margin-top: 5px; margin-bottom:5px;}
.nav-menu > li:first-child { border-left: none }
.nav-menu li:first-child > a, .dropdown-menu li:first-child > a:hover { border-left: none }
.nav-menu > li > a:hover, .nav-menu > .current-menu-item > a, .navigation .current-menu-parent > a, .navigation 

.current-menu-parent > a:hover, .nav-menu > .current-menu-item > a:hover { color: #000; background: #E4DDC8;}

/*drop-down styles*/
.nav-menu ul { margin: 0; background-color: #E4DDC8; width: 190px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); }
.nav-menu ul li { float: none; display: inline; border-left: none; border-right: none; margin: 0; }
.nav-menu ul li:first-child { border-top: 0 }
.nav-menu ul li:last-child { border-bottom: 0 }
.nav-menu a { display: block; position: relative; text-align: center; }
.nav-menu .sub-menu li.current_page_item > a { color: #fff; background-color: #E4DDC8; }
.nav-menu ul a { display: block; padding: 10px; }
.nav-menu ul li { border-bottom: 0px solid rgba(255,255,255, 0.1); border-top: 0px solid rgba(0,0,0,1); }
.nav-menu ul a { color: #000; padding: 17px 15px; height: auto; text-align:left; margin: 0px; border: 0px; line-height: 

1em; font-size: 25px;  text-shadow: none; }
.nav-menu ul li > a:hover { color: #000; background-color: #E4DDC8; background-image: none; border-color: transparent; }
/*nav icons*/
.nav-menu li[class^="icon-"], .nav-menu li[class*=" icon-"] { font-family: font-family: "Big Caslon", "Book Antiqua", "Palatino

Linotype", Georgia, serif;} .nav-menu li[class^="icon-"] > a, .nav-menu li[class*=" icon-"] > a { padding-left: 40px } .nav-menu li[class^="icon-"]:before, .nav-menu li[class*=" icon-"]:before { font-family: 'FontAwesome'; font-size: 14px;

line-height: 14px; height: 14px; width: 14px; text-align: center; color: #fff; position: absolute; left: 16px; top: 50%; 

margin-top: -8px; z-index: 999; }

Answer 1

In your class .sub-menu for element, remove the left:0 property. It is forcing the the ul element to left side. Also remove top 100% and margin: 10px 0 0 0 properties. They are useless here. :) Hope that helps