Html 与父导航具有相同宽度的下拉导航

我已经尝试过“width:100%；”，但是下拉元素会得到与整个页面相同的宽度。我正在使用浮动，所以可能需要一种不同的方法

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

以下是navi的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>

---

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

#子菜单{
显示：无；
}
#foo：悬停~#子菜单foo{
显示：块；
}

---

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

我使用了

宽度：100%

，因此它将根据父ul进行更改。您需要的是更改宽度：100%和位置：相对或父li（.navi li），然后我删除了右边的边距，因为它是额外的，您得到了结果

已更新 由于我使用了

位置：相对
所以宽度：100在边界内取宽度，所以您缺少2px间隙，所以仅针对解决方法，我使用了
宽度：101%
。请检查我最新的小提琴

如果这是你需要的，请告诉我。谢谢：）
在ul上使用宽度：100%，然后在父li上使用位置：相对。只要去掉小李身上多余的填充物，你就完成了。看这个..当我完成后，我会发布答案。。谢谢你的回答。我检查了你的小提琴，但与你的建议不符。我仍然在“.nav元素li ul”中看到“宽度：9.25em”。然而，我接受了你的意见并把它放进了计算机。它看起来更好，而且不需要固定的宽度，所以向前跨了一大步！：）父元素的宽度和dropwdown的宽度之间仍然有一点差距。你能看到还有什么不对劲吗？我已经在leo的css评论下添加了我的css。好的，给我2分钟的时间。非常感谢！您的更改是必需的：.navi li{position:relative；}.nav elements li ul{width:101%；}.nav elements ul li{margin right:0px；}附录：为了使下拉列表元素完美对齐，我必须添加：.align{margin right:-2px；}=>“.align”是我分配给第一个下拉列表（“正在进行的故事”）中的“li”元素的一个类。第二个下拉列表（“睡眠故事”）不需要这种调整。如果有人知道为什么我很高兴能得到帮助，但我可以接受这种解决方法。@ashilf，正如我告诉你的，我使用了位置：绝对，然后使用了宽度：100%，所以它只会在边界内占到宽度，这就是为什么你必须添加-2px以实现完美对齐。
.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;
}