This is a good start if you need a full with responsive menu for your website with some links having sub-navigation and others don’t. This is a pretty basic concept and can be worked on to achieve something great.

Lets start with the HTML. As it includes levels of navigation links so the html would be a big if you have large number of links. I have included images in the sub-navigation, but that area can be used to include pretty much anything and would need custom css to style the elements included there.

HTML

<div class=“nav-wrapper”>

<div class=“nav-inner”>

<ul class=“nav”>
<li>
        <a href=“#”>
          About Us
        </a>
<ul class=“nav-submenu”>
<li><a href=“#”><img src=“http://vivekarora.com/bottle1.png”></a></li>
<li><a href=“#”><img src=“http://vivekarora.com/bottle2.png”></a></li>
<li><a href=“#”><img src=“http://vivekarora.com/bottle3.png”></a></li>
<li><a href=“#”><img src=“http://vivekarora.com/bottle1.png”></a></li>
</ul>
</li>
<li>
        <a href=“#”>
          Our Mission
        </a>
<ul class=“nav-submenu”>
<li><a href=“#”><img src=“http://vivekarora.com/bottle2.png”></a></li>
<li><a href=“#”><img src=“http://vivekarora.com/bottle2.png”></a></li>
<li><a href=“#”><img src=“http://vivekarora.com/bottle3.png”></a></li>
<li><a href=“#”><img src=“http://vivekarora.com/bottle3.png”></a></li>
</ul>
</li>
<li>
        <a href=“#”>
         Our Team
        </a></li>
<li>
        <a href=“#”>
          Contact Us
        </a></li>
</ul>
</div>
</div>