Question

我的最终目标是创建您在图像B中看到的内容。注意：菜单栏必须位于页面的中心。我通过将图像上的vertical-align设置为中间来创建B.但是，由于这样做，我的下拉菜单与主标题略有分离。因此，当我向下移动鼠标光标时，我无法选择子菜单项。有关这项工作的任何想法？谢谢Jillian

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>

Answer 1

你做的事情，

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

除非您必须将其用作链接。然后对position:absolute; #nav ul为position:relative;的图片考虑z-index，并为{{1}}的其他链接使用浮动布局重叠，以便它们悬挂在哪里。

Answer 2

您可以将子菜单向上偏移以覆盖徽标高度。

以下是JSfiddle使用Google徽标并通过添加以下内容来更改子菜单样式：

#nav ul {
   top: 20px;
}

Answer 3

尝试插入CSS line-height: X px; （例如，父div高度）在每个菜单标题中（第一项，第二项，第四项等）

在下拉菜单中居中徽标

3 个答案: