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

Question

我已经尝试过"width:100%；"，但下拉元素的宽度与整个页面的宽度相同。我在用花车，所以可能需要一种不同的方法？

我发誓我看过类似的问题，但没有一个解决方案对我有效。有人能看出我做错了什么吗？您可以在这里找到包含所有代码的jsfiddle。我目前用一个固定的宽度"解决"了这个问题。

这是导航的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

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

我已经使用了width:100%，所以它会根据父级ul而变化。你需要的是更改宽度：100%和position:relative或父li（.navi-li），然后我删除了边距，因为它是多余的，你就得到了结果。

更新由于我使用了position:relative，所以width:100取边界内的宽度，所以您缺少2px间隙，所以为了解决问题，我使用了width:101%。请检查我更新的小提琴。

如果这是你需要的，请告诉我。谢谢：）

Answer 2

你的第二个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>

--请注意的间隙