与父导航宽度相同的下拉导航

Question

我已经试过了 "width: 100%;" 但是下拉元素的宽度与整个页面的宽度相同。我正在使用浮点数，所以可能需要不同的方法？

我发誓我看过类似的问题，但是 none 那里的解决方案对我有用。谁能看到我做错了什么？您可以找到包含所有代码的 jsfiddle here。我目前"solved"固定宽度的问题

这里是导航的HTML：

<nav role="navigation" class="navi"> 
            <ul class="nav-elements">
                <li><a href="./index.html" title="The Homepage of Story Bat" class="current" tabindex="1">Home</a></li>
                <li><a href="./active-stories/index.html" title="Active Stories" tabindex="2">Ongoing Stories</a>
                    <ul>
                        <li><a href="" title="">Sublink</a></li>
                        <li><a href="" title="">Another Sublink with a long text</a></li>
                    </ul>
                </li>
                <li><a href="./sleeping-stories/index.html" title="Sleeping Stories" tabindex="3">Sleeping Stories</a>
                    <ul>
                        <li><a href="" title="">Sublink</a></li>
                        <li><a href="" title="">Another Sublink</a></li>
                    </ul>
                </li>
                <li><a href="./news/index.html" title="Updates about Story Bat" tabindex="4">News</a></li>
                <li><a href="./about-faq/index.html" title="Information about Story Bat" tabindex="5">About/FAQ</a></li>
            </ul>
        </nav>

和CSS：

.navi {
    float: left;
    margin-bottom: 0.5em;
}
.navi ul {
    padding-left: 0; /* Navi aligned left */
    margin: 0;
}
.navi li {
    background: #808080;
    float: left;
    padding: 0.2em 0.8em 0.2em 0.8em;
    border: 1px solid black;
    margin: 0 0.4em 0.4em 0;
    list-style: none;
    font-size: 1.2em;
    border-radius: 10px;
}
/* nav-elements for dropdown-menus */
.nav-elements ul {
    margin-top: 0.2em;
    padding: 7px 10px 0 0;
}
.nav-elements li ul {
    position: absolute;
    left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
    z-index: 1000;
    width: 9.25em;
    margin-left: -0.85em; /* to counter the padding in .navi li */
}
.nav-elements li:focus, 
.nav-elements li:hover { /* main navi gets shadow while dropdown is active */
    text-shadow: 0 0 7px rgba(255,255,255,.5); /* kind of a glow effect */
}
.nav-elements li:focus ul, /* show the submenu when user focues (e.g. via tab) the parent li [doesn't work?]*/
.nav-elements li:hover ul { /* show the submenu when user hovers over the parent li */
    left:auto; /* Bring back on-screen when needed */
    text-shadow: none; /* dropdown doesn't inherit shadow from main-navi*/
}
.nav-elements ul li {
    float: none;
    font-size: .9em;
}

Answer 1

你的第二个 ul 元素可以和它周围的 li 元素一样宽。试试这个：

#subMenuFoo {
  display: none;
}

#foo:hover ~ #subMenuFoo {
  display: block;
}

<div class="nav-elements">
  <a href="" id="foo">foo</a>
  <div id="subMenuFoo">
    <a href="">bar</a>
  </div>
</div>

-- 请注意差距

Answer 2

根据您的问题，您不想使用固定宽度，那么请查看我的 Updted fiddle

我用过width:100%所以会根据父级的ul改变。你需要的是更改 width:100% 和 position:relative 或父 li(.navi li) 然后我删除了 margin-right 因为它是额外的并且你得到了结果。

已更新 因为我使用了 position:relative，所以 width:100 占用了边框内的宽度，因此您缺少 2px 的间隙，所以我使用了 width:101% 作为解决方法。请检查我更新的 fiddle.

如果您需要，请告诉我。谢谢:)

与父导航宽度相同的下拉导航

Dropdown navigation with same width as parent navigation

html

css

navigation

drop-down-menu