ハンバーガーアイコンの下にメニューリストを表示するにはどうすればいいですか？

Question

ハンバーガーアイコンの下にメニューリストを表示するにはどうすればいいですか？

CSS：

@media screen and (max-width:680px) { 
    ul.topnav.responsive {position: relative;} 
    ul.topnav.responsive li.icon { 
    position: absolute; 
    right: 0; 
    top: 0; 
    } 
    ul.topnav.responsive li { 
    float: none; 
    display: inline; 
    } 
    ul.topnav.responsive li a { 
    display: block; 
    text-align: left; 
    } 
    .container { 
    width: auto; 
    } 
} 

JSFiddle：事前にhttps://jsfiddle.net/xkp0p7vc/

感謝。

Answer 1

display: block; clear: both;からul.topnav.responsive liを追加し、からfloat: right;を削除してください。

ul.topnav.responsive li { 
    float: none; 
    display: block; /*change with inline*/ 
    clear: both; 
} 

.topnav-right { 
    /* float: right; */ 
} 

Demo