Html 响应导航菜单

我正在尝试开发一个响应性强的菜单。当没有响应时，菜单应如下所示：

当平板电脑/手机屏幕缩小时，如下图所示：

你可以在这里找到小提琴：

HTML代码：

<div id='cssmenu'>

<div class="logo">
    <img src="images/logo.png" />
</div>

  <ul>
     <li class='active'><a href='index.html'>Home</a></li>
     <li class='has-sub '><a href='#'>Products</a>
        <ul>
           <li class='has-sub '><a href='#'>Product 1</a>
              <ul>
                 <li><a href='#'>Sub Item</a></li>
                 <li><a href='#'>Sub Item</a></li>
              </ul>
           </li>
           <li class='has-sub '><a href='#'>Product 2</a>
              <ul>
                 <li><a href='#'>Sub Item</a></li>
                 <li><a href='#'>Sub Item</a></li>
              </ul>
           </li>
        </ul>
     </li>
     <li><a href='#'>About</a></li>
     <li><a href='#'>Contact</a></li>
  </ul>
</div>

我真的很感谢你们的帮助

试试这个

<style>
    .menu {
        border: 0;
        margin: 0 0 10px 0;
        padding: 0;
        width: 100%;
    }

    .menu ul {
        display: table;
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .menu li {
        display: table-cell;
        background-color: #eee;
    }

    .menu li:hover {
        background-color: #ccc;
    }

    .menu a {
        display: block;
        padding: 10px 0;
        width: 100%;
    }

    .menu li, .menu a {
        text-align: center;
    }

    @Media screen and (max-width:480px) {
        div.menu li {
            display: block !important;
            width: 100% !important;
        }
    }
</style>
<div class="menu">
    <ul>
        <li>Your logo here</li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Company</a></li>
        <li><a href="#">Blog</a></li>
    </ul>
</div>

.菜单{
边界：0；
裕度：0 10px 0；
填充：0；
宽度：100%；
}
.菜单ul{
显示：表格；
列表样式：无；
保证金：0；
填充：0；
宽度：100%；
}
李先生{
显示：表格单元格；
背景色：#eee；
}
.菜单李：悬停{
背景色：#ccc；
}
.菜单a{
显示：块；
填充：10px0；
宽度：100%；
}
.菜单李，.菜单a{
文本对齐：居中；
}
@媒体屏幕和屏幕（最大宽度：480px）{
李宗宪{
显示：块！重要；
宽度：100%！重要；
}
}

你的标志在这里

你是否制作了任何可以上传的代码这是我做的事情：你必须通过不，@ArunMaddheshia，他肯定不需要使用该插件。这可能是一个选项，但肯定不是他必须使用的。我不希望菜单在菜单图标中折叠，我希望菜单在默认情况下全部可见

<style>
    .menu {
        border: 0;
        margin: 0 0 10px 0;
        padding: 0;
        width: 100%;
    }

    .menu ul {
        display: table;
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .menu li {
        display: table-cell;
        background-color: #eee;
    }

    .menu li:hover {
        background-color: #ccc;
    }

    .menu a {
        display: block;
        padding: 10px 0;
        width: 100%;
    }

    .menu li, .menu a {
        text-align: center;
    }

    @Media screen and (max-width:480px) {
        div.menu li {
            display: block !important;
            width: 100% !important;
        }
    }
</style>
<div class="menu">
    <ul>
        <li>Your logo here</li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Company</a></li>
        <li><a href="#">Blog</a></li>
    </ul>
</div>