Question 249756 in Html Question posted in
Some basic documentation can be found here.

Html – I am trying to move my dropdown menu and the links within the dropdown towards the left and i am trying to add an arrow icon next to 'Specialists'

I’ve tried modifying my code and adding custom arrow icon animated codes into VS Code but i cannot get it to display where i want using CSS. I am wanting the icon to indicate that there is a dropdown when you hover over ‘specialists’. Also, i have tried using the margin function to reposition the dropdown menu and the links within but i couldn’t get it to work so i removed most of the changes i made.

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>
Tags:

2

Answers


  1. 0

    To add a custom arrow icon to indicate the dropdown when hovering over "Specialists" and to reposition the dropdown menu, you can try the following changes:

    1. Add a new class for the arrow icon in the HTML where "Specialists" is:

      Specialists▼

    2. Modify your CSS to style the arrow icon and adjust its position:

      /* Style the arrow icon /
      .arrow-icon {
      margin-left: 5px; /       Adjust the spacing */
      }

      /* Rotate the arrow icon when hovering over "Specialists" */
      .dropdown:hover .arrow-icon {
      transform: rotate(180deg);
      }

    These changes will display a downward-pointing arrow icon next to "Specialists" when you hover over it and rotate it when you hover.

    Login or Signup to reply.
  2. 0

    are you looking for something like this?

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search