需要中心导航菜单

时间:2014-05-08 12:19:42

标签: css drop-down-menu menu navigation

希望获得导航菜单上的帮助。请在lofthairstudio.ie查看 它的工作正常,但希望它集中在页面中间。尝试了一些事情,但它不会动。 float:right是唯一一个移动栏的人,但显然我希望它居中。

.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*/ 
 text-align: center;
}
.dropdown-menu > li { float: left; display: block;text-align: center; }
.dropdown-menu li:hover > ul { opacity: 1; visibility: visible; margin: 0; }
.dropdown-menu a { display: block; 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 {  float: left; 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: left; position: relative; }
.nav-menu li.dropdown a { padding-right: 30px }
.nav-menu > li > a {border-right: 1px 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: #E4DDC8; width: 190px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); }
.nav-menu ul li { float: none; display: block; 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:

1 个答案:

答案 0 :(得分:1)

.nav-menu li{ float:none; display:inline-block; }