I am having an issue with my hover dropdown menu where the image is not displaying properly in the main button. When I hover over the user12345 button, the image appears on the left side just before the hover shadow. Below is the code snippet for the dropdown nav. Any help would be greatly appreciated.
HTML:
body {
font-family: arial;
margin: 0;
padding: 0;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
}
.dropdown {
margin: 0 auto;
}
nav {
height: 77px;
text-decoration:none;
}
ul {
padding: 0;
margin: 0 auto;
float: right;
margin-right:30px;
}
ul li {
position: relative;
list-style: none;
display: inline-block;
background: #343a40;
}
ul li a {
display: block;
padding: 0 15px;
color: #D3D3D3;
text-decoration: none;
line-height: 60px;
font-size: 20px;
}
ul li a:hover {
background: #3b4044;
text-decoration:none;
opacity: 1 !important;
}
ul ul {
position: absolute;
top: 62px;
display: none;
background: #343a40;
}
li:hover ul {
display: block;
text-decoration:none;
background: #343a40 !important;
}
h5 {
margin-bottom: .5rem;
font-family: inherit;
line-height: 1.2;
}
b{
font-weight: 542;
}
ul li:hover > ul {
display: block;
}
ul ul li {
width:150px;
float: none;
display: list-item;
position: relative;
}
.user {
margin-left: 20px; } <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="dropdown ">
<nav class="navbar navbar-expand-md bg-dark navbar-dark py-3">
<a id="name" href="index.html">
<img src="images/headericon.png" width="40" height="40" class="d-inline-block align-top" alt="">
</a>
<h5 style="font-size: 22px" class="ml-2 text-info mt-2"><b>Gobble</b></h5>
<ul>
<img src="images/noprofile.png" class="user " style="width:48px;height:48px">
<li><a href="#"> User12345</a>
<ul>
<li><a href="#" class="nav-item">Profile</a></li>
</ul>
</nav> </div>