Is this HTML structure and CSS DRY enough in this country selection menu?

I have built this conceptual design of a localization menu on this CodePen

I am wondering if I should have structured my `s better or if this should be wrapped in a instead since could be reduced in the CSS with .international li`.

HTML

  

  
     
      North America
      
    
  

  
     
      Europe
      
    
  

  
     
      Korea
      
    
  

  
     
      
    
  
   
 

CSS

.international {
  background-color: rgb(36, 30, 30);
  color: #fff;
  letter-spacing: 1px;
  padding: 12px 0;
  width: 100%;
}

.locale {
  display: inline-block;
  margin-left: 6px;
  vertical-align: middle;
}
.locale a { color: #fff; text-decoration: none; }

.americas, .europe, .korea {
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/101702/flags-small.png');
  background-repeat: no-repeat;
  margin-top: 3px;
}
.americas {
  background-position: 0px 0px; 
  height: 11px;
  width: 48px;
}

.europe {
  background-position: -48px 0px; 
  height: 11px;
  width: 48px;
}
.korea {
  background-position: -96px 0px; 
  height: 11px;
  width: 16px;
}

.intlButton { 
  float: right;
  font-size: 24px;
  margin-right: 6px;
}

.intlButton a { color: #444; }
.intlButton i {
  background-color: rgba(225, 225, 225, .7); 
  border-radius: 3px;
  padding: 4px; 
}

This should be an ul. Even without CSS you will have a navigational structure. How about giving your nav a better suited name like .nav-localization?

Also I guess the div's inside your links will act like as sub navigations? These would be ul's as well then.

I've added comments to get rid of the whitespace between the list-items, since you're using display: inline-block;. This looks quite dirty, but it's the best solution for the whitespace issue and inline-block.

Here is the markup, I'd go for:

    
        
            North America
        
        
    
        
            Europe
        
        
    
        
            Korea
        
        
    
        
            
        
    

How you would select:

.nav-localization {}

.nav-localization > li {}

.nav-localization > li > a {}

.nav-localization .sub-nav {}

StackExchange Code Review Q#40586, answer score: 3