Question

这是我正在处理的网站：

到目前为止，我已经从HTML构建了它，它是在wordpress上。正如你所看到的，当你悬停时，会产生一种效果，但它看起来很糟糕。我喜欢它，所以特定链接周围的整个橙色菜单区域会改变颜色。所以它看起来更像是一个“块”，而不仅仅是一个概述的文本。

出于某种原因，我很难做到这一点，我不知道为什么。这是代码，非常感谢任何帮助：

HTML / PHP：

<nav class="main-nav">
    <div class="container-non-responsive">
    <?php 
    wp_nav_menu(array(
        'theme_location' => 'main-menu',
        'container-non-responsive' => '',
        'menu_class' => 'inline'
    )); 
    ?>
    </div>
</nav>

CSS：

.main-nav {
width: 100%;
height: 66px;
background-color: @nav-bar;

ul {

    li {
        font-size: 24px;
        font-family: 'Ubuntu Condensed', sans-serif;
        text-transform: uppercase;
        a {
            color: @nav-text;

            &:hover {
                background-color: #cb4800;
                text-decoration: none;
            }
        }
    }
}
}

注意：此CSS没有我的黑客尝试修复它。我尝试添加一些高度，但它在菜单上没有很好的平衡。

我会非常感谢任何关于我可以尝试的新方向的想法。谢谢！

Answer 1

尝试

.main-nav {
width: 100%;
height: 66px;
background-color: @nav-bar;
}

ul li {
        font-size: 24px;
        font-family: 'Ubuntu Condensed', sans-serif;
        text-transform: uppercase;
       }
ul li a {
     color: @nav-text;
     }
ul li a:hover {
     background-color: #cb4800;
     text-decoration: none;
            }

在jsfiddle

工作

Answer 2

这是一个潜在的解决方案。这种方法的关键是使li元素填充导航栏的整个高度。我已经通过使用导航栏的line-height属性完成了这项工作，而不是在其上设置绝对高度，然后是填充或边距以使文本位于正确的垂直位置。

潜在的下降是菜单项将突出显示但不一定是可点击的 - 因为鼠标悬停在li元素上，但尚未超过a元素。

JSFiddle：http://jsfiddle.net/hstB2/2/

<强> CSS：

#navBar
{
    line-height: 66px;
    background-color: #ff831d;
    text-transform: uppercase;
    font-size: 32px;
}
#navBar ul
{
    list-style: none;
}
#navBar ul li
{
    display: inline-block;
    padding: 0 16px;
}

#navBar ul li:hover
{
    background-color: #cb4800;
}
#navBar ul li a
{
    text-decoration: none;
    color: white;
}

HTML：

<div id='navBar'>
    <ul>
        <li><a href='#'>home</a></li>
        <li><a href='#'>about us</a></li>
        <li><a href='#'>clients</a></li>
        <li><a href='#'>contact us</a></li>
    </ul>
</div>

Answer 3

尝试以下方法。移除main-nav上的固定高度，然后移除li上的上边距，然后在a的顶部和底部添加填充。

.main-nav {
  width: 100%;
  /* height: 66px;  Remove */
  background-color: @nav-bar;

  ul {

    li {
      font-size: 24px;
      font-family: 'Ubuntu Condensed', sans-serif;
      text-transform: uppercase;
      margin-top: 0; /* Add */
      a {
        color: @nav-text;
        display: block; /* Add */
        padding: 20px 0; /* Add */

        &:hover {
            background-color: #cb4800;
            text-decoration: none;
        }
      }
    }
  }
}

清除悬停在菜单上的效果

3 个答案: