0

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; }

1 Answer 1

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

Sign up to request clarification or add additional context in comments.

2 Comments

so shopuld it look like this: .dropdown-menu ul {position: absolute; nowhitespace: afterproperty; nowhitespace: afterproperty; nowhitespace: afterproperty; z-index: 99; opacity: 0; visibility: hidden; transition: all .2s ease-in-out; _margin: 0; /*IE6 only*/ }
After reading over 10 questions and answers you finally helped me. There was some "left: 0" forcing it to the left. Thanks a lot.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.