HTML - Agregarar una imagen a un menú

<ul id="navigation">

    <li><a href="index.php">Home</a></li>

    <li><a href="gafas-lectura.php">Productos</a>

        <ul>

			<li><a href="gafas-lectura.php">Gafas de Lectura</a></li>

			<li><a href="anteojos-sol.php">Anteojos para sol</a></li>

			<li><a href="armazones.php">Armazones</a></li>

			<li><a href="accesorios.php">Accesorios</a></li>

			<li><a href="exhibidores.php">Exhibidores</a></li>

			<li><a href="bufandas.php">Bufandas</a></li>

			<li><a href="paraguas.php">Paraguas</a></li>

			<li><a href="manicuria.php">Set de Manicur&iacute;a</a></li>

        </ul>

    </li>

    <li><a href="novedades.php" class="destaque">Novedades</a></li>

    <li><a href="empresa.php">Quienes somos</a></li>

    <li><a href="legales.php">Legales</a></li>

    <li><a href="contacto.php">Contacto</a></li>

    <li><a href="https://www.facebook.com/pages/Loveli/569014829776656?ref=hl" class="zocial facebook"></a></li>

</ul>

#navigation{display:inline-block;float:right;margin-top:60px}

#navigation li{position:relative;float:left}

#navigation a{position:relative;display:block;margin:0 0 0 30px;color:#959595;font-weight:500;font-size:14px}

#navigation>li>a{height:30px}

#navigation a:hover,#navigation .hover>a,#navigation .current>a{color:#A32335}

#navigation ul{position:absolute;top:30px;left:0;z-index:9999;display:none;margin:0 0 0 30px;padding:0;width:200px;border-radius:3px;background:#333;-webkit-box-shadow:0 2px 8px rgba(0,0,0,.35);box-shadow:0 2px 8px rgba(0,0,0,.35)}

#navigation ul li{float:none;border-bottom:1px solid #3d3d3d}

#navigation ul li:last-child{border-bottom:none}

#navigation ul li i{position:absolute;right:10px}

#navigation ul li i:before{margin-top:5px;color:#c2c2c2;content:"\f054";font-size:9px;font-family:'FontAwesome'}

#navigation ul a{display:block;margin:0;padding:7px 20px;color:#c2c2c2;font-size:12px}

#navigation ul a:hover,#navigation ul .hover>a,#navigation ul .current>a,#navigation ul .current>a:hover{color:#fff}

#navigation ul ul{top:0;left:200px;margin:0}

<ul id="navigation">

    <li><a href="index.php">Home</a></li>

   <li class="submenu">

        <a href="gafas-lectura.php">Productos <span class="arrow"></span></a>

        <ul>

            <li><a href="gafas-lectura.php">Gafas de Lectura</a></li>

            <li><a href="anteojos-sol.php">Anteojos para sol</a></li>

            <li><a href="armazones.php">Armazones</a></li>

            <li><a href="accesorios.php">Accesorios</a></li>

            <li><a href="exhibidores.php">Exhibidores</a></li>

            <li><a href="bufandas.php">Bufandas</a></li>

            <li><a href="paraguas.php">Paraguas</a></li>

            <li><a href="manicuria.php">Set de Manicur&iacute;a</a></li>

        </ul>

    </li>

    <li><a href="novedades.php" class="destaque">Novedades</a></li>

    <li><a href="empresa.php">Quienes somos</a></li>

    <li><a href="legales.php">Legales</a></li>

    <li><a href="contacto.php">Contacto</a></li>

    <li><a href="https://www.facebook.com/pages/Loveli/569014829776656?ref=hl" class="zocial facebook"></a></li>

</ul>

ul {

    list-style-type: none;

}

ul li a {

    text-decoration: none;

}

.submenu {

    position: relative;

}

.arrow {

    background-color: transparent;

    border: 6px solid transparent;

    border-top-color: #000;

    width: 0;

    height: 0;

    position: absolute;

    top: 5px;

    right: -15px;

    cursor: pointer;

}

#navigation li:hover span {

    border-top-color: #A32335;

}

#navigation li:hover > ul {

    display: block;

}