Question

我正在创建标题宽度子菜单。我想将子菜单与其父菜单项对齐，但背景为标题宽度的100％。

由于菜单位于其父元素的位置，因此难以实现子菜单宽度达到标题的100％。

＆＃13;

.menu-main .menu .menu-item {
    position: relative;
}

.menu > li > ul {
    position: absolute;
    display: block;
    width: 100%;
    top: 150px;
    padding: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    background: #ffffff;
    border-radius: 0 0 3px 3px;
    -webkit-transition: all .3s ease .15s;
    -moz-transition: all .3s ease .15s;
    -o-transition: all .3s ease .15s;
    -ms-transition: all .3s ease .15s;
    transition: all .3s ease .15s;
}

＆＃13;

   <li class="menu-item withchildren">
         <a class="menu-link" href="/brandid">Brändid</a>
              <!-- this should be full width with white background -->
              <ul class="submenu">
                   <li class="menu-item">
                    <a class="menu-link" href="/brandid/rolf-benz">Rolf-Benz</a>
                  </li>
              </ul>
              <!-- end submenu -->
    </li>

＆＃13;

JSFiddle of situation：https://jsfiddle.net/wo66damx/2/

感谢您的投入！

Answer 1

    .menu {
position: relative;
display:inline-block;
width:100%; }

您可以将.menu类设置为width：100％;这对我有用。这是一个JSFiddle：https://jsfiddle.net/wo66damx/11/

Answer 2

因为你有javascript标签......

links=document.querySelectorAll('.menu-link');
for(i=0;i<links.length;i++) {
links[i].onmouseover = function() {

sub=this.parentNode.querySelector('.submenu');

if(sub!==null) {
//if should be aligned with header
sub.style.left=document.querySelector('.header').offsetLeft+'px';
//if should be aligned with link
//sub.style.left=this.offsetLeft+'px';
sub.style.width=document.querySelector('.header').offsetWidth+'px';
}
}

}

样本：

links=document.querySelectorAll('.menu-link');
for(i=0;i<links.length;i++) {
links[i].onmouseover = function() {

sub=this.parentNode.querySelector('.submenu');
//if should be aligned with header
if(sub!==null) {
sub.style.left=document.querySelector('.header').offsetLeft+'px';
//if should be aligned with link
//sub.style.left=this.offsetLeft+'px';
sub.style.width=document.querySelector('.header').offsetWidth+'px';
}
}

}

body {
  background:black;
  }

.header {
  width:500px;
  background:#fff;
}
.menu {
    
    display:inline-block;
  
}

li:hover > ul {
    opacity: 1;
    visibility: visible;
    overflow: visible;
}
li > ul {
  list-style-type:none;

    position: absolute;
    display: block;
    width: 100%; /* how can I get this 100% of header ? */
    top: 10px;
    padding: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    background: #ffffff;
    border-radius: 0 0 3px 3px;
    -webkit-transition: all .3s ease .15s;
    -moz-transition: all .3s ease .15s;
    -o-transition: all .3s ease .15s;
    -ms-transition: all .3s ease .15s;
    transition: all .3s ease .15s;
}

<div class="header">
<li class="menu withchildren">
      <a class="menu-link" href="/brandid">Brändid</a>
          <!-- this should be full width with white background -->
          <ul class="submenu">
               <li class="menu-item">
                <a class="menu-link" href="/brandid/rolf-benz">Rolf-Benz</a>
              </li>
              <li class="menu-item">
                <a class="menu-link" href="/brandid/rolf-benz">Rolf-Benz</a>
              </li>
          </ul>
          <!-- end submenu -->
</li>
<li class="menu withchildren">
      <a class="menu-link" href="/brandid">Brändid</a>
          <!-- this should be full width with white background -->
          <ul class="submenu">
               <li class="menu-item">
                <a class="menu-link" href="/brandid/rolf-benz">Rolf-Benz22222222</a>
              </li>
          </ul>
          <!-- end submenu -->
</li>
</div>

此外，你必须删除位置：相对于.menu-link，所以.submenu位置可以相对于正文计算...也许纯CSS解决方案也是可能的（但是有一些HTML重构）

Answer 3

您还可以单独构建菜单和子菜单。为您提供喜欢的选择。并为您提供针对移动设备的flexibel构建选项。这是q非常基本的模型。

<header>
  <!-- head nav -->
  <ul class="menu">
   <li><a href="#" id="click1" class="item1">Link 1</a></li>
   <li><a href="#" id="click2" class="item2">Link 2</a></li>
</ul>
<!-- sub nav dropdowns -->
<div id="link1" class="drop1 pos">
 <ul class="submenu">
   <li><a href="http://www.google.com">Sub 1</a></li>
   <li><a href="http://www.google.com">Sub 2</a></li>
 </ul>
</div>
<div id="link2" class="drop2 pos">
 <ul class="submenu">
   <li><a href="http://www.google.com">Sub 1</a></li>
   <li><a href="http://www.google.com">Sub 2</a></li>
 </ul>

js dropdown jsfiddle

实际宽度子菜单标题的宽度为

3 个答案: