Pfthb

i want to ask

how to create Horizontal Scrollable Menu with content?

i get tutorial in https://www.w3schools.com/howto/howto_css_menu_horizontal_scroll.asp

but in tutorial there is no content (i mean if menu news i click show teks news or other teks if i click menu contact, teks news hide and show teks contact or other teks)

this the code for css :

<style>
div.scrollmenu 
 background-color: #333;
 overflow: auto;
 white-space: nowrap;


div.scrollmenu a 
 display: inline-block;
 color: white;
 text-align: center;
 padding: 14px;
 text-decoration: none;


div.scrollmenu a:hover 
 background-color: #777;

</style>

and this for html code :

<div class="scrollmenu">
 <a href="#home">Home</a>
 <a href="#news">News</a>
 <a href="#contact">Contact</a>
 <a href="#about">About</a>
 <a href="#support">Support</a>
 <a href="#blog">Blog</a>
 <a href="#tools">Tools</a> 
 <a href="#base">Base</a>
 <a href="#custom">Custom</a>
 <a href="#more">More</a>
 <a href="#logo">Logo</a>
 <a href="#friends">Friends</a>
 <a href="#partners">Partners</a>
 <a href="#people">People</a>
 <a href="#work">Work</a>
</div>

<h2>Horizontal Scrollable Menu</h2>
<p>Resize the browser window to see the effect.</p>

how to create Horizontal Scrollable Menu with content if click one of menu?

if menu news i click show teks news or other teks if i click menu contact, teks news hide and show teks contact or other teks

thanks

====================

solved: i found this : Show/Hide Multiple Divs Javascript

Are you looking for something like this?

Run the code snipped below and hover over News or Contacts:

ul 
 list-style-type: none;
 padding: 0px;
 margin: 0px;


div.scrollmenu 
 background-color: #333;
 overflow: auto;
 white-space: nowrap;


div.scrollmenu li 
 display: inline-block;


div.scrollmenu li a 
 display: inline-block;
 color: white;
 text-align: center;
 padding: 14px;
 text-decoration: none;


div.scrollmenu a:hover 
 background-color: #777;


ul>li>ul 
 display: none;


ul>li:hover>ul 
 background-color: #333;
 position: absolute;
 display: block;

<div class="scrollmenu">
 <ul>
 <li><a href="#home">Home</a></li>
 <li><a href="#news">News</a>
 <ul>
 <li><a href="#">News 1</a></li>
 <li><a href="#">News 2</a></li>
 <li><a href="#">News 3</a></li>
 </ul>
 </li>
 <li><a href="#contact">Contact</a>
 <ul>
 <li><a href="#">Contact 1</a></li>
 <li><a href="#">Contact 2</a></li>
 <li><a href="#">Contact 3</a></li>
 </ul>
 </li>
 <li><a href="#about">About</a></li>
 <li><a href="#support">Support</a></li>
 <li><a href="#blog">Blog</a></li>
 <li><a href="#tools">Tools</a></li>
 <li><a href="#base">Base</a></li>
 <li><a href="#custom">Custom</a></li>
 <li><a href="#more">More</a></li>
 <li><a href="#logo">Logo</a></li>
 <li><a href="#friends">Friends</a></li>
 <li><a href="#partners">Partners</a></li>
 <li><a href="#people">People</a></li>
 <li><a href="#work">Work</a></li>
 </ul>
</div>

<h2>Horizontal Scrollable Menu</h2>
<p>Resize the browser window to see the effect.</p>

Hope this helps