6

我正在尝试构建一个 megamenu。所以我有一个无序列表,相对于它的容器定位。

其中是包含链接的列表项。连同一个绝对定位的容器 div。

我正在关注本教程: http: //net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/

然而,我想要做的是强制每个容器 div 成为容器的最大宽度......换句话说,如果你将鼠标悬停在第一个菜单项上,我需要生成的显示 div 是 100% 的宽度整个菜单,除了左对齐,而不是 100% 包含 LI 的宽度,并左对齐。

我怎样才能做到这一点?

这是当前存在的 HTML 和 CSS,以及 jsfiddle 上的链接

HTML

<ul id="menu">
  <li><a href="~/">Home Page</a></li>
  <li><a href="#" onclick="return false;">About Us</a>
    <div class="dropdown_1columns">
      <p>5 Columns content</p>
    </div>
  </li>
  <li><a href="#" onclick="return false;">Solutions</a>
    <div class="dropdown_2columns">
      <p>5 Columns content</p>
    </div>
  </li>
  <li><a href="#" onclick="return false;">Customer Support</a>
    <div class="dropdown_3columns">
      <p>5 Columns content</p>
    </div>
  </li>
  <li><a href="#" onclick="return false;">OrboNation</a>
    <div class="dropdown_4columns">
      <p>5 Columns content</p>
    </div>
  </li>
  <li><a href="#" onclick="return false;">Business Partners</a>
    <div class="dropdown_5columns">
      <p>5 Columns content</p>
    </div>
  </li>
  <li><a href="#" onclick="return false;">News &amp; Events</a>
    <div class="dropdown_6columns">
      <p>5 Columns content</p>
    </div>
  </li>
  <li><a href="#" onclick="return false;">Knowledge Center</a>
    <div class="dropdown_7columns">
      <p>5 Columns content</p>
    </div>
  </li>
</ul>

CSS

#menu {  
    position:relative !important;
    list-style:none;  
    width:100%;
    float:none;
    clear:both;
    margin:0;  
    height:43px;  
    padding:0;  
/* Rounded Corners */  

    -moz-border-radius: 5px;  
    -webkit-border-radius: 5px;  
    border-radius: 5px;  

    /* Background color and gradients */  

    background: #d9d9d9;  
    background: -moz-linear-gradient(top, #ddd, #d9d9d9);  
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddd), to(#d9d9d9));  

    /* Borders */  

    border: 1px solid #002232;  

    -moz-box-shadow:inset 0px 0px 1px #edf9ff;  
    -webkit-box-shadow:inset 0px 0px 1px #edf9ff;  
    box-shadow:inset 0px 0px 1px #edf9ff;  }  
#menu li {  
    float:left;  
    display:block;  
    text-align:center;  
    position:relative;  
    padding: 4px 10px 4px 10px;  
    margin-right:10px;  
    margin-top:7px;  
    border:none;  
}  
#menu li:hover {  
    border: 1px solid #777777;  
    padding: 4px 9px 4px 9px;  

    /* Background color and gradients */  

    background: #F4F4F4;  
    background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);  
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));  

    /* Rounded corners */  

    -moz-border-radius: 5px 5px 0px 0px;  
    -webkit-border-radius: 5px 5px 0px 0px;  
    border-radius: 5px 5px 0px 0px;  
} 

#menu li a {
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px; 
    color: #333;
    display:block;
    outline:0;
    text-decoration:none;
    text-shadow: 1px 1px 1px #000;
}

#menu li:hover a {
    color:#161616;
    text-shadow: 1px 1px 1px #FFFFFF;
}

.dropdown_1columns, 
.dropdown_2columns, 
.dropdown_3columns, 
.dropdown_4columns,
.dropdown_5columns,
.dropdown_6columns,
.dropdown_7columns {
    width:100% !important;
    margin:4px auto;
    position:absolute;
    z-index:999;
    left:-999em; /* Hides the drop down */
    text-align:left;
    padding:10px 5px 10px 5px;
    border:1px solid #777777;
    border-top:none;    
    /* Gradient background */
    background:#F4F4F4;
    background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
    /* Rounded Corners */
    -moz-border-radius: 0px 5px 5px 5px;
    -webkit-border-radius: 0px 5px 5px 5px;
    border-radius: 0px 5px 5px 5px;
}
/*
.dropdown_1columns {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}
.dropdown_6columns {width: 700px;}
.dropdown_7columns {width: 700px;}
*/
#menu li:hover .dropdown_1columns, 
#menu li:hover .dropdown_2columns, 
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns,
#menu li:hover .dropdown_6columns,
#menu li:hover .dropdown_7columns {

    left:-1px;top:auto;
}

链接到小提琴

http://jsfiddle.net/o7thwd/dZbPy/

我想要的是让每个下拉容器都是主菜单宽度的 100%,但左对齐

4

2 回答 2

3

当您position: relative#menu li中删除子菜单 div时,请参阅更新positionJSFiddleabsolute#menu

于 2013-10-29T16:43:31.013 回答
2

从. position:relative_ li这允许 dropdown_column 相对于 parent 定位ul。然后dropdown_columns使用 将 更改为跨越整个宽度left:-1px; right:-1px

看到这个JSFiddle

于 2013-10-29T16:44:46.710 回答