具有内容的水平滚动菜单

Question

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

Answer 1

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