如何用按鈕打開一個菜單？在html中

-2

我的問題是我怎樣才能打開我的菜單時，點擊我的按鈕？我希望我的菜單在頂部但我真的不知道如何解決它。如何用按鈕打開一個菜單？在html中

問題是我想爲我的演示文稿提供一個運行良好的網站。桑提諾博諾拉，

HTML

 <html> 
     <head> 
      <link rel="stylesheet" href="css/base.css" /> 
      <link rel="stylesheet" href="css/..." /> 
     </head> 
     <title> 
      a test 
     </title> 
     <body> 
      <button id="menubar"> 
       Menu 
      </button> 
      <ul id="menu"> 
       <ul>1</ul> 
       <ul>2</ul> 
       <ul>3</ul> 
      </ul> 
     </body> 
    </html>

CSS

#menubar { 
    background: none repeat scroll 0 0 rgb(70, 100, 200); 
    border: 0 none; 
    font-family: consolas; 
    font-size: 34px; 
    height: 70px; 
    opacity: 1; 
    transition: width 0.5s ease 0s, opacity 2s ease 0.5s; 
    width: 100px; 
} 
#menubar:focus { 
    font-family: consolas; 
    font-size: 34px; 
    opacity: 0.65; 
    text-align: left; 
    width: 1350px; 
    z-index: -10; 
} 
#menu:hover { 
    z-index: +5; 
    opacity: 1.0; 
} 
#menu { 
    display: block; 
    float: left; 
    height: 70px; 
    margin: -70px 0px 0px 100px; 
    padding: 0px 0px 0px 0px; 
    width: 1248px; 
    border: 0px solid black; 
    z-index: -1; 
    background: rgb(70,100,200); 
    opacity: 0.0; 
    transition: 2s ease 0s; 
} 
ul { 
    float: left; 
    text-align: center; 
    width: 4%; 
}

來源

2014-01-15 user3197860

的如果你把這個網站給你介紹，你應該適當地能夠做到這一點你自己！在我看來，當我們通過這樣簡單的事情來幫助你時，這會是作弊的。如果你有一個具體的問題，那麼我會很樂意幫忙，但這只是另一個「請給我x的代碼」。使用Google，並通過閱讀一些專業博客/書籍瞭解如何進行編碼 – RononDex

Js代碼在哪裏？ – Anup

詢問代碼的問題必須證明對所解決問題的最小理解。包括嘗試解決方案，爲什麼他們沒有工作，以及預期的結果。 –

像這樣的事情？

#menu { 
    display: none; 
} 

#menu:hover, 
#menubar:focus + #menu { 
    display: block; 
}

這結合了:focus僞類與adjacent-sibling combinator（+）的#menubar元件上以選擇#menu元件緊接#menubar元件以改變#menu元件的display屬性以下爲「塊」當按鈕被聚焦。我們還確保在懸停時#menu元素保持可見狀態，以便當焦點從按鈕上移除時，列表仍然可見，直到鼠標離開。

JSFiddle demo。

來源

2014-01-15 11:49:50