Выпадающее меню на зависания изображения

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

Германо 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; 
} 

я не пошел для оптимизации ни, но он отлично работает.