Question

我在设计基本导航时遇到了麻烦。

我希望导航菜单颜色为灰色，当它悬停在上面时转向带有底部边框的绿色。它也会在悬停时跳转。我试图在边框底部添加：透明;但我认为它被覆盖了。我玩过关于移动代码和标签似乎是罪魁祸首，但我不知道如何解决它。因此所有的风格。

HTML

<body>
<div class="header">
    <a href="#"><img class="Logo" alt="Rigare logo" src="logoweb_1.1.png"/></a>
        <div class="nav">
            <ul>
                <li><a href="#">About</a></li>
                <li><a href="#">Technical Capabilities</a></li>
                <li><a href="#">Staff and Associates</a></li>
                <li><a href="#">Courses</a></li>
                <li><a href="#">Products and Hire</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
</div>

CSS

    .header {
    padding-top: 16px;
}


.logo {
    float: left;
}

.nav {
    display: inline-block;
    vertical-align:top; 
    margin: 0;
    padding: 10px 0;
    text-align: center;
    color: #70B0A8;
    background: #fff;
}

.nav li{
  display: inline;
  text-align: right;
  color: #70B0A8;
  font-size: 20px;
  font-weight: 700;
  margin-right: 60px;
  height: 100px;
  opacity: 0.6;
  border-bottom: transparent;
}

.nav li:hover {
    color: #97A6AA;
    border-bottom: 1px solid #97A6AA;
    cursor: pointer;
    padding: 10px;
}

a {
    text-decoration: none;
}

.nav a {
    color: #70B0A8;
}

Here is a fiddle to see what I'm talking about.

Answer 1

悬停样式的填充导致它跳转。

将.nav li：hover替换为以下内容。

.nav li:hover a{
    color: #97A6AA;
    text-decoration: underline;
    cursor: pointer;
}

https://jsfiddle.net/c1egheLy/

Answer 2

您已定义

.nav a {
    color: #70B0A8;
}

在CSS的末尾肯定会覆盖您的:hover效果，并且您还为:hover而不是.nav li:hover {定义.nav li:hover a {颜色不是在a内为li标记定义悬停效果的正确方法。

此外，您应首先为border-bottom标记定义padding和li，而不是:hover，以防止跳跃问题。< / p>

您必须更改CSS，如下面的Snippet。

代码段

a {
  text-decoration: none;
}

.header {
  padding-top: 16px;
}

.logo {
  float: left;
}

.nav {
  display: inline-block;
  vertical-align: top;
  margin: 0;
  padding: 10px 0;
  text-align: center;
  color: #70B0A8;
  background: #fff;
}

.nav li {
  display: inline;
  text-align: right;
  color: #70B0A8;
  font-size: 20px;
  font-weight: 700;
  margin-right: 60px;
  height: 100px;
  opacity: 0.6;
  padding: 10px;
  border-bottom: 1px solid transparent;
}

.nav li a {
  color: #70B0A8;
}

.nav li:hover {
  border-bottom-color: #97A6AA;
  cursor: pointer;
}

.nav li:hover a {
  color: #97A6AA;
}

<body>
  <div class="header">
    <a href="#"><img class="Logo" alt="Rigare logo" src="logoweb_1.1.png" /></a>
    <div class="nav">
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Technical Capabilities</a></li>
        <li><a href="#">Staff and Associates</a></li>
        <li><a href="#">Courses</a></li>
        <li><a href="#">Products and Hire</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>

Answer 3

因此，您可以在悬停时删除填充，只需更改CSS以满足您的需要，如下所示：

.header {
        padding-top: 16px;
    }


    .logo {
        float: left;
    }

    .nav {
        display: inline-block;
        vertical-align:top;
        margin: 0;
        padding: 10px 0;
        text-align: center;
        color: #70B0A8;
    }

    .nav li{
        display: inline;
        text-align: right;
        color: grey;
        font-size: 20px;
        font-weight: 700;
        margin-right: 60px;
        height: 100px;
        opacity: 0.6;
        border-bottom: transparent;
    }

    .nav li a:hover {
        color: #70B0A8;
        border-bottom: 1px solid #97A6AA;
        cursor: pointer;
    }

    .nav a {
        color: grey;
        text-decoration: none;
    }

<div class="header">
    <a href="#"><img class="Logo" alt="Rigare logo" src="logoweb_1.1.png"/></a>
    <div class="nav">
        <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Technical Capabilities</a></li>
            <li><a href="#">Staff and Associates</a></li>
            <li><a href="#">Courses</a></li>
            <li><a href="#">Products and Hire</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</div>

我有点感到困惑，为什么你的菜单链接旁边没有你的徽标，但这只是将<img>移动到<class="nav">但是在这个实例中你需要添加{{ 1}}到width:100%; CSS

Answer 4

在代码中替换此行

.nav li:hover {
    color: #97A6AA;
    border-bottom: 1px solid #18961d; //Green Color
    cursor: pointer;
    /* padding: 10px; */ //Remove this padding line
}

我希望这有帮助..

导航上的CSS样式问题

4 个答案:

代码段