具有內容的水平滾動菜單

Question

我想問問

如何創建帶有內容的水平滾動菜單？

我在https://www.w3schools.com/howto/howto_css_menu_horizo​​ntal_scroll.asp中獲得了教程

但在教程中沒有內容（我的意思是，如果我單擊菜單聯系人，teks新聞隱藏並顯示teks聯系人或其他teks，如果我單擊菜單新聞，則單擊show teks新聞或其他teks）

這是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>

這是html代碼：

<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>

如果單擊菜單之一，如何創建帶有內容的水平可滾動菜單？

如果菜單新聞我單擊顯示teks新聞或其他teks如果我單擊菜單聯系人，則teks新聞隱藏並顯示teks聯系人或其他teks

謝謝

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

解決：我發現了這個問題： 顯示/隱藏多個Divs Javascript

Answer 1

您是否正在尋找這樣的東西？

運行以下代碼，然后將鼠標懸停在“新聞”或“聯系人”上：

 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> 

希望這可以幫助