Как преобразовать горизонтальное меню с вертикальными подменю в меню вертикального аккордеона с подменю?

Я хочу сделать свое меню так, чтобы, когда я нахожусь в определенном размере windows, например, на мобильном телефоне, мое меню преобразуется в вертикальное выпадающее меню аккордеона. Я знаком с медиа-запросами и адаптивными / адаптивными проектами, но я не могу заставить свое подменю вертикально падать / сползать вниз, как при наведении, так и при нажатии.

Вот моя скрипка

HTML:

   

CSS:

 html, body { height: 100%; overflow-x:hidden; overflow-y:hidde; margin:auto; } #wrap { margin:auto; min-height: 100%; background-image: url(style/flourish-bg.png); background-repeat:no-repeat; background-position: top center; z-index:0; } #header { width:1024px; height:160px; background-repeat: no-repeat; } #bgheader { background-image: url(style/bgheader.jpg); background-repeat:repeat-x; height:160px; } body { margin-left: 0px; margin-top: 0px; margin-right: 0px; background-repeat: no-repeat; background:#000; } /*----------MENU-----------*/ /*main menu*/ a:link {color:#fff; text-decoration:none;} a:visited {color: #868D65;} a:hover {color:#000;} a:active {color: #868D65;} #navmenu { width:100%; height:80px; margin-right:auto; margin-left:auto; } /*holds the listed items on main menu*/ #navmenu ul { width:100%; margin:0; padding: 0; list-style:none; text-decoration:none; } /*keeps main menu horiztonal, and effects the actualy list items, overrides any other menu float*/ #navmenu li { float:left; padding: 30px 7px; position:relative; list-style:none; text-decoration:none; font-family: Georgia, "Times New Roman", Times, serif; font-size:12px; text-decoration: none; border-top: 2px solid #868D65; border-bottom: 2px solid #868D65; transition: border-radius 1s, background 1s; -moz-transition: -moz-border-radius 1s, background 1s; -webkit-transition: -webkit-border-radius 1s, background 1s; z-index:200; } /*menu styling for hover, WHEN IMAGE IS ADDED, IT APPLIES TO ALL HOVER ACTIONS ON EVERY MENU*/ #navmenu li:hover { background: #eee; background-image: url(style/bgheader.jpg); transition: border-radius 1s, background 1s; -moz-transition: -moz-border-radius 1s, background 1s; -webkit-transition: -webkit-border-radius 1s, background 1s; z-index:200; } /*SUB MENU STARTS*/ /*this hides the submenu*/ #navmenu li ul { position: absolute; top:75px; visibility:hidden; padding-left:0px; } /*this shows the submenu on hover over main menu*/ #navmenu li:hover ul {visibility:visible;} /*sub menu styling*/ #navmenu li ul li { float:none; width: 160px; font-size:12px; text-align:center; padding: 15px 5px 10px 5px; background: #222222; border: 1px solid #FFF; color: #FFF; position:relative; margin-left: -6px; } /*sub menu styling for hover*/ #navmenu li ul li:hover { font-size:12px; color: #000; background-color: #868D65; } 

Ну вот

 @media (max-width:600px) { tr td #navmenu li { width:100%; // makes each item takes up the whole screen } tr td #navmenu li ul { position:relative !important; // removes the position absolute so that it doesn't overlap the higher up menu items top:0; // puts it right next to the menu item display:none; // so there is no unnecessary white space when the `li` isn't being hovered over } tr td #navmenu li:hover ul { display:block; // shows the submenu when you hover over the higher `li`s } } 

поместите что-то подобное в медиа-запрос мобильного макета

 #navmenu li { display: block; text-align: center; float:none; } #navmenu li ul { display: none; position: relative; top:0; visibility:hidden; } 

так как ваша техника о том, как показывать подменю, является чисто css (: наведите указатель мыши на родительский элемент и видимость: видимый), нам нужен js / jquery, потому что наше дочернее меню отображается: нет сейчас

 $('li.slidedown').hover(function() { $(this).find('ul').slideDown(); }, function() { $(this).find('ul').slideUp(); }); 

havent проверил мои коды, byt я надеюсь, что вы получили мою точку