css - 将导航栏居中并防止当前项目不同的@font-face 覆盖#navigation 容器边框

Question

这是一个由两部分组成的问题......我目前正在尝试让导航栏在我客户的疯狂参数中正常工作。

在 style.css 中：

.fl{float: left;}

/* 2.2 Navigation */
#navigation {
  position: relative;
  clear: both; margin-bottom: 3em; display: none;
  font:14px/14px sans-serif;
  border: 1px solid #d9d9d9;
  background: #ffffff;
  background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));
  background: -webkit-linear-gradient(#ffffff, #f5f5f5);
  background: -moz-linear-gradient(center top, #ffffff 0%, #f5f5f5 100%);
  background: -moz-gradient(center top, #ffffff 0%, #f5f5f5 100%);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.03);
  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.03);
  -moz-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.03);
  border-radius: 5px;
 -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
#navigation ul.rss { float: none; position: absolute; top: 10px; right: 9px; }
#navigation ul.rss li { display: block; margin: 0 0 10px 0; padding: 0; font-size: 1em; }
#navigation ul.rss li a { color: #555555; text-decoration: none; padding: 0; display: inline-block; position: relative; }
#navigation ul.rss li a:hover { color: #222; } 
ul.nav li a { padding: .5em 1em; display: block; color: #666; }
ul.nav li a:hover  { color: #222; }
ul.nav li.current_page_item a,
ul.nav li.current_page_parent a,
ul.nav li.current-menu-ancestor a,
ul.nav li.current-cat a,
ul.nav li.current-menu-item a { background: #ffffff; color: #3088ff; }
ul.nav li ul li a  { background: none!important; color: #666!important; }
ul.nav ul li.current_page_item a,
ul.nav ul li.current_page_parent a,
ul.nav ul li.current-menu-ancestor a,
ul.nav ul li.current-cat a,
ul.nav ul li.current-menu-item a  { color: #3088ff!important; }
#header .nav-toggle  { text-align: center; display: block; margin: 2.5em 0 0; padding: 0.4em 1em; font-size: 1em; background: #999; border-radius: 3px; }
#header .nav-toggle a  { color: #fff; }
#header .nav-toggle a:hover  { color: #ccc; text-decoration: none; }
#top select { margin: 1.618em 0 0; width:100%; }
#top #top-nav { display: none; }

在 layout.css 中

    #navigation { display: block !important; }
    #navigation ul li:first-child, #navigation ul li:first-child a  { border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; }
    #navigation ul ul li:first-child, #navigation ul ul li:first-child a  { border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; }
    #navigation ul.nav > li { border-right: 1px solid #e6e6e6; }
    #navigation ul.nav > li a:hover { background: #f6f6f6; }
    #navigation ul.nav > li:hover { background: #f6f6f6; }
    #navigation ul.nav ul { background: #f6f6f6; border: 1px solid #e6e6e6; left: -1px; }
    #navigation ul.nav ul ul { top: -1px; left: 100%; }
    #top .nav li.parent > a { position: relative; padding-right: 2em; }
    #top .nav li.parent > a:after { content: ""; display: block; border: .3em solid #ccc; border-color: #ccc transparent transparent transparent; position: absolute; top: 48%; right: .8751em; }
    #navigation .nav li ul li.parent a { padding-right: 0; }
    #navigation .nav li ul li.parent a:after { border-color: transparent transparent transparent #ccc; right: 0; top: 46%; }
    #navigation .nav li.parent > a { position: relative; padding-right: 2em; }
    #navigation .nav li.parent > a:after { content: ""; display: block; border: 0.3em solid #ccc; border-color: #ccc transparent transparent transparent; position: absolute; top: 48%; right: .8751em; }
    #navigation .nav li ul li.parent a { padding-right: 0; }
    #navigation .nav li ul li.parent a:after { border-color: transparent transparent transparent #ccc; right: 0.8751em; top: 46%; }
    #header h3.nav-toggle { display: none; }

在 custom.css 中：

#navigation { width: 70%; margin: -70px auto 70px auto; }
#navigation ul.nav li.current_page_item a, #navigation ul.nav li.current_page_parent a, #navigation ul.nav li.current-menu-ancestor a, #navigation ul.nav li.current-cat a, #navigation ul.nav li.current-menu-item a { font-family: "LaPorteniadelaBocaRegular",serif; text-transform: capitalize; font-size: 16px; margin: -3px 0; }
#navigation ul.nav li.current_page_item a, #navigation ul.nav li.current_page_parent a, #navigation ul.nav li.current-menu-ancestor a, #navigation ul.nav li.current-cat a, #navigation ul.nav li.current-menu-item a { font-family: "LaPorteniadelaBocaRegular",serif; text-transform: capitalize; font-size: 16px; margin: -3px 0; }

页面本身的一部分（由 WooTheme 的 Canvas 主题添加）：

ul.nav li a, #navigation ul.rss a { font:bold 14px/1em 'Josefin Sans', arial, sans-serif;color:#FFFFFF; }
#navigation ul.nav > li a:hover, #navigation ul.nav > li:hover, #navigation ul.nav li ul {background-color:#70c8c6!important}
#navigation ul.nav li ul  { border: 1px solid #FFFFFF; }
#navigation ul.nav > li  { border-right: 0px solid #dbdbdb; }#navigation ul.nav > li > ul  { left: 0; }
#navigation ul.nav li.current_page_item a, #navigation ul.nav li.current_page_parent a, #navigation ul.nav li.current-menu-ancestor a, #navigation ul.nav li.current-cat a, #navigation ul.nav li.current-menu-item a { background-color:transparent; }
#navigation ul.nav li.current_page_item a, #navigation ul.nav li.current_page_parent a, #navigation ul.nav li.current-menu-ancestor a, #navigation ul.nav li.current-cat a, #navigation ul.nav li.current-menu-item a { color:#ffffff; }
#navigation ul li:first-child, #navigation ul li:first-child a { border-radius:0px 0 0 0px; -moz-border-radius:0px 0 0 0px; -webkit-border-radius:0px 0 0 0px; }
#navigation {background:transparent;border-top:1px solid #FFFFFF;border-bottom:1px solid #FFFFFF;border-left:0px solid #dbdbdb;border-right:0px solid #dbdbdb;border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px;}

而且，HTML 本身：

<div id="navigation" class="col-full">
                <ul id="main-nav" class="nav fl"><li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17"><a href="/weddings-events/">Weddings &#038; Events</a></li>
<li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-24 current_page_item menu-item-41"><a href="/services/">Services</a></li>
<li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40"><a href="/about/">About</a></li>
<li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-39"><a href="/praise/">Praise</a></li>
<li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-38"><a href="/press/">Press</a></li>
<li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-37"><a href="/contact/">Contact</a></li>
<li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a href="/blog/">Blog</a></li>
</ul>   
    </div>

好的，我想我有所有的代码。基本上，我想要的是在#navigation 上有一个顶部和底部边框，然后让导航项本身自动居中，最后允许活动项（因为它是一种不同的字体，需要一个小的边距调整，以便它与其他导航项目“对齐”），当：悬停时，不会覆盖顶部/底部边框。

没有悬停效果，看起来“很好” - http://content.screencast.com/users/WolfSnap/folders/Snagit/media/051b5d52-a234-4714-90e9-cd772db5b6dc/2012-07-07_15-09-37.png

使用悬停效果，边框消失！- http://content.screencast.com/users/WolfSnap/folders/Snagit/media/7b921116-f7fa-4e4f-b5c1-10fe865c409b/2012-07-07_15-10-57.png

css - 将导航栏居中并防止当前项目不同的@font-face 覆盖#navigation 容器边框

0 回答 0

Related

Reference