Dropdown Menu on hover image - html

Question

W3Schools
Hello,
I've been trying to integrate a drop down menu based upon the hover over function of an image. I've gone to the above website which gives an example, but I cannot figure it out. Below is my current HTML. The image I would like to have the hover over function work on and from that have a drop down menu is the Logo.png file. I simply cannot figure out how to integrate this into my code. Any direction or help would be appreciated.
::-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

Use the sibligns selector "+"
::-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 > I believe it won't work, because when you stop hovering the logo, the menu will disappear again.
I changed your code a bit to make it a bit more simple (at least, in my opinion) :
<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;
}
I didn't go for optimization neither, but it works fine.