具有公共边框的水平菜单和子菜单也必须在 ie7 中工作

Question

我对一个水平菜单有一些疑问，首先让我展示一下我想要达到的目标示例< /a>.

1. 子菜单必须与其父菜单向左对齐，但是当我在 #nav li{position:relative;} 进行更改时，它会忽略左侧浮动以及主菜单中的子菜单父边框，我无法删除这些内容.

2. 菜单必须有没有背景的水平子菜单，但有与父菜单相同的边框，菜单和子菜单的液体宽度。

3. 让这件事变得更加困难的是这个必须在 IE7 中工作。

ul#nav {
  list-style: none;
  padding: 0;
  position: relative;
  display: block;
}

#nav li {
  float: left;
  padding: 6px 10px;
}

#nav li:hover {
  padding: 5px 9px;
  border: 1px solid #000000;
}

#nav li a {
  text-decoration: none;
  color: #09F;
}

#nav li:hover a {
  color: #000000;
}

#nav .submenu li a {
  color: #3F0;
}

#nav li .submenu {
  position: absolute;
  left: -9000px;
}

#nav li:hover .submenu {
  margin-top: 5px;
  left: -1px;
  border: 1px solid #000000;
}

.submenu ul {
  list-style: none;
  padding: 0;
  float: left;
}

body {
  /* added to show transparency */
  padding: 20px;
  background-color: #6d695c;
  background-image: repeating-linear-gradient(-30deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .1) 1px, transparent 1px, transparent 60px), repeating-linear-gradient(30deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .1) 1px, transparent 1px, transparent 60px), linear-gradient(30deg, rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .1) 75%, rgba(0, 0, 0, .1)), linear-gradient(-30deg, rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .1) 75%, rgba(0, 0, 0, .1));
  background-size: 70px 120px;
}

<ul id="nav">
  <li><a href="#">Primu</a></li>
  <li><a href="#">Adoilea</a>
    <div class="submenu">
      <ul>
        <li><a href="#">submenu1</a></li>
        <li><a href="#">sub2</a></li>
        <li><a href="#">subtrei</a></li>
        <li><a href="#">subpatru</a></li>
      </ul>
    </div>
  </li>
  <li><a href="#">trei</a></li>
  <li><a href="#">patru</a></li>
  <li><a href="#">cinci</a></li>
</ul>

Answer 1

以下是我在 css 和 HTML 中更改的内容：

.submenu {
visibility: hidden;
position: absolute;
list-style:none;
padding: 0;
display: block;
}

.submenu li{float: left; list-style: none;}

.submenu li ul{
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
background: #ddddef;
}
.submenu li{float: none; display: inline;}

#nav li:hover div{
position: relative;
width: 1000%;
overflow: visible;
}

#nav li:hover div .submenu{
margin-top: 5px;
left: -10px;
border: 1px solid #000000;
visibility: visible;
overflow: visible;
}

在 html 中，我将 class 分配给 ul 并将其从 div 中删除。

      <ul id="nav">
        <li><a href="#">Primu</a></li>
        <li>
        <a href="#">Adoilea</a>
        <div>
             <ul class="submenu">
                    <li><a href="#">submenu1</a></li>
                    <li><a href="#">sub2</a></li>
                    <li><a href="#">subtrei</a></li>
                    <li><a href="#">subpatru</a></li>
              </ul>
        </div>

        </li>
        <li><a href="#">trei</a></li>
        <li><a href="#">patru</a></li>
        <li><a href="#">cinci</a></li>
</ul>

在IE8和FF下测试过，没有IE7。子菜单与父项的左侧对齐。仍然没有找到从父级删除 border-bottom 的方法。认为你需要 js 来做到这一点。

编辑：
这是 CSS 和 jQuery 的结合。
唯一的问题是带有子菜单的项目的右侧边距较大，因为它需要与第一个子菜单项的宽度相同）。所以你可能会想如何处理它，但这至少是一些想法。

HTML 与上面相同。
jQuery：

$(document).ready(function(){
$('.firstitem').parent().parent().parent().width($('.firstitem').width()).find('a').css("margin", "0px auto").css("text-align", "center");



$('#nav li').hover(
function(){

if ($(this).find('ul').hasClass('submenu')){
$(this).css("border"," 1px solid #000000");
$(this).css("border-bottom"," 1px solid #6d695c");
//$(this).width($(this).find('.firstitem').width() + 1);
 }
     }, 
function (){
if ($(this).find('ul').hasClass('submenu')){
$(this).css("border","1px solid #6d695c");
 }
 });


  });

重新访问 CSS：

#nav {
    list-style:none;
    padding: 0;
    position: relative;
    display: block;
}
#nav li {
    float: left;
    padding: 6px 10px;
    background-color: #6d695c;
}
#nav li:hover {
    border: 1px solid #000000;
}
#nav li a {
    text-decoration: none;
    color: #09F;
}
#nav li:hover a {
    color: #000000;
}
#nav .submenu li a {
    color: #3F0;
}
.submenu {
visibility: hidden;
position: absolute;
list-style:none;
padding: 0;
display: block;
}

.submenu li{float: left; list-style: none; padding: 0; margin: 0;}

.submenu ul{
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
background: #ddddef;
}
.submenu li{float: none; display: inline;}

#nav li:hover div{
position: relative;
width: 1000%;
overflow: visible;
}

#nav li:hover div .submenu{
    margin-top: 5px;
    padding: 0;
    left: -11px;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    border-top: 0px;
    visibility: visible;
    overflow: visible;
}

#nav li:hover div .submenu > li{
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
}

#nav li:hover div .submenu > li.firstitem{
    border-top: 1px solid #6d695c;
    border-bottom: 1px solid #000000;
}
#nav li:hover div .submenu li:hover{
border: 2px solid #000000;
}