Question

我已经尝试过“宽度：100％;”但是下拉元素的宽度与整个页面的宽度相同。我正在使用花车，所以也许需要采用不同的方法？

我发誓我已经看过类似的问题，但没有一个解决方案适合我。谁能看到我做错了什么？您可以找到包含所有代码here的jsfiddle。我目前用固定宽度“解决”了这个问题。

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

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或者父李（.navi li），然后我删除了margin-right，因为它是额外的，你得到了结果。

<强>更新因为我使用了position:relative所以宽度：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>

- 请注意差距

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

2 个答案: