CSS水平下拉菜单问题

我的css菜单有一些问题。我正在重新设计我所有的CSS菜单，取消任何javascript帮助。我相信这很简单，所以请对我放松点

第一个问题：我正在尝试将ul的上边框连接到li的右边框。

我曾尝试在“ul#nav ul”中添加一个顶部边框，但它一直贯穿始终

我曾尝试在“ul#nav li:hover>a”中添加边距底部：-1px，使其向下延伸以覆盖上方的上边框，但这不起作用

第二个问题：当鼠标在滑出中处于活动状态时，我在主界面上得到一个奇怪的空间。

最后一期：我看了一些在线教程，在有子菜单但似乎无法将其集成到正确位置时添加“>”图形

以下是代码的链接：

以下是代码：

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

.pipe{页边顶部：4px；}
.liu hover{color:#002398；}
.bottom_li{页边距底部：6px；页边距顶部：2px；}
ul#nav li.bottom#li:hover>a{背景：#e0；}
ul#nav，ul#nav ul{宽度：300px；列表样式：无；边距：0；填充：0；位置：绝对；z索引：9；边框：1px实心#297BCE；}
ul#nav li{位置：相对；浮动：左；缩放：1；/*IE需要*/}
ul#nav li:hover>a{背景：E0E0E0；颜色：297BCE；边框左侧：1px实心#297BCE；边框右侧：1px实心#297BCE；边框顶部：1px实心#e0e0；边框底部：1px实心#e0e0；文本装饰：下划线；}
ul#nav li:hover>ul{display:block；}
ul#nav li a{边框：1px实心#FFFFFF；显示：块；填充：4px 6px 4px 6px；颜色：297BCE；字体大小：粗体；字体系列：Arial，泰晤士报新罗马，塔荷马；字体大小：13px；文本装饰：无；}
ul#nav ul{左侧填充：8px；顶部填充：2px；显示：无；位置：绝对；宽度：150px；边框：1px实心#297BCE；背景：#e0e0；左侧：0；顶部边框：无；}
ul#nav ul li{背景：#e0；颜色：#000；边框：无；浮动：无；}
ul#nav ul li a{边框：无；宽度：100%；填充：0；显示：块；颜色：000000；行高：145%；字体大小：12px；字体重量：正常；}
ul#nav ul li a:悬停{边框：无；宽度：150px；颜色：#297BCE；>}
ul#nav ul ul{位置：绝对；顶部：0；左侧：100%；左边距：-3px；显示：无；}
ul#nav ul ul{左侧填充：8px；位置：绝对；宽度：150px；边框：1px实心#297BCE；背景：#e0e0；}
ul#nav ul li:悬停ul{显示：块；}

















|
















|

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

第1期：

实现这一点的一种方法是使a链接的z索引更高（z索引：100@第7行），然后将ul菜单的z索引设置为-1，并使用“top:23px”将菜单拉到菜单下方

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

第二期：

在CSS的第7行：hover样式作用于所有li，即使是嵌套的li，您最好为内部ul提供它们自己的类，然后您可以应用更具体的样式，此时左边框将应用于#nav下面的所有li

第3期：

您可以在li中添加另一个元素（）并向右浮动，这可能有一个>图像或一个>字符

---

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

第二个问题：这是因为你的规则：

ul#nav li:hover>a{border left:whatever 1px；}

，虽然说实话，我不知道为什么只有当你在孩子身上徘徊时，它才会影响它。第二期修复添加：ul#nav li li:hover>a{border:none；}谢谢。第三个问题修复。这比大多数网站所说的要简单得多。添加：

最后一件事：当您将鼠标移到子菜单的滑出位置时，我将如何给称之为彩色背景的父级li以知道您正在查看哪个子菜单？即使鼠标不在元素上方？您将需要一些javascript来实现这一点，例如jQuery将是$（ul#nav li）.hover（function（）{$（this）.addClass（'selected'））将添加一个类，然后当任何其他菜单悬停时，可以使用类似的函数删除该类