使子菜单下拉宽度大于父li [英] Make submenu dropdown wider than parent li

问题描述

我做的工作通过使子菜单的功能，问题是我不能得到子菜单宽度比其父。宽松。

当我徘徊，您可以在下面提供的小提示链接中查看

请查看此 http://jsfiddle.net/wR5L5/

  .navigation {
 height ：35px; 
 background：＃333; 
} 
 .navigation ul {
 margin：0; 
 padding：0; 
} 
 .navigation ul li {
 position：relative; 
 display：inline; 
} 
 .navigation ul li a {
 text-transform：uppercase; 
 color：#fff; 
 font-weight：700; 
 line-height：35px; 
 padding：6px 8px; 
 text-shadow：0px 0px 1px＃ff170f; 
} 
 .navigation ul li a：hover {
 text-decoration：none; 
 color：＃FF3E36; 
 border-bottom：2px solid＃FF3E36; 
} 
 .navigation ul li：hover ul {
 left：0; 
} 
 .navigation ul .sub {
 position：absolute; 
 z-index：9999; 
 left：-9999px; 
 font-size：13px; 
} 
 .navigation ul .sub li {
 padding-top：-4px; 
 float：none; 
 background：#fff; 
} 
 .navigation ul .sub li a {
 text-shadow：none; 
 color：＃333; 
} 
 .navigation ul .sub li a：hover {
 color：＃ff3e36; 
 border-bottom：none; 
 text-shadow：none; 
} 
 .navigation ul .sub li：hover {
 background：＃333; 
} 
  

解决方案

code> .sub 课程 http://jsfiddle.net/wR5L5/12 /

  .navigation {
 height：35px; 
 background：＃333; 
} 
 .navigation ul {
 margin：0; 
 position：relative; 
 
 padding：0; 
} 
 .navigation ul li {
 display：inline; 
 position：relative; 
} 
 .navigation ul li a {
 text-transform：uppercase; 
 color：#fff; 
 font-weight：700; 
 line-height：35px; 
 padding：6px 8px; 
 text-shadow：0px 0px 1px＃ff170f; 
} 
 .navigation ul li a：hover {
 text-decoration：none; 
 color：＃FF3E36; 
 border-bottom：2px solid＃FF3E36; 
} 
 .navigation ul li：hover ul {
 left：0; 
} 
 .navigation ul .sub {
 position：absolute; 
 z-index：9999; 
 left：-9999px; 
 float：left; 
 width：auto; 
 min-width：100％; 
 background：＃999; 
 font-size：13px; 
} 
 .navigation ul .sub li {
 padding-top：-4px; 
 float：none; 
 white-space：nowrap; 
 clear：both; 
 background：#fff; 
} 
 .navigation ul .sub li a {
 text-shadow：none; 
 color：＃333; 
 display：block; float：none; width：100％; 
 
} 
 .navigation ul .sub li a：hover {
 color：＃ff3e36; 
 border-bottom：none; 
 text-shadow：none; 
} 
 .navigation ul .sub li：hover {
 background：＃333; 
} 
  

I did the job by make the submenu functioning, the problem is I can't get the submenu width wider than its parent.

when i hover, its messed up as you can see in fiddle links i provided below

please take a look at this http://jsfiddle.net/wR5L5/

    .navigation {
  height: 35px;
  background: #333;
}
.navigation ul {
  margin: 0;
  padding: 0;
}
.navigation ul li {
  position: relative;
  display: inline;
}
.navigation ul li a {
  text-transform: uppercase;
  color: #fff;
  font-weight: 700;
  line-height: 35px;
  padding: 6px 8px;
  text-shadow: 0px 0px 1px #ff170f;
}
.navigation ul li a:hover {
  text-decoration: none;
  color: #FF3E36;
  border-bottom: 2px solid #FF3E36;
}
.navigation ul li:hover ul {
  left: 0;
}
.navigation ul .sub {
  position: absolute;
  z-index: 9999;
  left: -9999px;
  font-size: 13px;
}
.navigation ul .sub li {
  padding-top: -4px;
  float: none;
  background: #fff;
}
.navigation ul .sub li a {
  text-shadow: none;
  color: #333;
}
.navigation ul .sub li a:hover {
  color: #ff3e36;
  border-bottom: none;
  text-shadow: none;
}
.navigation ul .sub li:hover {
  background: #333;
}

解决方案

there is a flexible menu .sub class http://jsfiddle.net/wR5L5/12/

       .navigation {
      height: 35px;
      background: #333;
    }
    .navigation ul {
      margin: 0;
          position: relative;

      padding: 0;
    }
    .navigation ul li {
      display: inline;
        position:relative;
    }
    .navigation ul li a {
      text-transform: uppercase;
      color: #fff;
      font-weight: 700;
      line-height: 35px;
      padding: 6px 8px;
      text-shadow: 0px 0px 1px #ff170f;
    }
    .navigation ul li a:hover {
      text-decoration: none;
      color: #FF3E36;
      border-bottom: 2px solid #FF3E36;
    }
    .navigation ul li:hover ul {
      left: 0;
    }
    .navigation ul .sub {
      position: absolute;
      z-index: 9999;
      left: -9999px;
    float:left;
        width:auto;
min-width:100%;
        background:#999;
      font-size: 13px;
    }
    .navigation ul .sub li {
      padding-top: -4px;
      float: none;
        white-space:nowrap;
        clear:both;
      background: #fff;
    }
    .navigation ul .sub li a {
      text-shadow: none;
      color: #333;
        display:block;float:none;width:100%;

    }
    .navigation ul .sub li a:hover {
      color: #ff3e36;
      border-bottom: none;
      text-shadow: none;
    }
    .navigation ul .sub li:hover {
      background: #333;
    }

这篇关于使子菜单下拉宽度大于父li的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！