Question

我有一个全宽度的css菜单，该菜单可扩展整个屏幕，但是我不知道如何将各个子导航项放在父母的下面。

甚至可以做到吗？我在网上找不到任何可以让我完全做到这一点的东西，但是肯定有可能，不是吗？

顶级菜单项的数量需要可变，因此无论有多少，它都会相应地扩展。

链接到上面的JSFiddle，以查看到目前为止的内容。

html：

<div class="nav">
      <ul id="css3menu1" class="topmenu">
        <li class="link"><a href="/content/home.php">Home</a>
        </li>
        <li class="link"><a href="/content/products.php">Products</a>
          <ul>
            <li class="sublink"><a href="/content/products.php">Sub Products</a></li>
            <li class="sublink"><a href="/content/switchboards_distribution_panels.php">Switchboards</a></li>
          </ul>
        </li>
        <li class="link"><a href="/content/solutions.php">Solutions</a>
        </li>
        <li class="link"><a href="/content/case_studies.php">Case Studies</a>
        </li>
        <li class="link"><a href="/content/downloads.php">Downloads</a>
        </li>
        <li class="link"><a href="/content/careers.php">Careers</a>
        </li>
        <li class="link"><a href="/content/contact.php">Contact</a>
        </li>
      </ul>
    </div>

css：

ul#css3menu1,ul#css3menu1 ul{
    margin:0;
    list-style:none;
    padding:0;
    z-index:5000;
}
ul#css3menu1 ul{
    display:none;
    position:absolute;
    left:0;
    top:100%;
    padding:10px 10px 10px 10px;
    margin:0px 0 0 -13px;
  background-color:#fff;
}
ul#css3menu1 li:hover>ul{
    display:inline-block;
}
ul#css3menu1 li:hover li{
}
ul#css3menu1 li{
    display:table-cell;
    /*white-space:nowrap;*/
    font-size:0;
    color:#000;
}
ul#css3menu1 li:hover{
    z-index:1;
}
ul#css3menu1{
    font-size:0;
    z-index:999;
    position:relative;
    display:table;
  table-layout:fixed;
  width:100%;
    zoom:1;
    padding:0;
    *display:inline;
}
* html ul#css3menu1 li a{
    display:block;
}
ul#css3menu1>li{
    margin:0;
}
ul#css3menu1 .link a:active, ul#css3menu1 .link a:focus{
    outline-style:none;
}
ul#css3menu1 .link a{
    display:block;
    vertical-align:middle;
    text-align:center;
    text-decoration:none;
    font-size:14px;
    color:#777777;
    cursor:pointer;
    padding:23px 9px 24px;
    font-weight:bold;
    transition:all ease-in-out 0.4s;
    border-right:1px solid #eef1f1 !important;
  letter-spacing:0px;
}
ul#css3menu1 .link a:last-of-type{
    border-right:0;
}
ul#css3menu1 .link a.selected{
    background-color:#E4E8E8;
}
ul#css3menu1 .link a:hover{
    background-color:#E4E8E8;
    transition:all ease-in-out 0.4s;
}
ul#css3menu1 ul li{
    float:none;
    display:inherit;
    margin:10px 0 0;
}
ul#css3menu1 ul ul{
    margin-left:-10px;
}
ul#css3menu1 ul a{
    text-align:left;
    padding:4px;
    font:14px Tahoma;
    color:#FFF;
    text-decoration:none;
}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
    text-decoration:none;
}
ul#css3menu1 span{
    display:block;
    overflow:visible;
    background-position:right center;
    background-repeat:no-repeat;
    padding-right:0px;
}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{
    color:#666;
    text-decoration:none;
}
ul#css3menu1 li.topfirst>a{
    border-width:0;
}
ul#css3menu1 li.toplast>a{
    }

Answer 1

问题实际上不是您的代码或可能的问题。这就是CSS引用position: absolute的原点的方式。

原始值（如top / left）基于具有指定位置值的下一个父元素。如果链中没有明确定位的元素，则原点基于<body>元素。

|||| Element with position: absolute
||| - parent
|| - parent position: relative (this X/Y is used to position the element)
|

您只需要将导航容器定位。这是一个示例：

（注意：在示例中，我使用flexbox对齐菜单以使生活更轻松，ul和li也可以使用。此外，请将鼠标悬停在容器上，以便移至子内容将使菜单保持打开状态。）

nav {
    display:flex;
    justify-content: space-between;
}

.navItem {
    flex-basis: 1;
    background: #333333;
    color: #ffffff;
    margin: 0 1px;
    cursor:pointer;
    position: relative; // this is important to have
}

.navItem span {
    display:block;
    margin: 10px;
}

.subNav {
    position: absolute;
    top: 100%; // push to bottom of container
    left: 0;
    min-width: 100%;
    background: #555555;
    color: #ffffff;
    display:none;
}

.navItem:hover .subNav {
    display:block;
}

<nav>
    <div class="navItem">
        <span>Main Nav</span>
    </div>
    <div class="navItem">
        <span>Main Nav</span>
        <div class="subNav">
            <span class="subMenuItem">Sub 1</span>
            <span class="subMenuItem">Sub 2</span>
            <span class="subMenuItem">Sub 3</span>
            <span class="subMenuItem">Sub 4</span>
        </div>
    </div>
    <div class="navItem">
        <span>Main Nav</span>
    </div>
    <div class="navItem">
        <span>Main Nav</span>
        <div class="subNav">
                <span class="subMenuItem">Sub 1</span>
                <span class="subMenuItem">Sub 2</span>
                <span class="subMenuItem">Sub 3</span>
                <span class="subMenuItem">Sub 4</span>
            </div>
    </div>
    <div class="navItem">
        <span>Main Nav</span>
    </div>
</nav>

CSS全宽菜单，其相应条目下方带有下拉菜单

1 个答案: