在下拉菜單中居中放置徽標

我的最終目標是創建您在圖像B中看到的內容。注意：菜單欄必須位於頁面的中心。我通過將圖像上的垂直對齊設置爲中間來創建了B.但是，由於這樣做，我的下拉菜單與主標題略有分離。因此，當我向下移動鼠標光標時，我無法選擇子菜單項。任何想法使這項工作？由於吉利安在下拉菜單中居中放置徽標

Example A and B

<style> 


     #nav{ 
      border:1px solid #ccc; 
      border-width:1px 0; 
      list-style:none; 
      margin:0; 
      padding:0; 
      text-align:center; 
     } 
     #nav li{ 
      position:relative; 
      display:inline; 
     } 
     #nav a{ 
      display:inline-block; 
      padding:10px; 
     } 
     #nav ul{ 
      position:absolute; 
      /*top:100%; Uncommenting this makes the dropdowns work in IE7 but looks a little worse in all other browsers. Your call. */ 
      left:-9999px; 
      margin:0; 
      padding:0; 
      text-align:left; 
     } 
     #nav ul li{ 
      display:block; 
     } 
     #nav li:hover ul{ 
      left:0; 
     } 
     #nav li:hover a{ 
      text-decoration:underline; 
      background:#f1f1f1; 
     } 
     #nav li:hover ul a{ 
      text-decoration:none; 
      background:none; 
     } 
     #nav li:hover ul a:hover{ 
      text-decoration:underline; 
      background:#f1f1f1; 
     } 
     #nav ul a{ 
      white-space:nowrap; 
      display:block; 
      border-bottom:1px solid #ccc; 
     } 
     a{ 
      color:#c00; 
      text-decoration:none; 
      font-weight:bold; 
     } 
     a:hover{ 
      text-decoration:underline; 
      background:#f1f1f1; 
     } 

</style> 

</head> 
<body> 
<ul id="nav"> 
    <li><a href="link1.html">Item one</a></li> 
    <li><a href="#">Item two</a> 
    <ul> 
    <li><a href="link1.html">Sub1</a></li> 
    <li><a href="link1.html">Sub2</a></li> 
    </ul> 
    </li> 
    <li class="double-line"> 
    <a href="index.php"><img style="vertical-align:middle" src="img/logo_large.png" alt="logo" /></a></li> 
    <li><a href="link4.html">The Fourth</a></li> 
    <li><a href="link5.html">Last</a></li> 
</ul> 
</body> 
</html>

來源

2013-09-10 user2197774

你可以只抵消了子覆蓋標誌的高度。

這裏是一個JSfiddle使用谷歌標識，並通過添加這種改變子菜單風格：

#nav ul { 
    top: 20px; 
}

來源

2013-09-10 22:58:03

簡單...感謝PR – user2197774

你做這樣的事情，

#nav ul{ 
    background:url('img/logo_large.png') no-repeat center center; 
    /* more CSS here */ 
}

，除非你使用它作爲一個鏈接。然後考慮position:absolute;與#nav ul爲position:relative;的圖像，並使用浮動佈局的其他鏈接與z-index重疊他們應該掛起的位置。

來源

2013-09-10 23:21:27 PHPglue

嘗試插入CSS line-height: X px; （例如，父div高度）在每個菜單標題（項目一，項目二，第四等）

來源

2013-09-10 23:25:00

在下拉菜單中居中放置徽標

回答

相關問題