博客菜单未显示在手机屏幕上

Question

Blogger Blog的菜单不在手机上显示，并且在手机上显示时会产生许多空白行。 但是它可以在计算机屏幕上正常工作。 代码有什么问题？

这是博客的链接： 我的博客

菜单=主页| 联系我们| 关于我们| |اکستان| .....

主题的菜单代码：

<!-- main menu -->
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

.active {
  background-color: red;
}
</style>



<ul>
  <li><a class='active' href='https://www.dailylekhaari.com'>Home</a> </li>
  <li><a href='https://www.dailylekhaari.com/p/contact-us.html'>Contact Us</a></li>
  <li><a href='https://www.dailylekhaari.com/p/about.html'>About Us</a></li>

  <li><h1 style='     padding: 14px 16px;     padding-top: 14px;     padding-right: 16px;     padding-bottom: 0px;     padding-left: 16px; '><font color='white'>*   </font></h1></li>
<li><a href='https://www.dailylekhaari.com/search/label/%D9%BE%D8%A7%DA%A9%D8%B3%D8%AA%D8%A7%D9%86'>پاکستان</a></li>
<li><a href='https://www.dailylekhaari.com/search/label/%D8%A8%DB%8C%D9%86%20%D8%A7%D9%84%D8%A7%D9%82%D9%88%D8%A7%D9%85%DB%8C'>بین الاقوامی</a></li>
<li><a href='https://www.dailylekhaari.com/search/label/%D8%A7%D8%B3%D9%84%D8%A7%D9%85'>اسلام </a></li>
<li><a href='https://www.dailylekhaari.com/search/label/%D8%B3%D8%A7%D8%A6%D9%86%D8%B3%20%D9%88%20%D9%B9%DB%8C%DA%A9%D9%86%D8%A7%D9%84%D9%88%D8%AC%DB%8C'>سائنس ٹیکنالوجی</a></li>
<li><a href='https://www.dailylekhaari.com/search/label/%DA%A9%DA%BE%DB%8C%D9%84'>کھیل</a></li>
<li><a href='https://www.dailylekhaari.com/search/label/%DA%A9%D8%A7%D9%84%D9%85%D8%B2'>کالمز</a></li>
<li><a href='https://www.dailylekhaari.com/search/label/%D8%B3%DB%8C%D8%A7%D8%B3%D8%AA'>سیاست</a></li>

</ul>



<!-- main menu end -->

Answer 1

只需删除HTML注释，删除<!-- hamara main menu和hamara main menu end -->

要在移动设备上显示菜单，请将其添加到CSS

.header-wrap ul { overflow: visible !important }

Answer 2

这是因为您未指定float或仅可以使用clearfix hack。

只需在headerwrap之后添加headerwrap 。

<div id="header-wrap"> ... </div>
<!-- This clearfix used for clearing floats between elements -->
<div class="clearfix"></div>