Custom Menu with Image

This is for a sidebar menu. Add the following to a HTML/CSS block. Change the "#" for the URL of that page and change the image to suit.

HTML


<ul class="custom-menu">

  <li><a href="#">One</a></li>

  <li><a href="#">Two</a></li>

  <li><a href="#">Three</a></li>

  <li><a href="#">Four</a></li>

  <li><a href="#">Five</a></li>

  <li class="sub"><a href="#"><img src="https://photos.smugmug.com/photos/i-ss48vdC/0/b761c1e4/O/i-ss48vdC.png" width="51" height="30" /></a>

    <ul>

      <li><a href="#">A</a></li>

      <li><a href="#">B</a></li>

      <li><a href="#">C</a></li>

      <li><a href="#">D</a></li>

    </ul>

  </li>

</ul>

CSS


.custom-menu { background-color: #1d1d1d;}

.custom-menu,
.custom-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 10;
}

.custom-menu li {
  margin: 0;
  padding: 0;
  position: relative;
  transition: background 0.5s;
}

  .custom-menu li a {
    font-size: 30px; /* same size as image height */
    color: #ededf0;
    border-top: 1px solid #333;
    display: block;
    text-decoration: none;
    padding: 15px 25px;
    position: relative;
  }

    .custom-menu li a:hover {color: #87878c;}

    .custom-menu li:first-child a {border-top: 0;}

.custom-menu .sub::after {
  content: '';
  position: absolute;
  display: inline;
  top: 50%;
  margin-top: -4px;
  right: 8px;
  border-width: 4px;
  border-style: solid;
  border-color: transparent transparent transparent #ededf0;
  transition: border-color 0.5s;
}

  .custom-menu .sub:hover::after {border-color: transparent transparent transparent #87878c;}

/**
* Sub level menu items
************************************************/
.custom-menu li.sub ul {
  min-width: 180px;
  position: absolute;
  display: none;
  left: 100%;
  top: 0;
  background-color: #1a1a1a;
  border: 1px solid #1f1f21;
  box-shadow: 0 0 12px 4px rgba(0,0,0,0.12);
}

.custom-menu ul li a {
  font-size: 16px;
  border-top: 1px solid #1f1f21;
}

.custom-menu ul li:first-child a {border-top: 0;}

.custom-menu ul li:hover a {background-color: #1f1f21;}

.custom-menu li:hover > ul {display: block;}

/**
* Mobile
************************************************/
@media only screen and ( max-width: 736px ) {

  .custom-menu,
  .custom-menu ul,
  .custom-menu li ul {width: 100%;}

  .custom-menu li ul {left: -1px; top: 55px;}

  .custom-menu .sub::after {border-color: #ededf0 transparent transparent transparent;}

  .custom-menu .sub:hover::after {border-color: #87878c transparent transparent transparent;}

}