Question

我的css菜单有一些问题。我正在重新设计我的所有CSS菜单，并取消任何JavaScript帮助。我确信它很简单，所以请放轻松我。

第一期：我正在尝试将ul的顶部边框连接到li的右边界。 missing border

我尝试在'ul＃nav ul'中添加一个顶部边框，但它一直在进行。

我尝试过将margin-bottom：-1px添加到'ul＃nav li：hover＆gt; a'使其向下延伸以覆盖上方的上边界但不起作用。

第二个问题：当鼠标在滑出时处于活动状态时，我在主li上获得了一个奇怪的空间。 weird space

最终问题：我看了几个在线教程添加'＆gt;'图形有子菜单但似乎无法将其整合到正确的位置。

这是代码：

<style type="text/css">
.pipe {margin-top:4px;}
.li_hover {color: #002398;}
.bottom_li {margin-bottom:6px;margin-top:2px;}
ul#nav li .bottom_li:hover > a{background:#E0E0E0;}
ul#nav, ul#nav ul {width:300px;list-style:none;margin:0;padding:0;position:absolute;z-index:9;border:1px solid #297BCE;}
ul#nav li {position:relative;float:left;zoom:1; /*Needed for IE*/}
ul#nav li:hover > a{background:#E0E0E0;color:#297BCE;border-left:1px solid #297BCE;border-right:1px solid #297BCE;border-top:1px solid #E0E0E0;border-bottom:1px solid #E0E0E0;text-decoration:underline;}
ul#nav li:hover > ul{display:block;}
ul#nav li a{border:1px solid #FFFFFF;display:block;padding:4px 6px 4px 6px;color:#297BCE;font-weight:bold;font-family:Arial, Times New Roman, Tahoma;font-size:13px;text-decoration:none;}
ul#nav ul {padding-left:8px;padding-top:2px;display:none;position:absolute;width:150px;border:1px solid #297BCE;background:#E0E0E0;left:0;border-top:none;}
ul#nav ul li{background:#E0E0E0;color:#000;border:none;float:none;}
ul#nav ul li a{border:none;width:100%;padding:0;display:block;color:#000000;line-height:145%;font-size:12px;font-weight:normal;} 
ul#nav ul li a:hover{border:none;width:150px;color:#297BCE;>}
ul#nav ul ul{position: absolute;top: 0;left: 100%;margin-left:-3px;display: none;}
ul#nav ul ul{padding-left:8px;position:absolute;width:150px;border:1px solid #297BCE;background:#E0E0E0;}
ul#nav ul li:hover ul{display: block;}
</style>

<ul id="nav">
 <li><a href="/ueber_uns.htm">About Us</a>
  <ul>
    <li><a href="#">Who We Are</a></li>
    <li><a href="#">Our Goals</a></li>
    <li><a href="#">Our Team</a></li>
    <li><a href="#">Press</a>
     <ul>
      <li><a href="#">2006</a></li>
      <li><a href="#">2007</a></li>
      <li><a href="#">2008</a></li>
     </ul>
    </li>
   <li><a href="#">Impressum</a></li>
   <li class="bottom_li"><a href="#"><span class="li_hover">See all</span></a></li>
  </ul>
 </li>
<li class="pipe">|</li>
 <li><a href="/ueber_uns.htm">About Us</a>
  <ul>
    <li><a href="#">Who We Are</a></li>
    <li><a href="#">Our Goals</a></li>
    <li><a href="#">Our Team</a></li>
    <li><a href="#">Press</a>
     <ul>
      <li><a href="#">2006</a></li>
      <li><a href="#">2007</a></li>
      <li><a href="#">2008</a></li>
     </ul>
    </li>
   <li><a href="#">Impressum</a></li>
   <li class="bottom_li"><a href="#"><span class="li_hover">See all</span></a></li>
  </ul>
 </li>
<li class="pipe">|</li>
 <li><a href="/ueber_uns.htm">About Us</a>
  <ul>
    <li><a href="#">Who We Are</a></li>
    <li><a href="#">Our Goals</a></li>
    <li><a href="#">Our Team</a></li>
    <li><a href="#">Press</a>
     <ul>
      <li><a href="#">2006</a></li>
      <li><a href="#">2007</a></li>
      <li><a href="#">2008</a></li>
     </ul>
    </li>
   <li><a href="#">Impressum</a></li>
   <li class="bottom_li"><a href="#"><span class="li_hover">See all</span></a></li>
  </ul>
 </li>
</ul>

非常感谢你在正确的方向上提供帮助。

Answer 1

第一期：

实现这一目标的一种方法是使链接更高z-index（z-index：100 @ Line 7），然后给ul菜单一个z-index为-1并使用'top：23px'来拉在。下面的菜单。

但它有点像黑客，如果我是你，我会避免尝试这样做

第二期：

在你的CSS的第7行：hover样式是对所有li进行操作，即使是嵌套的，你会更好地给内部ul自己的类，然后你可以应用更具体的样式，此时，border-left被应用于#nav

下面的所有li

第3期：

你可以在li里面添加另一个元素（）并向右浮动，这可以有一个＆gt;图片或只是一个＆gt;字符。

我知道你说你要删除javascript但是可能值得查看jQuery UI Menu并查看他们使用的CSS布局（或者只是为了捏他们的图标）

CSS水平下拉菜单问题

1 个答案: