Как открыть меню с помощью кнопки? В 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

Если вы сделаете этот сайт для вас презентацию, вы должны правильно быть в состоянии сделать это самостоятельно! По-моему, это было бы обманом, когда мы помогаем вам чем-то простым. Если у вас есть конкретная проблема, я буду рад помочь, но это всего лишь еще один «PLS, дайте мне код для x». Используйте Google и научитесь программировать, читая некоторые профессиональные блоги/книги. – RononDex

Где ваш код Js? – Anup

Вопросы, требующие кода, должны демонстрировать минимальное понимание решаемой проблемы. Включите попытки решения, почему они не работают и ожидаемые результаты. –

Что-то вроде этого?

#menu { 
    display: none; 
} 

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

Это комбинирует :focus псевдо-класса на #menubar элемент с adjacent-sibling combinator (+), чтобы выбрать #menu элемент сразу после #menubar элемента изменить display свойство #menu элемента в «блок», когда кнопка сфокусирован , Мы также гарантируем, что элемент #menu остается видимым при наведении курсора, чтобы при удалении фокуса с кнопки список все еще мог быть видимым до тех пор, пока мышь не исчезнет.

JSFiddle demo.

источник

2014-01-15 11:49:50