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

horizontal menu and submenu with common border which must work in ie7 too

本文关键字：菜单 ie7 工作 水平 边界      更新时间：2023-09-26

关于一个水平菜单，我有一些问题，首先让我向示例展示我想要达到的示例。

  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>

以下是我在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中，我将类分配给了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。子菜单与父项的左侧对齐。仍然没有找到从父级删除边框底部的方法。我想你需要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;
}
相关文章：