HTML: Button Bar Semantics - Which Elements Should I Use?

HTML: Button Bar Semantics - Which Elements Should I Use?

I'm building a button bar for rich text editing features on a
contenteditable.
I want to group list items into boxes.
for instance, bold, italic, and underline would share a box,
alignment options would have another, etc..
What's the ideal HTML markup for this scenario?
The <ul> Example:
<ul class="bar">
<div class="group-font">
<li><a class="button-bold">Bold</a></li>
<li><a class="button-italic">Italic</a></li>
<li><a class="button-underline">Underline</a></li>
</div>
<div class="group-align">
<li><a class="button-alignLeft">Left</a></li>
<li><a class="button-alignCenter">Center</a></li>
</div>
</ul>
Can <li>'s validly be indirect descendants (within a div or otherwise) of
their list container, like in the example above?

The <menu> Example:
<menu class="bar">
<div class="group-type">
<a class="button-bold">Bold</a>
<a class="button-italic">Italic</a>
<a class="button-underline">Underline</a>
</div>
<div class="group-align">
<a class="button-alignLeft">Left</a>
<a class="button-alignCenter">Center</a>
</div>
</menu>

What would be considered the most elegant solution?