0

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

我的 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 比较陌生。

提前致谢！

4

1 回答 1

0

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

不过，对于您的对齐问题，最简单的答案是您的 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: noneand display: block。原因是，visibility: hidden即使它是不可见的，它仍然会占用页面上的空间。 display: none但是，根本不渲染 DOM 元素，也不会占用页面空间
  • 在某些子菜单中，您将<div>元素作为标记的直接子元素。<ul>只<li>允许元素作为直接子元素
  • 您有一些元素 namedsub_menu和一些 named submenu。如果要正确应用样式，则需要具有一致的名称。

这是一个带有您的代码的 jsFiddle，以及我提到的所有更改。我为您的 li 和背景颜色添加了宽度，以帮助查看发生了什么。

于 2013-08-08T14:02:26.197 回答