How to find out the width of all li?

Question

css

Hello! How to get total width of inner li elements?
It is necessary that the script count the internal li and find out the total width

<nav>
      <ul>
        <li>
          <a href="">Создание сайтов</a>
          <ul>
            <li>
              <a href="">Простой сайт</a>
            </li>
            <li>
              <a href="">Сайт-визитка</a>
            </li>
            <li>
              <a href="">Малый бизнес</a>
            </li>
            <li>
              <a href="">Лендинг</a>
            </li>
            <li>
              <a href="">Официальный сайт</a>
            </li>
          </ul>
        </li>
        <li class="active">
          <a href="">Продвижение</a>
          <ul>
            <li>
              <a href="">ТОП-10</a>
            </li>
            <li>
              <a href="">ТОП-9</a>
            </li>
            <li>
              <a href="">ТОП-8</a>
            </li>
            <li>
              <a href="">ТОП-7</a>
            </li>
          </ul>
        </li>
      </ul>
    </nav>

Thanks in advance!

Answer 1

jQuery(document).ready(function($) {
  var li = $('li');
  li.each(function() {
    var a = $(this).width();
    alert(a);
  });
});

Answer 2

var allWidth = 0;

[].forEach.call(document.querySelectorAll("li"), function(e){
   allWidth += e.offsetWidth;
});

alert(allWidth);

Answer 3

Maybe just calculate the width of ul ?