Question

使用100％的正文创建一个无序列表，而不是显示的父li：inline-block（mega下拉菜单）。

我知道width : 100%使该元素的宽度为父级的100％。现在我正在尝试制作一个超级下拉菜单。如果我将100％放在子菜单上，我会得到ul然后li然后ul以获得子菜单我想它将是li的100％（这就是我现在有）。我希望它是身体的100％或者与顶部nav.ul大小相同所以我有问题找出如何将宽度扩展到身体的100％或上部ul。我知道我可以用px设置子菜单的宽度，并留下一个负边距来定位它（这看起来很乱）。我想知道如何制作这种巨大的下拉效果。 ul.submenu的li或a标签可能不会再存在我将放置div所以我可以放置图像文本框等。

基本上在下面的代码中，我无法将width: 100%;中的.container ul ul.sub置于100％的正文或顶级ul。我想做那样的事情

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>myDrop</title>
    <script src="jquery.js"></script>
    <script>
        $(function(){

        })
    </script>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
        .container{
            background: black;
        }
        .container ul > li{
            display: inline-block;
            list-style-type: none;
            position: relative;
        }
        .nav a{
            display: block;
            padding: 0 10px;
            font-size: 20px;
        }
        .container ul ul.sub{
            position: absolute;
            overflow: hidden;
            height: 0;
            opacity: 0;
            left: 0;
            width: 100%;
            list-style-type: none;
            padding: 0;
            /*background: red;*/
        }
        .container ul li:hover > ul{
            display: list-item;
            opacity: 1;
            height: 700%;
            /*top: 60px;*/
        }
        .nav li{
            position: relative;
        }
        .nav li ul{
            position: absolute;
            left: 0;
            background: red;
        }
        .nav li ul li{
            list-style-type: none;
        }
        .container a{
            color:white;
            text-decoration: none;
            list-style-type: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <ul class="nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Success</a>
                <ul class="sub">
                    <li><a href="#">Success Submenu</a></li>
                    <li><a href="#">Success Submenu</a></li>
                </ul>
            </li>
            <li><a href="#">Entrepeneurship</a>
                <ul class="sub">
                    <li><a href="#">Entrepeneurship submenu</a></li>
                    <li><a href="#">Entrepeneurship submenu</a></li>
                </ul>
            </li>
            <li><a href="#">Career</a>
                <ul class="sub">
                    <li><a href="#">Career Submenu</a></li>
                    <li><a href="#">Career Submenu</a></li>
                </ul>
            </li>
            <li><a href="#">Motivation</a>
                <ul class="sub">
                    <li><a href="#">Motivation Submenu</a></li>
                    <li><a href="#">Motivation Submenu</a></li>
                </ul>
            </li>
            <li><a href="#">Videos</a>
                <ul class="sub">
                    <li><a href="#">Videos Submenu</a></li>
                    <li><a href="#">Videos Submenu</a></li>
                </ul>
            </li>
            <li><a href="#">Quotes</a>
                <ul class="sub">
                    <li><a href="#">Quotes Submenu</a></li>
                    <li><a href="#">Quotes Submenu</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

Answer 1

我添加了

    .nav{
        position: relative;
    }

＆＃13;

*{
  margin: 0;
  padding: 0;
}
.container{
  background: black;
}
.container ul > li{
  display: inline-block;
  list-style-type: none;
  /*position: relative;*/
}
.nav{
  position: relative;
}
.nav a{
  display: block;
  padding: 0 10px;
  font-size: 20px;
}
.container ul ul.sub{
  position: absolute;
  overflow: hidden;
  height: 0;
  opacity: 0;
  left: 0;
  width: 100%;
  list-style-type: none;
  padding: 0;
  /*background: red;*/
}
.container ul li:hover > ul{
  display: list-item;
  opacity: 1;
  height: 400%;
  /*top: 60px;*/
}
.nav li{
  /*position: relative;*/
}
.nav li ul{
  position: absolute;
  left: 0;
  background: red;
}
.nav li ul li{
  list-style-type: none;
}
.container a{
  color:white;
  text-decoration: none;
  list-style-type: none;
}

＆＃13;

<div class="container">
  <ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Success</a>
      <ul class="sub">
        <li><a href="#">Success Submenu</a></li>
        <li><a href="#">Success Submenu</a></li>
      </ul>
    </li>
    <li><a href="#">Entrepeneurship</a>
      <ul class="sub">
        <li><a href="#">Entrepeneurship submenu</a></li>
        <li><a href="#">Entrepeneurship submenu</a></li>
      </ul>
    </li>
    <li><a href="#">Career</a>
      <ul class="sub">
        <li><a href="#">Career Submenu</a></li>
        <li><a href="#">Career Submenu</a></li>
      </ul>
    </li>
    <li><a href="#">Motivation</a>
      <ul class="sub">
        <li><a href="#">Motivation Submenu</a></li>
        <li><a href="#">Motivation Submenu</a></li>
      </ul>
    </li>
    <li><a href="#">Videos</a>
      <ul class="sub">
        <li><a href="#">Videos Submenu</a></li>
        <li><a href="#">Videos Submenu</a></li>
      </ul>
    </li>
    <li><a href="#">Quotes</a>
      <ul class="sub">
        <li><a href="#">Quotes Submenu</a></li>
        <li><a href="#">Quotes Submenu</a></li>
      </ul>
    </li>
  </ul>
</div>

＆＃13;

为（巨型下拉列表）制作无序列表

1 个答案: