hover css properties stop doing their job when a div is set to be inline-CodePudding

I am making a dropdown menu, and would like my fontawesome caret icon to rotate 90 degrees when the button is hovered. When the div containing the icon is not set to "display: inline;" this property works. However I would like the icon to be inline, and when I set it to that, the rotate property stops making the div rotate. JSFiddle attached. Thank you very much in advance!

 <html>
   <head>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
   <body>
     <div >
       <button >HTML/CSS <div style="display: inline" id="caret"><i ></i></div></button>
       <div >
         <a href="#pRow1">ForeverGrind</a>
         <a href="#pRow2">CopeWare Website</a>
       </div>
     </div>
     <div >
       <button >HTML/CSS <div id="caret"><i ></i></div></button>
       <div >
         <a href="#pRow1">ForeverGrind</a>
         <a href="#pRow2">CopeWare Website</a>
       </div>
     </div>
   </body>
   </head>
 </html>

CSS:

.dropbtn {
    background-color: #242526;
    color: #ffffff;
    padding: 10px;
    font-size: 16px;
    border: 1px outset #242526;
    cursor: pointer;
    margin-top: 3px;
    margin-right: 5px;
    
  }
  
  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  .dropdown-content a:hover {background-color: #f1f1f1}
  
  .dropdown:hover .dropdown-content {
    display: block;
  }
  
  .dropdown:hover .dropbtn {
    background-color: #23a6d5;
  }
  .dropbtn:hover #caret {
  transform:rotate(90deg)

}

https://jsfiddle.net/4x6mhL09/

CodePudding user response：

If I'm interpreting your question correctly, this is what I'd do. Lay things out a bit differently, utilizing flexbox. Then, when you hover the .dropdown element, transform the fontawesome icon.

.dropbtn {
    background-color: #242526;
    color: #ffffff;
    padding: 10px;
    font-size: 16px;
    border: 1px outset #242526;
    cursor: pointer;
    margin-top: 3px;
    margin-right: 5px;
    display: flex;
    align-items: center;
  }
  
  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  .dropdown p {
    margin: 0 5px 0 0;
  }
  
  .dropdown-content a:hover {background-color: #f1f1f1}
  
  .dropdown:hover .dropdown-content {
    display: block;
  }
  
  .dropdown:hover .dropbtn {
    background-color: #23a6d5;
  }
  .dropdown:hover #caret {
    transform:rotate(90deg)
  }

<html>
   <head>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
   <body>
     <div >
        <button >
          <p>HTML/CSS</p>
          <div style="display: inline" id="caret">
            <i ></i>
          </div>
        </button>
       <div >
         <a href="#pRow1">ForeverGrind</a>
         <a href="#pRow2">CopeWare Website</a>
       </div>
     </div>
   </body>
   </head>
 </html>