hover 覆盖文本以显示其他文本

Question

I'm having a hardtime to find out how to make a hover effect to show some other text/buttons. i want to make a sort of nav menu with hovers.

please see the picture for more information;

when you hover to "platenwarmtewisselaar" i want to make a drop down menu over the picture. and when you go to "buizenwarmtewisselaar"or the other text/buttons there will a couple of other options to chose from. how can i insert this into my code?

many thanks!

My code;

 <div id="knoppen"> <div id="Plaat" onclick="URL" onmouseover="ShowP()"> <button id="plaatknop">Platenwarmtewisselaar </button> </div> <div id="buis"> <button id="buisknop" onclick="URL"onmouseover="ShowB()">Buizenwarmtewisselaar</button> </div> <div id="productenplaat"> <div id="gelast"> <button id="gelastknop">Gelasteplatenwisselaar </button> </div> <div id="gesoldeerdplaat"> <button id="gesoldeerdknop">gesoldeerde platenwisselaar</button> </div> <div id="pakkingenplaat"> <button id="pakkingenknop">platenwisselaar met pakkingen</button> </div> </div>

Answer 1

You can use like below code

 #menu { width: 150px; height: 100%; background: #424242; color: white; float: left; } #menu ul { margin: 0; padding: 0; } #menu li { list-style: none; font-size: 20px; padding: 15px 20px; cursor: pointer; } #menu li:hover { background-color: #90CAF9; } #menu li.active { background-color: #2196F3; } #menu ul li ul { display: none; } #menu ul li.submenu { position: relative } #menu ul li.submenu ul { position: absolute; left: 150px; width: 200px; top: 0; background: #333 } #menu ul li.submenu:hover ul { display: inline-block }

 <div id="menu"> <ul> <li onClick="Dashboard();">Platenwarmtewisselaar </li> <li class="submenu">Buizenwarmtewisselaar &gt; <ul> <li>Add Employee</li> <li>Employee View</li> </ul> </li> <li>Gelasteplatenwisselaar </li> <li class="submenu">Salary <ul> <li>Add Employee</li> <li>Employee View</li> </ul> </li> <li>Change Password</li> </ul> </div>

Answer 2

I'm not sure, but are you talking about this dropdown menu? If so, you can follow the guidelines here.

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_hover