導航中心

我似乎無法弄清楚如何讓絕對中心的徽標被我的導航鏈接（每邊3個）包圍，並且導航在調整大小後下降到徽標下方：http://testsite.brentthelendesign.com/ 。如果在其他地方回答，我會提前道歉。任何幫助，將不勝感激！導航中心

下面的代碼：

LOGO CSS

h1.logo { 
    float: none; 
    left: 50%; 
    margin-left: -80px; 
    text-align: center; 
} 

h1.logo a { 
    background: url("images/logo.png") no-repeat scroll 0 0 transparent; 
    display: block; 
    float: none; 
    height: 127px; 
    text-align: center; 
    text-indent: -9999px; 
    width: 181px; 
} 

.abs { 
    position: absolute; 
}

導航CSS

.nav { 
    position: relative; 
} 
#navigation ul li, #navigation ul li a { 
    border: medium none !important; 
    color: #3C3F40; 
    display: block; 
    float: right; 
    font-family: 'Fjord One',"Times New Roman",Times,serif; 
    font-weight: normal; 
    margin: 42px 0 130px !important; 
    padding: 15px 25px; 
    position: relative; 
    text-align: center !important; 
    text-decoration: none; 
    text-transform: uppercase; 
} 
#navigation ul li:hover a, #navigation ul li a:hover { 
    color: #D9A13B; 
} 
#navigation ul li:hover li a { 
    color: #D9A13B; 
    font-weight: normal; 
} 
#navigation ul li.active a { 
    color: #D9A13B; 
} 
#navigation ul.sub-menu { 

} 
#navigation ul.sub-menu li { 
    border: medium none; 
} 
#navigation ul.sub-menu li a { 
    background: none repeat scroll 0 0 transparent; 
    border-bottom: medium none; 
    border-radius: 0 0 0 0; 
    height: 32px; 
    line-height: 32px; 
    min-width: 210px; 
    padding: 5px 0 5px 8px; 
    position: static; 
} 
#navigation ul.sub-menu li a:hover { 
    border-bottom: medium none; 
}

的HTML：

<header class="sixteen columns"> 



<nav> 

    <h1 class="logo abs"> 
    <a href="/">Bound By Design</a> 
    </h1> 

    <div id="navigation" class="row sixteen columns"> 
     <div class="menu-header"> 

      <ul id="menu-primary-menu" class="menu sf-js-enabled"> 

       <li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item- 
       object-page current-menu-item page_item page-item-4 current_page_item menu-item-40 active"> 
       <a href="http://testsite.brentthelendesign.com/">Home</a> 
       </li> 
       <li id="menu-item-41" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-41"> 
       <a href="http://testsite.brentthelendesign.com/category/tattoos/">Tattoos</a> 
       </li> 
       <li id="menu-item-42" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-42"> 
       <a href="http://testsite.brentthelendesign.com/category/piercings/">Piercings</a> 
       </li> 
       <li id="menu-item-60" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60"> 
       <a href="http://testsite.brentthelendesign.com/aftercare/">Aftercare</a> 
       </li> 
       <li id="menu-item-58" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-58"> 
       <a href="http://testsite.brentthelendesign.com/category/news/">News</a> 
       </li> 
       <li id="menu-item-59" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59"> 
       <a href="http://testsite.brentthelendesign.com/contact/">Contact</a> 
       </li> 
      </ul> 
     </div> 
    </div> 
    </nav> 
</header>

來源

2013-07-17 beetheezy

你能告訴我們你的代碼菜單/標誌嗎？ – dezman

請在此處添加有意義的代碼和問題描述。請不要將鏈接到需要修復的網站 - 否則，一旦問題得到解決，此問題將會丟失未來訪問者的任何價值。發佈 [簡短，獨立，正確的示例（SSCCE）]（http://www.sscce.org/），這表明您的問題將幫助您獲得更好的答案。有關更多信息，請參閱 [我的網站上的某些內容不起作用。我可以只粘貼一個鏈接到它嗎？]（http://meta.stackexchange.com/questions/125997/）謝謝！ – j08691

您不能在絕對定位的元素周圍浮動/流動。 – isherwood

只需添加：

#navigation ul li:nth-child(3) { 
    margin-right: 213px!important; 
}

到layout.css中，它會照顧標識問題。

另外：

#navigation ul li, #navigation ul li a { 15px 0 26px 0 !important; }

意志擺脫導航和「歡迎」

來源

2013-07-17 17:37:33 Labanino

完美。謝謝。 – beetheezy

這之間的差距是一個辦法，就是在您的標誌和頁面寬度少了幾分依賴：

#menu-primary-menu {width: 100%} 
#menu-primary-menu > li:nth-child(n+4) {float: right}

請注意，您必須顛倒3個右浮動菜單項的順序，因爲它們是從右到左堆疊的。

來源

2013-07-17 17:46:03 isherwood

回答

相關問題