Which html markup for menu, which consumes fewer browser features?

Below is a simplified HTML markup for a menu that I use:

<ul>
   <li><a href="#" title="Teste X">Teste X</a></li>
   <li><a href="#" title="Teste Y">Teste Y</a></li>
   <li><a href="#" title="Teste Z">Teste Z</a>
       <ul>
           <li><a href="#" title="Teste ZA">Teste ZA</a></li>
           <li><a href="#" title="Teste ZB">Teste ZB</a></li>
           <li><a href="#" title="Teste ZC">Teste ZC</a></li>
       </ul>
   </li>
</ul>

I'm thinking of removing text from a tags and using% cs% CSS to render content of text tags based on a attribute.

In this second tag, it should be included in the CSS:

a:after{ content: attr(title); }

And the HTML would look like this:

<ul>
   <li><a href="#" title="Teste X"></a></li>
   <li><a href="#" title="Teste Y"></a></li>
   <li><a href="#" title="Teste Z"></a>
       <ul>
           <li><a href="#" title="Teste ZA"></a></li>
           <li><a href="#" title="Teste ZB"></a></li>
           <li><a href="#" title="Teste ZC"></a></li>
       </ul>
   </li>
</ul>

The second version has a much smaller HTML, but I do not know if it consumes more or less browser features.

The application I'm working on is very large, with a lot of JavaScript, and needs to optimize as much as possible, in order to improve performance and reduce processing and memory costs in the browser.

What I need to know is:

Regardless of download time, what are the pros and cons of each of the above two implementations in terms of processing, RAM, or other performance variables?