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"。如果您有多个具有相同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。如果你不需要第三级下拉，最好删除这个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和背景颜色增加了宽度，以帮助看看发生了什么。

水平菜单的问题

1 个答案: