导航中的下拉框未对齐

时间:2014-05-12 12:37:50

标签: css css3 drop-down-menu

我需要一些帮助。在#34; gallery"下的导航菜单上的下拉菜单没有在单词库下对齐看到live site:lofthairstudio.ie。

任何人都可以看到我出错的地方 - 我希望画廊的下拉内容显示在菜单上的字库下,而不是它的样式。

提前谢谢 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;上:100%;左:0; z-index:99;不透明度:0;   能见度:隐藏;过渡:所有.2s轻松进出;保证金:10px 0 0   0; _margin:0; / 仅限IE6 /

}
.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 - "]:{font-family:' FontAwesome&#39 ;; 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 个答案:

答案 0 :(得分:1)

在您的类.sub-menu for element中,删除left:0属性。它迫使ul元素向左侧。同时删除前100%和边距:10px 0 0 0属性。他们在这里毫无用处。 :)希望有所帮助