Custom tooltip containing a list

I'm looking to improve my code as seen in the demo link below. The code displays a list in a tooltip. The tooltip is accessed by hovering over the last element of the main list.

Here's the demo.

The ultimate objective is to wrap only one of the below list item in the code in a JS for loop which will dynamically create more than one list item.

 
  
      
    Distance: 200mDuration: 00:01:30Laps: 4 

Full HTML code:

  
       
         MAIN 1 
         MAIN 2 
         MAIN 3 
                  
                      
                         
                              
                                  
                                DistanceDuration: Laps:  
                             
                         

                         
                              
                                  
                                SET 1: abcdSET 2: EFGHSET 3: ijkl 
                             
                         

                         
                              
                                  
                                Distance: 200mDuration: 00:01:30Laps: 4 
                             
                         

                     
                  
                
          
      

Full CSS code:

```
#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, b

You don't need this div

and then you would just move the CSS for it into the CSS for the ul that is inside that div currently.

so instead of this

.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%    
}

You will end up with this:

.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%    
}

don't forget to change the .coupontooltip to .coupontooltip_ul_list Here:

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

otherwise it won't function.

I would also get rid of the other divs in your code

the image tags and the span tags (which I am unsure you need these either as the li tags are text tags anyway) are already held by the li tag and you aren't doing anything with these div tags, they are just clutter and add an extra indentation that you don't need.

with the span, I would just make this another list to be honest with you or maybe even a table, they are displaying data

Here is what your HTML should look like (without changing those spans to tables/lists, I will let you play with that when you are inserting the data with your JavaScript loops)

    
        
            MAIN 1
        
        
            MAIN 2
        
        
            MAIN 3 
                  
                     
                          
                        DistanceDuration: Laps:  
                    
                     
                     
                          
                        SET 1: abcdSET 2: EFGHSET 3: ijkl 
                     
                     
                          
                        Distance: 200mDuration: 00:01:30Laps: 4 
                     
                 
             
        
    

#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_ul_list {
display: block;
}
.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%
}
.coupontooltip_li_list {
background: #D6D6D6;
border-bottom: 2px solid #F5F5F5;
}
.coupontooltip_img {
width: 50px;
height: 50px;
float: left;
padding: 5px;
}
.coupontooltiplistspan {
display: inline-block;
}



-
MAIN 1


-
MAIN 2


-
MAIN 3



DistanceDuration: Laps:




SET 1: abcdSET 2: EFGHSET 3: ijkl



Distance: 200mDuration: 00:01:30Laps: 4







StackExchange Code Review Q#85584, answer score: 4