懸停圖像

Question

W3Schools

你好下拉菜單中，

我一直在試圖整合一個下拉基於懸停在圖像的功能菜單。我已經去了上面的網站給出了一個例子，但我無法弄清楚。以下是我目前的HTML。我想要懸停功能的圖像有一個下拉菜單是Logo.png文件。我根本無法弄清楚如何將這些集成到我的代碼中。任何方向或幫助，將不勝感激。

::-webkit-scrollbar { 
 
    display: none; 
 
} 
 
body { 
 
    margin: 0; 
 
    background-color: #808080; 
 
} 
 
#menu { 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 140px; 
 
    background-color: #555555; 
 
} 
 
#logopic { 
 
    height: 100px; 
 
    width: 140px; 
 
} 
 
#logo { 
 
    float: left; 
 
    margin: 1%; 
 
    width: 160px; 
 
} 
 
.menuoptions { 
 
    border: 1px solid white; 
 
    border-radius: 50px; 
 
    padding: 14px; 
 
    float: left; 
 
    letter-spacing: 2px; 
 
    list-style-type: none; 
 
    color: #FFFFFF; 
 
    margin-top: 30px; 
 
    margin-left: 45px; 
 
    font-size: 125%; 
 
    font-weight: bold; 
 
} 
 
.menuoptions:hover { 
 
    color: #00b9f1; 
 
    background-color: #FFFFFF; 
 
} 
 
#topsection { 
 
    padding-top: 150px; 
 
} 
 
ul li { 
 
    list-style-position: inside; 
 
}

<div id="menu"> 
 

 
    <div id="logodiv"> 
 
    <a href="index.html"> 
 
     <img id="logo" src="images/Logo.png"> 
 
    </a> 
 
    </div> 
 

 
    <div id="menulinks"> 
 

 
    <ul id="options"> 
 
     <a href="#income"> 
 
     <li class="menuoptions">INCOME</li> 
 
     </a> 
 
     <a href="#expenses"> 
 
     <li class="menuoptions">EXPENSES</li> 
 
     </a> 
 
     <a href="#incomedistribution"> 
 
     <li class="menuoptions">INCOME DISTRIBUTION</li> 
 
     </a> 
 
     <a href="#spending"> 
 
     <li class="menuoptions">SPENDING</li> 
 
     </a> 
 
     <a href="#sidemenu"> 
 
     <li class="menuoptions">SIDE MENU</li> 
 
     </a> 
 
    </ul> 
 

 
    </div> 
 

 
</div>

Answer 1

使用sibligns選擇 「+」

::-webkit-scrollbar { 
 
    display: none; 
 
} 
 
body { 
 
    margin: 0; 
 
    background-color: #808080; 
 
} 
 
#menu { 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 140px; 
 
    background-color: #555555; 
 
} 
 
#logopic { 
 
    height: 100px; 
 
    width: 140px; 
 
} 
 
#logo { 
 
    float: left; 
 
    margin: 1%; 
 
    width: 160px; 
 
} 
 
.menuoptions { 
 
    border: 1px solid white; 
 
    border-radius: 50px; 
 
    padding: 14px; 
 
    float: left; 
 
    letter-spacing: 2px; 
 
    list-style-type: none; 
 
    color: #FFFFFF; 
 
    margin-top: 30px; 
 
    margin-left: 45px; 
 
    font-size: 125%; 
 
    font-weight: bold; 
 
} 
 
.menuoptions:hover { 
 
    color: #00b9f1; 
 
    background-color: #FFFFFF; 
 
} 
 
#topsection { 
 
    padding-top: 150px; 
 
} 
 
ul li { 
 
    list-style-position: inside; 
 
} 
 

 
#menulinks { 
 
    display: none; 
 
} 
 

 
#logodiv:hover + #menulinks { 
 
    display: block 
 
}

<div id="menu"> 
 

 
    <div id="logodiv"> 
 
    <a href="index.html"> 
 
     <img id="logo" src="images/Logo.png"> 
 
    </a> 
 
    </div> 
 

 
    <div id="menulinks"> 
 

 
    <ul id="options"> 
 
     <a href="#income"> 
 
     <li class="menuoptions">INCOME</li> 
 
     </a> 
 
     <a href="#expenses"> 
 
     <li class="menuoptions">EXPENSES</li> 
 
     </a> 
 
     <a href="#incomedistribution"> 
 
     <li class="menuoptions">INCOME DISTRIBUTION</li> 
 
     </a> 
 
     <a href="#spending"> 
 
     <li class="menuoptions">SPENDING</li> 
 
     </a> 
 
     <a href="#sidemenu"> 
 
     <li class="menuoptions">SIDE MENU</li> 
 
     </a> 
 
    </ul> 
 

 
    </div> 
 

 
</div>

Answer 2

Germano的Plebani>我相信它不會工作，因爲當你停止徘徊標識，菜單將再次消失。

我改變你的代碼一下，以便成爲一個更簡單的（至少在我看來）：

<div id="menu"> 
<ul> 
    <li id="logo"><img src="your_path"></li> 
    <li class="menuoptions">INCOME</li> 
    <li class="menuoptions">EXPENSES</li> 
    <li class="menuoptions">INCOME DISTRIBUTION</li> 
    <li class="menuoptions">SPENDING</li> 
    <li class="menuoptions">SIDE MENU</li> 
</ul> 

::-webkit-scrollbar { 
    display: none; 
} 
body { 
    margin: 0; 
    background-color: #808080; 
} 
#menu { 
    position: fixed; 
    width: 100%; 
    height: 140px; 
    background-color: #555555; 
} 
#logo { 
    height:140px; 
} 

#logo img{ 
    width:160px; 
} 
ul{ 
    height:inherit; 
    width:160px; /* Your menu has the size of your logo */ 
} 

ul:hover { 
    width:auto; /* when you hover your menu, it will take 100% of the width of it's container */ 
} 
ul li { 
    float: left; 
    list-style:none; 
} 
ul:hover .menuoptions { 
    display:block; 
} 
.menuoptions { 
    border: 1px solid white; 
    border-radius: 50px; 
    padding: 14px; 
    letter-spacing: 2px; 
    list-style-type: none; 
    color: #FFFFFF; 
    margin-top: 30px; 
    margin-left: 45px; 
    font-size: 125%; 
    font-weight: bold; 
    display:none; 
} 
.menuoptions:hover { 
    color: #00b9f1; 
    background-color: #FFFFFF; 
} 

我沒有去優化都不是，但它工作正常。