1

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

示例 A 和 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>
4

3 回答 3

1

你做类似的事情，

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

除非您必须将其用作链接。然后考虑使用beingposition:absolute;的图像，并为其他链接使用浮动布局，以重叠它们应该悬挂的位置。#nav ulposition:relative;z-index

于 2013-09-10T23:21:27.967 回答
0

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

这是一个使用 google 徽标并通过添加以下内容更改子菜单样式的JSfiddle ：

#nav ul {
   top: 20px;
}
于 2013-09-10T22:58:03.397 回答
0

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

于 2013-09-10T23:25:00.350 回答