Question

我正在为我兄弟的新管道公司工作，我的导航菜单有两个问题。我从一个教程网站复制了一些CSS并尝试根据我的喜好对其进行修改，但我无法弄清楚为什么会这样。当我将鼠标悬停在顶级菜单项（在这种情况下为“服务”）时，子菜单会出现，但LI的背景会延伸到屏幕之外。我已经尝试在CSS的不同区域更改/设置宽度，但是我的有限知识让我感到头疼。我有一个临时站点，但我在本地使用Media Queries测试这个新版本。

我不会发布没有10个声望的屏幕截图，所以这里有一个链接：http://www.sourceplumbing.com/Capture.png

HTML：

<nav>
  <ul>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Services</a>
      <ul>
        <li><a href="#">Leak Detection</a></li>
        <li><a href="#">Water Heaters</a></li>
        <li><a href="#">Plumbing Fixtures</a></li>
      </ul>
    </li>
    <li><a href="#">Reviews</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

CSS：

nav ul li:hover > ul {
display: block;
}
nav ul {
    width:100%;
    height:auto;
    min-width:550px;
    background: -webkit-linear-gradient(#d5d5d5, #595959); /* For Safari */
    background: -o-linear-gradient(#d5d5d5, #595959); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#d5d5d5, #595959); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#d5d5d5, #595959); /* Standard syntax */
    -webkit-border-radius: 25px;
    -o-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    font-size: 16px;
    font-family: "Times New Roman", Times, serif;
    font-weight: bold;
    text-align: center;
    text-shadow: 2px 2px 2px #cccccc;
    text-decoration:none;
    list-style: none;
    position: relative;
    display: table;
}
nav a:link, a:visited {
    text-decoration: none;
    color: #000000;
    padding: 8px 0px 8px 8px;
}
nav ul:after {
    content: "";
    clear:both;
    display: block;
}
nav ul li {
    display:inline-block;
    width:auto;
}
nav ul li:hover a {
    text-decoration:none;
    color: #fff;
}
nav ul li a:link, a:visited {
    display: block;
    padding: 5px;
    color:#000;
    text-decoration: none;
}
nav ul ul {
    background: #999;
    border-radius: 0px;
    padding: 0;
    position: absolute;
    width:150px;
}
nav ul ul li {
    width:150px;
    border-top: 1px solid #ccc;
    position: relative;
    display:block;
}
nav ul ul li a {
    width:150px;
    padding: 5px;
    text-align:left;
    color:#000;
    display:block;
}   
nav ul ul li a:hover {
    color:#FFF;
}

我确实有另一个问题，但如果我能解决这个问题，我会接下来再进行讨论。我很感激您提供的任何帮助！

Answer 1

您要找的是min-width: 550px;。这导致所有<ul>扩展到最小宽度550px。

解决这个问题将解决问题。我想那是nav阻止它变小，在这种情况下你应该将它放在nav而不是nav ul下。

DEMO HERE

将min-width放在正确的位置：

nav {
    min-width: 550px;
}

DEMO HERE

CSS导航子菜单帮助...块关闭屏幕

1 个答案: