Html 在下拉菜单中将徽标居中_Html_Css

Html 在下拉菜单中将徽标居中

html css

Html 在下拉菜单中将徽标居中,html,css,Html,Css,我的最终目标是创建您在图像B中看到的内容。注意：菜单栏必须位于页面中央。我通过将图像上的垂直对齐设置为中间来创建B。但是，这样做的结果是，我的下拉菜单与主标题略微分开。因此，当我向下移动鼠标光标时，无法选择子菜单项。有什么办法让这一切顺利吗？谢谢Jillian <style> #nav{ border:1px solid #ccc; border-width:1px 0; list-style:n

我的最终目标是创建您在图像B中看到的内容。注意：菜单栏必须位于页面中央。我通过将图像上的垂直对齐设置为中间来创建B。但是，这样做的结果是，我的下拉菜单与主标题略微分开。因此，当我向下移动鼠标光标时，无法选择子菜单项。有什么办法让这一切顺利吗？谢谢Jillian

<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>


#导航{
边框：1px实心#ccc；
边框宽度：1px0；
列表样式：无；
保证金：0；
填充：0；
文本对齐：居中；
}
#李海军{
位置：相对位置；
显示：内联；
}
#导航a{
显示：内联块；
填充：10px；
}
#导航ul{
位置：绝对位置；
/*顶部：100%；取消注释会使下拉列表在IE7中工作，但在所有其他浏览器中看起来更糟。您的呼叫*/
左：-9999px；
保证金：0；
填充：0；
文本对齐：左对齐；
}
#李国荣{
显示：块；
}
#李海军：悬停{
左：0；
}
#李导航：悬停a{
文字装饰：下划线；
背景#f1f1；
}
#李导航：悬停在ul a上{
文字装饰：无；
背景：无；
}
#导航李：悬停ul a：悬停{
文字装饰：下划线；
背景#f1f1；
}
#导航ula{
空白：nowrap；
显示：块；
边框底部：1px实心#ccc；
}
a{
颜色：#c00；
文字装饰：无；
字体大小：粗体；
}
a:悬停{
文字装饰：下划线；
背景#f1f1；
}

您只需向上偏移子菜单即可覆盖徽标高度

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

#nav ul {
   top: 20px;
}

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

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

#nav ul {
   top: 20px;
}

你做了一些事情，比如

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

除非你必须把它用作链接。然后考虑<代码>位置：绝对值；<编码>用于

#nav ul

位置为

的图像：相对，并对其他链接使用浮动布局，使用z-index
重叠它们应该挂起的位置。
您可以执行以下操作：
#nav ul{
  background:url('img/logo_large.png') no-repeat center center;
  /* more CSS here */
}

除非你必须把它用作链接。然后考虑<代码>位置：绝对值；<编码>用于#nav ul
位置为的图像：相对，并使用浮动布局将其他链接与z-index
重叠，以便它们应该挂起的位置。
尝试在CSS中插入行高：X px
；（例如，父div高度）在每个菜单标题中（项目1、项目2、第四项等）
尝试插入CSS行高：X px
；（例如，每个菜单标题（项目1、项目2、项目4等）中的父div高度）