<li class="coupontooltip_li_list">
<div>
    <img class="coupontooltip_img" src="http://lorempixum.com/100/100/nature/1">
    <span class="coupontooltiplistspan">Distance: 200m</br>Duration: 00:01:30</br>Laps: 4</span>
</div>

<div>
     <ul id="cellvaluelist">
         <li><a href="#" class="swim">MAIN 1</a></li>
         <li><a href="#" class="chrono">MAIN 2</a></li>
         <li><a href="#" class="couponcode">MAIN 3
                <div class="coupontooltip">
                    <ul class="coupontooltip_ul_list">
                        <li class="coupontooltip_li_list">
                            <div>
                                <img class="coupontooltip_img" src="http://lorempixum.com/100/100/nature/1">
                                <span class="coupontooltiplistspan">Distance</br>Duration: </br>Laps: </span>
                            </div>
                        </li></br>

                        <li class="coupontooltip_li_list">
                            <div>
                                <img class="coupontooltip_img" src="http://lorempixum.com/100/100/nature/1">
                                <span class="coupontooltiplistspan">SET 1: abcd</br>SET 2: EFGH</br>SET 3: ijkl</span>
                            </div>
                        </li></br>

                        <li class="coupontooltip_li_list">
                            <div>
                                <img class="coupontooltip_img" src="http://lorempixum.com/100/100/nature/1">
                                <span class="coupontooltiplistspan">Distance: 200m</br>Duration: 00:01:30</br>Laps: 4</span>
                            </div>
                        </li>

                    </ul>
                </div>
              </a>
         </li>
     </ul>
</div>

#cellvaluelist {
  font-family:'Trebuchet MS', Tahoma, Sans-serif;
  font-size: 20px;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#cellvaluelist > li {
  list-style-type: none;
  text-align: left;
  border-bottom: 2px solid #F5F5F5;
}

#cellvaluelist > li:last-child {
  border: none;
}

#cellvaluelist > li a {
  text-decoration: none;
  color: #000;
  display: block;
  width: 150px;

  -webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
  -moz-transition: font-size 0.3s ease, background-color 0.3s ease;
  -o-transition: font-size 0.3s ease, background-color 0.3s ease;
  -ms-transition: font-size 0.3s ease, background-color 0.3s ease;
  transition: font-size 0.3s ease, background-color 0.3s ease;
}

#cellvaluelist > li a:hover {
  background: #F5F5F5;
}

.swim {
  background: #626FD1;
  font-size: 15px;
  font-weight: normal;
}

.chrono {
    background: #EDCF47;
    font-size: 15px;
    font-weight: normal;
}

.couponcode {
    background: #47ED4D;
    font-size: 15px;
    font-weight: normal;
}

.couponcode:hover .coupontooltip {
    display: block;
}

.coupontooltip {
    display: none;
    background: #FFCC00;
    position: absolute;
    z-index: 1000;
}

.coupontooltip_ul_list, .coupontooltip_li_list {
    background: #FF0000;
    list-style-type: none;
    float: left;
    margin: 0;
    padding: 0;
    width: 100%
}

 .coupontooltip_li_list {
    background: #D6D6D6;
    border-bottom: 2px solid #F5F5F5;
 }

.coupontooltip_img {
    width: 50px;
    height: 50px;
    float: left;
    padding: 5px;
}

.coupontooltiplistspan {
   display: inline-block;
}

<div class="coupontooltip">

.coupontooltip {
    display: none;
    background: #FFCC00;
    position: absolute;
    z-index: 1000;
}

.coupontooltip_ul_list, .coupontooltip_li_list {
    background: #FF0000;
    list-style-type: none;
    float: left;
    margin: 0;
    padding: 0;
    width: 100%
}

.coupontooltip_ul_list {
    display: none;
    background: #FFCC00;
    position: absolute;
    z-index: 1000;
}

.coupontooltip_ul_list, .coupontooltip_li_list {
    background: #FF0000;
    list-style-type: none;
    float: left;
    margin: 0;
    padding: 0;
    width: 100%
}

.couponcode:hover .coupontooltip {
    display: block;
}

<div>
    <ul id="cellvaluelist">
        <li>
            <a href="#" class="swim">MAIN 1</a>
        </li>
        <li>
            <a href="#" class="chrono">MAIN 2</a>
        </li>
        <li>
            <a href="#" class="couponcode">MAIN 3
                <ul class="coupontooltip_ul_list">
                    <li class="coupontooltip_li_list">
                        <img class="coupontooltip_img" src="http://lorempixum.com/100/100/nature/1">
                        <span class="coupontooltiplistspan">Distance</br>Duration: </br>Laps: </span>
                    </li>
                    </br>
                    <li class="coupontooltip_li_list">
                        <img class="coupontooltip_img" src="http://lorempixum.com/100/100/nature/1">
                        <span class="coupontooltiplistspan">SET 1: abcd</br>SET 2: EFGH</br>SET 3: ijkl</span>
                    </li></br>
                    <li class="coupontooltip_li_list">
                        <img class="coupontooltip_img" src="http://lorempixum.com/100/100/nature/1">
                        <span class="coupontooltiplistspan">Distance: 200m</br>Duration: 00:01:30</br>Laps: 4</span>
                    </li>
                </ul>
            </a>
        </li>
    </ul>
</div>