Increasing the width of a nested (ul ul ul li) drop down nav list item

Question

Here is my site: http://www.simply-a-christian.com/index.html

On the nav bar, if you move to:

• Beliefs
  • Marian Dogmas

you can see that the text in the list item of each Marian Dogma (there are four listed) is wrapped. I'd like to increase the width of each of the four individual list items so that the text of the list item is in a single line. How do I accomplish this?

https://jsfiddle.net/H3br3wHamm3r81/aq8au39v/

HTML

<ul>    
<li><a href="beliefs.html" title="Beliefs">Beliefs</a>
      <ul>
      <li><a href="beliefs/marian_dogmas.html" title="Marian Dogmas">Marian Dogmas</a>
            <ul>
            <li><a href="beliefs/marian_dogmas/assumption_of_mary.html" title="Assumption of Mary">Assumption of Mary</a></li>
            <li><a href="beliefs/marian_dogmas/immaculate_conception.html" title="Immaculate Conception">Immaculate Conception</a></li>
            <li><a href="beliefs/marian_dogmas/mother_of_god.html" title="Mother of God">Mother of God</a></li>
            <li><a href="beliefs/marian_dogmas/perpetual_virginity.html" title="Perpetual Virginity">Perpetual Virginity</a></li>
            </ul>
      </li>
      </ul>
</li>
</ul>

Stylesheet may be found in link above.

Answer 1

Add white-space and remove the float for the particular unordered list by using a custom class like this:

HTML:

<ul class="listCustom">
    <li><a href="beliefs/marian_dogmas/assumption_of_mary.html" title="Assumption of Mary">Assumption of Mary</a></li>
    <li><a href="beliefs/marian_dogmas/immaculate_conception.html" title="Immaculate Conception">Immaculate Conception</a></li>
    <li><a href="beliefs/marian_dogmas/mother_of_god.html" title="Mother of God">Mother of God</a></li>
    <li><a href="beliefs/marian_dogmas/perpetual_virginity.html" title="Perpetual Virginity">Perpetual Virginity</a></li>
</ul>

CSS:

.listCustom li  {
  white-space: nowrap;
  float: none;
}

Here is a jsfiddle with the above codes: http://jsfiddle.net/AndrewL32/aq8au39v/2

Answer 2

By adding this style you prevent all menu items to break, including the Maria dogmas:

header nav li {
    white-space: nowrap;
}

You may still add explicit breaks by adding a <br> tag in the text. Also you may want to consider adding a special class, like menu to the nav element that contains the menu. Otherwise this style may affect other navigation block you may want to add later.