我的 CSS 菜单有一些问题。我正在重新设计我所有的 CSS 菜单并取消任何 javascript 帮助。我确定这很简单,所以请放轻松。
第一个问题:我正在尝试将 ul 的上边框连接到 li 的右边框。
我曾尝试为 'ul#nav ul' 添加一个顶部边框,但它一直贯穿始终。
我尝试将 margin-bottom:-1px 添加到 'ul#nav li:hover > a' 以使其向下延伸以覆盖上面的顶部边框,但这不起作用。
第二个问题:当鼠标在滑出中处于活动状态时,我在主 li 上得到一个奇怪的空间。
最后一期:我查看了几个在线教程,在有子菜单时添加“>”图形,但似乎无法将其集成到正确的位置。
这里是代码链接:http: //jsfiddle.net/Bqh9a/
这是代码:
<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>
非常感谢您在正确方向上的帮助。