html - 水平菜单的问题

Question

我的水平下拉菜单有一个奇怪的问题。请在下面找到代码。

我的 HTML 菜单部分如下所示 -

<div id="page-wrap">
<ul class="dropdown">

        <li><a href="#"><img src="images/home.png" border="0"></a></li>

        <li><a href="#"><img src="images/aboutus.png" border="0"></a></li>

        <li><a href="#"><img src="images/profile.png" border="0"></a>
             <ul id="submenu">
              <li id="firstItem"><img src="images/submenu_center_top.png"></li>
              <li><a href="#">Support Team</a></li>
              <li id="lastItem"><img src="images/submenu_bottom.png"></li>
             </ul>
            </li>

        <li><a href="#"><img src="images/activities.png" border="0"></a>

         <ul id="sub_menu">

              <div><img src="images/submenu_center_top.png">
              <li><a href="#">Nutrition &amp; Tips</a></li>

              <div><img src="images/submenu_bottom.png"></div>
              </ul>

        </li>

        <li><a href="#"><img src="images/shiningstars.png" border="0"></a></li>

        <li><a href="#"><img src="images/testimonials.png" border="0"></a></li>

        <li><a href="#"><img src="images/gallery.png" border="0"></a>
         <ul id="sub_menu">

              <div><img src="images/submenu_center_top.png">
              <li><a href="#">Photo Gallery</a></li>
              <li><a href="#">Audio Visual Gallery</a></li>

          <li><a href="#">In Press</a></li>

          <li><a href="#">Articles</a></li>

              <div><img src="images/submenu_bottom.png"></div>
         </ul>

        </li>

        <li><a href="#"><img src="images/eventsnews.png" border="0"></a>

         <ul id="submenu">

              <div><img src="images/submenu_center_top.png">
          <li><a href="#">Upcoming Events</a></li>

              <div><img src="images/submenu_bottom.png"></div>
             </ul>

        </li>

        <li><a href="#"><img src="images/contactus.png" border="0"></a></li>
         </ul>
       </div>

我的 CSS 文件包含以下代码:

#page-wrap {
 width: 1004px; margin: 0;
}
a {
 text-decoration: none;
}
ul {
 list-style: none; 
}
ul.dropdown {
 position: relative;
}
ul.dropdown li {
 font-weight: normal; float: left; zoom: 1; /*background: #ccc; */
}
ul.dropdown a:hover {
 color: #fff;
}
ul.dropdown a:active {
 color: #ffa500;
}
ul.dropdown li a {
 display: block;
 padding: 0px 0px 0px 0px;
 /*border-right: 1px solid #333;
 color: #000;*/
}
ul.dropdown li:last-child a {
 border-right: none;
} /* Doesn't work in IE */
ul.dropdown li.hover, ul.dropdown li:hover {
 background: #1C1C1C;
 /*color: white;*/
 position: relative;
}
ul.dropdown li.hover a {
 color: black;
} /*LEVEL TWO*/
ul.dropdown ul {
 width: 200px;
 visibility: hidden;
 position: absolute;
 width: 100%;
 top: 100%;
 /*margin-left: -90px;*/
 left: 0; 
}
ul.dropdown ul li {
 font-weight: normal;
 font-size: 12px;
 background: #333333;
 color: #969696; 
 /*border-bottom: 1px solid #ccc;*/
 border-left: 5px solid #969696;
 border-right: 5px solid #969696;
 /*float: left;*/
}
/* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a {
 border-right: none;
 width: 100%;
 display: inline-block;
} /*LEVEL THREE*/
ul.dropdown ul ul {
 left: 100%;
 top: 0;
}
ul.dropdown li:hover > ul { 
 visibility: visible; 
}
#firstItem, #lastItem {
 background: none;
 border-left: none;
 border-right: none;
}
.sub_menu {
 float: center;
}

我在 IE 8 和 Chrome 中也得到了奇怪的结果。对齐只是没有发生。有人可以请求ehlp吗？我对 HTMl 和 CSS 比较陌生。

提前致谢!

Answer 1

这里发生了很多不同的事情。

不过，对于您的对齐问题，最简单的答案是您的 ul#sub_menu 有填充。

用这个将填充归零:

.sub_menu { padding: 0px; }

[更新:您的 html 应该使用 class="sub_menu"而不是 id="sub_menu" .如果您有超过 1 个具有相同 ID 的元素，则您的 html 无效]

最近的一个常见做法是用一堆“重置”来启动您的 CSS 文件。这会将一堆常用标签的默认填充和边距更改为 0，这样当您不需要它们时就不会遇到间距问题。例如，我通常使用的一些重置:

body, div, ul, ol, li, p, h1, h2, h3
{ padding: 0px; margin: 0px; }

我在您的代码中注意到的其他可能对您有帮助的事情:

• float: center无效。唯一有效的值是:left、right、both、none、inherit
• ul.dropdown ul ul不引用任何东西。您只有 2 个级别的 ul，但是这个选择器引用了 3 个 ul 深度。您可能从下拉菜单示例中获得了此 CSS。如果您不需要第 3 级下拉菜单，最好删除此 CSS，以免将来混淆。
• visibility: hidden , visibility: visible , 我建议使用 display: none和 display: block .原因是，visibility: hidden仍然占用页面上的空间，即使它是不可见的。 display: none但是，根本不渲染 DOM 元素，也不会占用页面空间
• 你有<div>元素作为 <ul> 的直接子元素在你的一些子菜单中标记。只有<li>允许元素作为直接子元素
• 您有一些名为 sub_menu 的元素还有一些命名为submenu .如果您希望正确应用样式，则需要具有一致的名称。

Here is a jsFiddle使用您的代码以及我提到的所有更改。我为您的 li 和背景颜色添加了宽度，以帮助查看发生了什么。