title: Create menu using images using css in html
body: <p>I'm new in HTML and CSS.
  Want to create menu with image and also want to show menu separator, menu should be horizontally aligned.
  when we hover mouse on menu item, image and text color should change.
  It should be look like as per image.
  <img src="https://i.stack.imgur.com/3bgDn.png" alt="enter image description here"></p>
  
  <p>sry I forgot to upload the code, uploading here.
  but now I want to show some menu items on left side( left align) and others on right side( right align)</p>
  
  <pre><code>.mainmenu{
    background-color: black;
  }
  .mainmenu {
    margin-top: 20px;
    display: inline-block;
    position: relative;
    width: 100%;
   }
  
  .mainmenu li a {
    display: block;
    position: relative;
    text-decoration: none;
    text-align: center;
    font-size: 10px;
    color: gray;
    line-height: 32px;
    font-weight: bold;
    text-shadow: black 0 1px 0;
    font-family: sans-serif;
    border-right: 1px solid #030304;
    border-left: 1px solid #36393C;
    white-space: nowrap;
  }
  
  .mainmenu ul.menu {
    margin: 0;
    width: 100%;
  }
  
  .mainmenu ul.menu li {
    float: left;
    list-style: none;
    width: 16.666666666666668%;
  }
  
  .mainmenu ul.menu li a:hover {
    color: #76b900;
  }    
  
  img {
    border: 0;
    vertical-align: middle;
    max-width: 100%;
  }
  
  &lt;div&gt;
     &lt;div class="mainmenu "&gt;
    &lt;ul class="menu"&gt;
      &lt;li&gt;
            &lt;a href="#"&gt;
              &lt;img src="images/nav-icons/home.png"&gt;HOME&lt;/a&gt;
  
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#"&gt;
              &lt;img src="images/nav-icons/users.png"&gt;
              USERS
          &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
         &lt;a href="#"&gt;
              &lt;img src="images/nav-icons/gallary.png"&gt;
              GALLARY
             &lt;a/&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#"&gt;
              &lt;img src="images/nav-icons/community.png"&gt;
              COMMUNITY
          &lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks</p>