html 我正试图将我的菜单和链接内的菜单向左移动，我正试图添加一个箭头图标旁边的'Maven'

vyswwuz2 于 2023-09-28 发布在 Maven

关注(0)|答案(2)|浏览(142)

我试着修改我的代码，并添加自定义箭头图标动画代码到VS代码，但我不能让它显示在我想要使用CSS。我希望图标表明，有一个下拉菜单，当你在'Maven'悬停。此外，我曾尝试使用margin功能来重新定位下拉菜单和链接，但我无法让它工作，所以我删除了我所做的大部分更改。

nav ul {
    background-color: lightgray;
    display: flex;
    list-style: none;
    overflow: visible;
  }
  
nav ul li {
    margin-right: 20px;
    position: relative;
  }

nav ul li a {
    letter-spacing: 1px;
    font-size: 20px;
    background-color: lightgray;
    color: black;
    text-decoration: none;
  }

nav ul li a:hover{
    color: white;
  }

  /* Style the dropdown menu */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Style the dropdown content */
.dropdown-content {
  display: flex;
  flex-direction: column;
  position: absolute;
  background-color: lightgray;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  transition: transform .25s ease-in;
  transform: scale(0.1, 0.1);
  transform-origin: 0 0;
  opacity: 0;
}

/* Style the dropdown links */
.dropdown-content a {
  color: #333;
  padding: 12px 18px;
  text-decoration: none;
  display: block;
  font-size: 14px;
}

/* Change color on hover */
.dropdown-content a:hover {
  background-color: grey;
}

/* Show the dropdown content when hovering over the dropdown */
.dropdown:hover .dropdown-content {
  opacity: 1;
  transform: scale(1, 1);
}

<nav>
  <ul>
    <li><a href="index.html">Our Story</a></li>
    <li class="dropdown">
      <a href="#">Specialists</a>
      <ul class="dropdown-content">
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 2</a></li>
        <li><a href="#">Option 3</a></li>
      </ul>
    </li>
    <li><a href="#">Training</a></li>
    <li><a href="#">DBS</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Html

来源：https://stackoverflow.com/questions/77148684/i-am-trying-to-move-my-dropdown-menu-and-the-links-within-the-dropdown-towards-t

2条答案

按热度按时间

dgjrabp21#

您在找这样的东西吗？

nav ul {
    background-color: lightgray;
    display: flex;
    list-style: none;
    overflow: visible;
  }
  
nav ul li {
    margin-right: 20px;
    position: relative;
  }

nav ul li a {
    letter-spacing: 1px;
    font-size: 20px;
    background-color: lightgray;
    color: black;
    text-decoration: none;
  }

nav ul li a:hover{
    color: white;
  }

  /* Style the dropdown menu */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Style the dropdown content */
.dropdown-content {
  display: flex;
  flex-direction: column;
  position: absolute;
  background-color: lightgray;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  transition: transform .25s ease-in;
  transform: scale(0.1, 0.1);
  transform-origin: 0 0;
  opacity: 0;
}

/* Style the dropdown links */
.dropdown-content a {
  color: #333;
  padding: 12px 18px;
  text-decoration: none;
  display: block;
  font-size: 14px;
}

/* Change color on hover */
.dropdown-content a:hover {
  background-color: grey;
}

/* Show the dropdown content when hovering over the dropdown */
.dropdown:hover .dropdown-content {
  opacity: 1;
  transform: scale(1, 1);
}
 /* arrow */
 .arrowSpan {
    width: 10px;
    height: 10px;
    border-top: 3px solid black;
    border-left: 3px solid black;
    border-bottom: 0px;
    float: right;
    transform: rotate(225deg);
   }

   .dropdown:hover .arrowSpan {
     opacity: 1;
     transform: rotate(45deg);
    }

<nav>
  <ul>
    <li><a href="index.html">Our Story</a></li>
    <li class="dropdown">
      <a href="#">Specialists</a>
      <span class="arrowSpan"></span>
      <ul class="dropdown-content">
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 2</a></li>
        <li><a href="#">Option 3</a></li>
      </ul>
    </li>
    <li><a href="#">Training</a></li>
    <li><a href="#">DBS</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

赞(0）回复(0）举报 2023-09-28

k3bvogb12#

要添加自定义箭头图标以在悬停在“Maven”上时指示下拉菜单并重新定位下拉菜单，您可以尝试以下更改：
1.为HTML中的箭头图标添加一个新类，其中“Specialists”为：
Maven▼
1.修改CSS以设置箭头图标的样式并调整其位置：
/* 为箭头图标设置样式 / .arrow-icon { margin-left：5 px; / 调整间距 / }
/ 将鼠标悬停在“Specialists”上时旋转箭头图标 */ . transform：hover .arrow-icon { transform：旋转（180度）;}
当您将鼠标悬停在“Specialists”上时，这些更改将在“Specialists”旁边显示一个向下指向的箭头图标，并在您将鼠标悬停在“Specialists”上时旋转它。

赞(0）回复(0）举报 2023-09-28

我来回答

html 我正试图将我的菜单和链接内的菜单向左移动，我正试图添加一个箭头图标旁边的'Maven'

2条答案

相关问题

热门标签

最新问答