Question

我是 html 和 css 的新手，但我很挣扎...（顺便说一句，我很抱歉我的英语）

我有很多问题：

当我将光标移到子菜单上时，它会激活悬停
由于padding，过渡效果的结尾不正确，但我无法更改设计，我不知道该怎么办
下划线效果的宽度覆盖整个 li 而我只想要它在链接下
下划线仅在光标在链接上而不在 li 上时出现

CSS 和 HTML

      #menu ul {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-evenly;
        list-style: none;
        position: fixed;
        background-color: transparent;
        z-index: 90;
        font-size: 15px;
        letter-spacing: 0.26em;
        line-height: 69.6px;
        margin-top: 0;
      }

      #menu ul li {
        display: inline-block;
        vertical-align: top;
        text-align: center;
        background-color: white;
      }

      #menu .logo_area{
        background-color: transparent;
      }

      #menu .logo_area img {
        vertical-align: middle;
      }

      #menu li .sous {
        display: block;
        position: relative;
        height: 0px;
        padding: 0px 24px;
        opacity: 0;
        transition: 0.2s 
      }

      #menu > ul li:hover .sous {
        padding: 28px 24px;
        height: auto;
        opacity: 100;
      }

      #menu ul li .vide {
        width: 122px;
        padding: 0px 24px;
      }

      #menu li:hover > .vide {
        padding: 10px 24px;
        height: auto;
        visibility: inherit;
      }

      #menu ul li .sous li {
        display: block;
        text-align: center;
        line-height: 30px;
        padding: 5px 0px;
        transition: padding 3s linear, height .2s linear, opacity .2s linear;
      }

      #menu ul li .sous #br {
        line-height: 20px;
      }

      a {
        text-decoration: none;
      }
      /* unvisited link */
      a:link {
        color: #1f2439;
      }

      /* visited link */
      a:visited {
        color: #1f2439;
      }

      /* mouse over link */
      a:hover {
        color: #1f2439;
      }

      /* selected link */
      a:active {
        color: #1f2439;
      }

      #menu ul li a:after {
        content: '';
        display: block;
        margin: auto;
        height: 1px;
        width: 0px;
        background: transparent;
        transition: width .5s ease, background-color .5s ease;
      }
      #menu ul li a:hover:after {
        width: 50%;
        background: #1f2439;
      }

      #menu ul li .sous a:hover:after {
        width: 100%;

<nav id="menu">
      <ul class="roboto" style="width: 85%">
        <li>
          <a href="">Fruit</a>
          <ul class="sous">
            <li><a href="#expertises">Apple</a></li>
            <li><a href="#valeurs">Banana</a></li>
            <li><a href="#metiers">Orange</a></li>
            <li><a href="#equipe">Strawberry</a></li>
          </ul>
        </li>
        <li>
          <a href="">Vegetable</a>
          <ul class="sous">
            <li id="br">
              <a class="sousli" href="#">Beans</a>
            </li>
            <li><a class="sousli" href="#">Courgette</a></li>
            <li><a href="#">Eggplant</a></li>
          </ul>
        </li>
        <li class="logo_area">
          <a href="">
            <img
              src="/img.png"
              alt=""
            />
          </a>
        </li>
        <li>
          <a href="">Sport</a>
          <ul class="sous">
            <li><a href="#">Dance</a></li>
            <li><a href="#">Tennis</a></li>
          </ul>
        </li>
        <li>
          <a href="">Info</a>
          <ul class="sous vide">
            <li><a href="#"></a></li>
          </ul>
        </li>

        <li><a href="">Eng</a></li>
      </ul>
    </nav>
    <div class="rectangle" style="height : 250px; width : 100%; background-color : beige; "></div>

这不是真正的结果，因为我删除了一些东西，但你可以看到问题。（米色矩形只是在这里我们可以看到下拉菜单）

拜托，有人能帮我吗...我正在失去希望:(

导航栏悬停动画效果问题

0 个答案: