Question

我有一个悬停下拉菜单，主菜单中的图像不会显示，否则当它适合下拉菜单时看起来很奇怪。当我将鼠标悬停在user12345按钮上时，图像位于悬停阴影之前的左侧。我在下面的代码段中附加了包括下拉导航代码在内的代码。非常感谢您的帮助

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="#"> &nbsp; User12345</a>
                                 <ul>
                            <li><a href="#" class="nav-item">Profile</a></li>
    </ul>
    </nav> </div>

Answer 1

我希望我能正确理解您的意思。此代码可以为您提供帮助。您必须将img标签放入a标签中。

<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> 
        
        <li><a href="#"><img src="images/noprofile.png" class="user "
             style="width:48px;height:48px;"> &nbsp; User12345</a></li>
          <ul>
            <li><a href="#" class="nav-item">Profile</a
            </li>
         </ul>
        </ul>
    </nav> 
</div>

您可以为position:relative标签设置img样式，以将其正确放置在a标签旁边。

您还可以使用flexbox，这是将元素彼此相邻放置的非常好的工具。您可以在w3schools或CSS技巧中了解它：

https://www.w3schools.com/css/css3_flexbox.asp

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

您可以检查以下解决方案，希望它可以解决您的问题。

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;
}

.dropdown ul {
    margin:0;
    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: inline-block;
   padding: 0 15px;
    color: #D3D3D3;
    text-decoration: none;
    line-height: 60px;
    font-size: 20px;
}



ul li a img { 
 margin-right: 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> 
            <li>
                <a href="#"><img src="images/noprofile.png" class="user" style="width:48px;height:48px">User12345</a>
                <ul>
                    <li><a href="#" class="nav-item">Profile</a></li>
                </ul>
            </li>
        </ul>        
    </nav> 
</div>

如何在按钮旁边添加图像

2 个答案: