0

我正在尝试修复我的下拉菜单，但我遇到了突出显示的颜色和背景颜色/大小的问题。

当我将它悬停时，它并没有像我想要的那样用橙色覆盖整个按钮，并且它在我不希望它的背景中留下了一些灰色。

问题之一可能是我为移动设备和计算机使用了 2 个样式表。

HTML：

<div id="nav">
  <ul id="menu">
    <li id="active"><a href="index.html" id="current">Home</a></li>
    <li><a href="about.html">About Revelstoke</a></li>
    <li><a href="#">Ticker Rates</a></li>
    <li><a href="#">Snow School</a>
      <ul id="sub-menu">
        <li><a href="#">Kids Lessons</a></li>
        <li><a href="#">Adult Lessons</a></li>
        <li><a href="#">First Tracks</a></li>
      </ul>
    </li>
    <li><a href="#">Weather</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Trail Maps</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>  
</div><!--close nav-->

CSS（计算机）：

#nav {
    background-color:#eee;
    height: 33px;
    border-top: solid black 2px;
    border-bottom: solid black 2px;
    min-width: 1000px;
}

#nav #active a {
    font-weight: bold;
    color: #ffffff;
    background-color: #0160a2;
    padding: 5px 15px 8px 15px;
}

#nav ul {
    text-align: left;
    font-size: 18px;
    background-color: #eee;
}

#nav ul li {
    display: block;
    position: relative;
    float: left;
    line-height: 24px;
}

#nav ul li a {
    display:inline;
    padding:5px 10px 8px 10px;
    background-color: #eee;
}

#nav li ul {
    display: none;
}

#nav li:hover ul {
    display: block;
    position: absolute;
    margin-top: 6px;
    padding: 0;
    width: 97px;
    height: 82px;
}

#nav li:hover li {
    font-size: 14px;
}

#nav ul li a:hover {
    background-color: #ff8a00;
    color: #000000;
}

#nav ul li ul li a{
    padding:5px;
}

#nav ul li ul li a:hover{
    padding:5px;
    width: 97px;
    height: 82px;
}

CSS（移动）：

#nav {
    background-color:#eee;
}

#nav ul {
    text-align:center;
    font-size: 18px;
}

#nav ul li {
    list-style-type:none;
    border-top: 3px solid white;
}

#nav ul li a {
    color: #000000;
    display:block;
    padding:13px 0;
    text-decoration:none;
    font-weight: bold;
}

#nav ul li a:hover {
    background-color: #0096ff;
    font-weight: bold;
    color: white;
}

#nav #active a {
    background-color: #01385e;
    font-weight: bold;
    color: white;
}
4

1 回答 1

0

如果我理解你的问题，这应该是一个解决方案http://jsfiddle.net/GcDGv/2/（我只为非移动 CSS 工作），这就是我修复它的方法：

  1. 我height从与sub-menu. 它们可以自动计算。

  2. 将元素的更改为，width因此现在它们将使用整个区域。lisub-menu100%

  3. 将链接sub-menu作为block元素制作，因此顶部和底部的边距/填充将按您的意愿工作。并从最后一个样式中删除width和height属性ul li ul li a:hover

于 2013-06-09T20:20:17.033 回答