Question

我发现将div的宽度设置为100％将使其宽度与其父级相同，但是可能（可能使用CSS选择器）将其设置为等于父级3级以上吗？我想制作一个像这样的大型菜单：http://www.thenorthface.com/en_US/index.html 我试图使div与导航栏的大小相同。

我也试过使用类名并使用javascript来设置div宽度。控制台中没有错误，所以我认为我的CSS可能会覆盖它，尽管我没有设置宽度值。

var navbarwidth = document.getElementById('nav-width').offsetWidth;
var megadropdown = document.getElementById('menu1');
megadropdown.style.width = navbarwidth;

Answer 1

为什么不把div放在其曾祖父母的内部，然后用javascript打开它？

即

<nav-bar>
   <drop-downs>
       <drop-down-1>
       <drop-down-2>
   </drop-downs>
   <menus>
       <menu-item1>
       <menu-item2>
   </menus>
</nav-bar>

并使其在单击下拉列表时显示menu-item-1

Answer 2

为什么你的导航栏下面没有mega_drop，并将它们设置为相同的宽度，如此响应..

<nav>
  <ul>
     <li id="link1">Link One<li>
     <li id="link2">Link Two<li>
     <li id="link3">Link Three<li>
  </ul>
</nav>

<div id="menu-container">
  <div id="menu-1">
  <div id="menu-2">
  <div id="menu-3">
</div>

然后你的css将是：

nav{
  width: 80%;
  margin: 0 auto;
}

#menu-container div{
    width: 80%;
    margin: 0 auto;
    display: none;

}

ul.li#linkx:hover #menu-x{
    display: block;

}

这样您就不需要任何js，您还可以添加媒体查询来更改不同大小屏幕的超级菜单的整体大小。它确实需要更多的CSS，因为你必须为每个Nav Bar链接编写悬停状态。

CSS - 设置div宽度等于其“曾祖父母”的宽度

2 个答案: