2レベル対応メニューにブロックが表示されない

Question

小さな画面サイズでは、古いメニューを反応させようとしています。メニューアイコンが正常に動作しますが、リストを開くとブロックの代わりにインラインで表示されます。私はいくつかの選択肢を試しましたが、それを正しく動作させることはできませんあなたは、Liにdisplay: block;を配置する必要があり

function myFunction() { 
 
    var x = document.getElementById("myTopnav"); 
 
    if (x.className === "menu") { 
 
     x.className += " responsive"; 
 
    } else { 
 
     x.className = "menu"; 
 
    } 
 
}

/* Main menu */ 
 

 

 
.menu 
 
{ 
 
\t width: 100%; 
 
\t margin: -15px 0 0 0; 
 
\t padding: 0 0 0 0; 
 
\t list-style: none; 
 
\t background: #d1d1d1; 
 
\t background: -moz-linear-gradient(#d1d1d1, #b6b6b6); 
 
\t background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d1d1d1),color-stop(1, #b6b6b6)); 
 
\t background: -webkit-linear-gradient(#d1d1d1, #b6b6b6); 
 
\t background: -o-linear-gradient(#d1d1d1, #b6b6b6); 
 
\t background: -ms-linear-gradient(#d1d1d1, #b6b6b6); 
 
\t background: linear-gradient(#d1d1d1, #b6b6b6); 
 
\t border-bottom: 4px solid #005da2; 
 
\t -moz-box-shadow: 0 2px 1px #9c9c9c; 
 
\t -webkit-box-shadow: 0 2px 1px #9c9c9c; 
 
\t box-shadow: 0 2px 1px #9c9c9c; 
 
} 
 

 
.menu li 
 
{ 
 
\t float: left; 
 
\t padding: 0 0 10px 0; 
 
\t position: relative; 
 
\t line-height: 0; 
 
\t border-right: 1px solid #b6b6b6; 
 
} 
 

 
.menu li:hover { 
 
\t background: #0186ba; 
 
\t background: -moz-linear-gradient(#04acec, #0186ba); \t 
 
\t background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)); 
 
\t background: -webkit-linear-gradient(#04acec, #0186ba); 
 
\t background: -o-linear-gradient(#04acec, #0186ba); 
 
\t background: -ms-linear-gradient(#04acec, #0186ba); 
 
\t background: linear-gradient(#04acec, #0186ba); 
 
\t /*-moz-box-shadow: 0 0 2px rgba(255,255,255,.5); 
 
    -webkit-box-shadow: 0 0 2px rgba(255,255,255,.5); 
 
    box-shadow: 0 0 2px rgba(255,255,255,.5); \t 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px;*/ 
 
\t z-index: 9999 !important; 
 
} 
 

 
.menu a 
 
{ 
 
\t float: left; 
 
\t height: 25px; 
 
\t padding: 10px 25px 0 25px; 
 
\t color: #000; 
 
\t text-transform: uppercase; 
 
\t font: bold 12px/25px Arial, Helvetica; 
 
\t text-decoration: none; 
 
} 
 

 
.menu li:hover > a 
 
{ 
 
\t color: #fafafa; 
 
} 
 

 
*html .menu li a:hover /* IE6 */ 
 
{ 
 
\t color: #fafafa; 
 
} 
 

 
.menu li:hover > ul 
 
{ 
 
\t display: block; 
 
\t z-index: 9999 !important; 
 
} 
 

 
/* Sub-menu */ 
 

 
.menu ul 
 
{ 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0;  
 
    display: none; 
 
    position: absolute; 
 
    top: 45px; 
 
    left: 0; 
 
    z-index: 9999 !important;  
 
    background: #444; 
 
    background: -moz-linear-gradient(#444, #111); 
 
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); 
 
    background: -webkit-linear-gradient(#444, #111);  
 
    background: -o-linear-gradient(#444, #111); \t 
 
    background: -ms-linear-gradient(#444, #111); \t 
 
    background: linear-gradient(#444, #111); 
 
    -moz-box-shadow: 0 0 2px rgba(255,255,255,.5); 
 
    -webkit-box-shadow: 0 0 2px rgba(255,255,255,.5); 
 
    box-shadow: 0 0 2px rgba(255,255,255,.5); 
 
} 
 

 
.menu ul ul 
 
{ 
 
    top: 0; 
 
    left: 150px; 
 
    z-index: 9999 !important; 
 
} 
 

 
.menu ul li 
 
{ 
 
    float: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: block; 
 
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; 
 
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; 
 
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; 
 
} 
 

 
.menu ul li:last-child 
 
{ 
 
    -moz-box-shadow: none; 
 
    -webkit-box-shadow: none; 
 
    box-shadow: none;  
 
} 
 

 
.menu ul a 
 
{  
 
    padding: 10px; 
 
\t height: 40px; 
 
\t width: auto; 
 
\t height: auto; 
 
    line-height: 1; 
 
    display: block; 
 
    white-space: nowrap; 
 
    float: none; 
 
\t text-transform: none; 
 
\t color: #fff; 
 

 
} 
 

 
*html .menu ul a /* IE6 */ 
 
{  
 
\t height: 10px; 
 
} 
 

 
*:first-child+html .menu ul a /* IE7 */ 
 
{  
 
\t height: 10px; 
 
} 
 

 
.menu ul a:hover 
 
{ 
 
    background: #0186ba; 
 
\t background: -moz-linear-gradient(#04acec, #0186ba); \t 
 
\t background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)); 
 
\t background: -webkit-linear-gradient(#04acec, #0186ba); 
 
\t background: -o-linear-gradient(#04acec, #0186ba); 
 
\t background: -ms-linear-gradient(#04acec, #0186ba); 
 
\t background: linear-gradient(#04acec, #0186ba); 
 
} 
 

 
.menu ul li:first-child > a 
 
{ 
 
    -moz-border-radius: 5px 5px 0 0; 
 
    border-radius: 5px 5px 0 0; 
 
} 
 

 
.menu ul li:first-child > a:after 
 
{ 
 
    content: ''; 
 
    position: absolute; 
 
    left: 30px; 
 
    top: -8px; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 5px solid transparent; 
 
    border-right: 5px solid transparent; 
 
    border-bottom: 8px solid #444; 
 
} 
 

 
.menu ul ul li:first-child a:after 
 
{ 
 
    left: -8px; 
 
    top: 12px; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 0; \t 
 
    border-bottom: 5px solid transparent; 
 
    border-top: 5px solid transparent; 
 
    border-right: 8px solid #444; 
 
} 
 

 
.menu ul li:first-child a:hover:after 
 
{ 
 
    border-bottom-color: #04acec; 
 
} 
 

 
.menu ul ul li:first-child a:hover:after 
 
{ 
 
    border-right-color: #04acec; 
 
    border-bottom-color: transparent; \t 
 
} 
 

 

 
.menu ul li:last-child > a 
 
{ 
 
    -moz-border-radius: 0 0 5px 5px; 
 
    border-radius: 0 0 5px 5px; 
 
} 
 

 
/* Clear floated elements */ 
 
.menu:after 
 
{ 
 
\t visibility: hidden; 
 
\t display: block; 
 
\t font-size: 0; 
 
\t content: " "; 
 
\t clear: both; 
 
\t height: 0; 
 
} 
 

 

 
ul.menu li.icon {display: none;} 
 

 
/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */ 
 
@media screen and (max-width:680px) { 
 
    ul.menu li:not(:first-child) {display: none;} 
 
    ul.menu li.icon { 
 
    float: right; 
 
    display: inline-block; 
 
    } 
 
} 
 

 
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */ 
 
@media screen and (max-width:680px) { 
 
    ul.menu.responsive {position: relative;} 
 
    ul.menu.responsive li.icon { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    } 
 
    ul.menu.responsive li { 
 
    float: none; 
 
    display: inline; 
 
    } 
 
    ul.menu.responsive li a { 
 
    display: block; 
 
    text-align: left; 
 
    } 
 
} 
 

 
* html .menu    { zoom: 1; } /* IE6 */ 
 
*:first-child+html .menu { zoom: 1; } /* IE7 */

 \t <!--MENU--> 
 
     <ul class="menu" id="myTopnav"> 
 
      <li><a href="#">Home</a></li> 
 
      <li><a href="#">Videos</a> 
 
       <ul> 
 
     <li><a href="#">Videos 1</a></li> 
 
     <li><a href="#">Videos 2</a></li> 
 
     <li><a href="#">Videos 3</a></li> 
 
       </ul> 
 
     </li> 
 
       
 
     <li><a href="#">Headlines</a> 
 
      \t <ul> 
 
<li><a href="#">Headlines All</a></li> 
 
<li><a href="#">Headlines Last Week</a></li> 
 
       </ul> 
 
      </li> 
 
    <li><a href="#">Pictures</a></li> 
 
      </li> 
 
<li class="icon"> 
 
    <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a> 
 
    </li> 
 

 

 

 
\t 
 
\t

Answer 1

。

また、a要素のセットfloat: none;を削除することを忘れないでください。

アイコンの上にz-indexを追加して、最初の要素の上にあっても閉じることができます。

これはあなたを助けることがあります。

function myFunction() { 
 
    var x = document.getElementById("myTopnav"); 
 
    if (x.className === "menu") { 
 
     x.className += " responsive"; 
 
    } else { 
 
     x.className = "menu"; 
 
    } 
 
}

/* Main menu */ 
 

 

 
.menu 
 
{ 
 
\t width: 100%; 
 
\t margin: -15px 0 0 0; 
 
\t padding: 0 0 0 0; 
 
\t list-style: none; 
 
\t background: #d1d1d1; 
 
\t background: -moz-linear-gradient(#d1d1d1, #b6b6b6); 
 
\t background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d1d1d1),color-stop(1, #b6b6b6)); 
 
\t background: -webkit-linear-gradient(#d1d1d1, #b6b6b6); 
 
\t background: -o-linear-gradient(#d1d1d1, #b6b6b6); 
 
\t background: -ms-linear-gradient(#d1d1d1, #b6b6b6); 
 
\t background: linear-gradient(#d1d1d1, #b6b6b6); 
 
\t border-bottom: 4px solid #005da2; 
 
\t -moz-box-shadow: 0 2px 1px #9c9c9c; 
 
\t -webkit-box-shadow: 0 2px 1px #9c9c9c; 
 
\t box-shadow: 0 2px 1px #9c9c9c; 
 
} 
 

 
.menu li 
 
{ 
 
\t float: left; 
 
\t padding: 0 0 10px 0; 
 
\t position: relative; 
 
\t line-height: 0; 
 
\t border-right: 1px solid #b6b6b6; 
 
} 
 

 
.menu li:hover { 
 
\t background: #0186ba; 
 
\t background: -moz-linear-gradient(#04acec, #0186ba); \t 
 
\t background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)); 
 
\t background: -webkit-linear-gradient(#04acec, #0186ba); 
 
\t background: -o-linear-gradient(#04acec, #0186ba); 
 
\t background: -ms-linear-gradient(#04acec, #0186ba); 
 
\t background: linear-gradient(#04acec, #0186ba); 
 
\t /*-moz-box-shadow: 0 0 2px rgba(255,255,255,.5); 
 
    -webkit-box-shadow: 0 0 2px rgba(255,255,255,.5); 
 
    box-shadow: 0 0 2px rgba(255,255,255,.5); \t 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px;*/ 
 
\t z-index: 9999 !important; 
 
} 
 

 
.menu a 
 
{ 
 
\t float: left; 
 
\t height: 25px; 
 
\t padding: 10px 25px 0 25px; 
 
\t color: #000; 
 
\t text-transform: uppercase; 
 
\t font: bold 12px/25px Arial, Helvetica; 
 
\t text-decoration: none; 
 
} 
 

 
.menu li:hover > a 
 
{ 
 
\t color: #fafafa; 
 
} 
 

 
*html .menu li a:hover /* IE6 */ 
 
{ 
 
\t color: #fafafa; 
 
} 
 

 
.menu li:hover > ul 
 
{ 
 
\t display: block; 
 
\t z-index: 9999 !important; 
 
} 
 

 
/* Sub-menu */ 
 

 
.menu ul 
 
{ 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0;  
 
    display: none; 
 
    position: absolute; 
 
    top: 45px; 
 
    left: 0; 
 
    z-index: 9999 !important;  
 
    background: #444; 
 
    background: -moz-linear-gradient(#444, #111); 
 
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); 
 
    background: -webkit-linear-gradient(#444, #111);  
 
    background: -o-linear-gradient(#444, #111); \t 
 
    background: -ms-linear-gradient(#444, #111); \t 
 
    background: linear-gradient(#444, #111); 
 
    -moz-box-shadow: 0 0 2px rgba(255,255,255,.5); 
 
    -webkit-box-shadow: 0 0 2px rgba(255,255,255,.5); 
 
    box-shadow: 0 0 2px rgba(255,255,255,.5); 
 
} 
 

 
.menu ul ul 
 
{ 
 
    top: 0; 
 
    left: 150px; 
 
    z-index: 9999 !important; 
 
} 
 

 
.menu ul li 
 
{ 
 
    float: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: block; 
 
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; 
 
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; 
 
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; 
 
} 
 

 
.menu ul li:last-child 
 
{ 
 
    -moz-box-shadow: none; 
 
    -webkit-box-shadow: none; 
 
    box-shadow: none;  
 
} 
 

 
.menu ul a 
 
{  
 
    padding: 10px; 
 
\t height: 40px; 
 
\t width: auto; 
 
\t height: auto; 
 
    line-height: 1; 
 
    display: block; 
 
    white-space: nowrap; 
 
    float: none; 
 
\t text-transform: none; 
 
\t color: #fff; 
 

 
} 
 

 
*html .menu ul a /* IE6 */ 
 
{  
 
\t height: 10px; 
 
} 
 

 
*:first-child+html .menu ul a /* IE7 */ 
 
{  
 
\t height: 10px; 
 
} 
 

 
.menu ul a:hover 
 
{ 
 
    background: #0186ba; 
 
\t background: -moz-linear-gradient(#04acec, #0186ba); \t 
 
\t background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)); 
 
\t background: -webkit-linear-gradient(#04acec, #0186ba); 
 
\t background: -o-linear-gradient(#04acec, #0186ba); 
 
\t background: -ms-linear-gradient(#04acec, #0186ba); 
 
\t background: linear-gradient(#04acec, #0186ba); 
 
} 
 

 
.menu ul li:first-child > a 
 
{ 
 
    -moz-border-radius: 5px 5px 0 0; 
 
    border-radius: 5px 5px 0 0; 
 
} 
 

 
.menu ul li:first-child > a:after 
 
{ 
 
    content: ''; 
 
    position: absolute; 
 
    left: 30px; 
 
    top: -8px; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 5px solid transparent; 
 
    border-right: 5px solid transparent; 
 
    border-bottom: 8px solid #444; 
 
} 
 

 
.menu ul ul li:first-child a:after 
 
{ 
 
    left: -8px; 
 
    top: 12px; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 0; \t 
 
    border-bottom: 5px solid transparent; 
 
    border-top: 5px solid transparent; 
 
    border-right: 8px solid #444; 
 
} 
 

 
.menu ul li:first-child a:hover:after 
 
{ 
 
    border-bottom-color: #04acec; 
 
} 
 

 
.menu ul ul li:first-child a:hover:after 
 
{ 
 
    border-right-color: #04acec; 
 
    border-bottom-color: transparent; \t 
 
} 
 

 

 
.menu ul li:last-child > a 
 
{ 
 
    -moz-border-radius: 0 0 5px 5px; 
 
    border-radius: 0 0 5px 5px; 
 
} 
 

 
/* Clear floated elements */ 
 
.menu:after 
 
{ 
 
\t visibility: hidden; 
 
\t display: block; 
 
\t font-size: 0; 
 
\t content: " "; 
 
\t clear: both; 
 
\t height: 0; 
 
} 
 

 

 
ul.menu li.icon {display: none;} 
 

 
/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */ 
 
@media screen and (max-width:680px) { 
 
    ul.menu li:not(:first-child) {display: none;} 
 
    ul.menu li.icon { 
 
    float: right; 
 
    display: inline-block; 
 
    } 
 
} 
 

 
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */ 
 
@media screen and (max-width:680px) { 
 
    ul.menu.responsive {position: relative;} 
 
    ul.menu.responsive li.icon { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    z-index: 10000; 
 
    } 
 
    ul.menu.responsive li { 
 
    float: none; 
 
    display: block; 
 
    } 
 
    ul.menu.responsive li a { 
 
    display: block; 
 
    text-align: left; 
 
    float: none; 
 
    } 
 
} 
 

 
* html .menu    { zoom: 1; } /* IE6 */ 
 
*:first-child+html .menu { zoom: 1; } /* IE7 */

<!--MENU--> 
 
     <ul class="menu" id="myTopnav"> 
 
      <li><a href="#">Home</a></li> 
 
      <li><a href="#">Videos</a> 
 
       <ul> 
 
     <li><a href="#">Videos 1</a></li> 
 
     <li><a href="#">Videos 2</a></li> 
 
     <li><a href="#">Videos 3</a></li> 
 
       </ul> 
 
     </li> 
 
       
 
     <li><a href="#">Headlines</a> 
 
      \t <ul> 
 
<li><a href="#">Headlines All</a></li> 
 
<li><a href="#">Headlines Last Week</a></li> 
 
       </ul> 
 
      </li> 
 
    <li><a href="#">Pictures</a></li> 
 
      </li> 
 
<li class="icon"> 
 
    <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a> 
 
    </li>