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

Question

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

Concept 2

I am wondering if I should have structured my <div>s better or if this should be wrapped in a <ul> instead since <div class="locale"> could be reduced in the CSS with .international li.

HTML

<div class="international"> 
 <div class="locale">
 <a href="#"> <!-- link pending -->
 North America
 <div class="americas"></div>
 </a>
 </div>
 <div class="locale">
 <a href="#"> <!-- link pending -->
 Europe
 <div class="europe"></div>
 </a>
 </div>
 <div class="locale">
 <a href="#"> <!-- link pending -->
 Korea
 <div class="korea"></div>
 </a>
 </div>
 <div class="intlButton">
 <a href="#"> <!-- link pending -->
 <i class="fa fa-globe"></i>
 </a>
 </div>
 <!-- Planned functionality for production is not shown in this project --> 
</div> <!--/ .international -->

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; 
}

Answer 1

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:

<ul class="nav-localization">
 <li class="locale">
 <a href="#">
 North America
 </a>
 <ul class="sub-nav americas"></ul>
 </li><!--
 --><li class="locale">
 <a href="#">
 Europe
 </a>
 <ul class="sub-nav europe"></ul>
 </li><!--
 --><li class="locale">
 <a href="#">
 Korea
 </a>
 <ul class="sub-nav korea"></ul>
 </li><!--
 --><li class="intlButton">
 <a href="#">
 <i class="fa fa-globe"></i>
 </a>
 </li>
</ul>

How you would select:

.nav-localization {}
.nav-localization > li {}
.nav-localization > li > a {}
.nav-localization .sub-nav {}