JSFiddle - React, Tailwind, and code Playground

by Lynda333

HTML

<link rel="stylesheet" href="http://www.lfrieling.com/css/style.css">
<nav id="nav-wrap" class="ten columns">
					<ul id="nav">
				<li><a data-description="All Start Here" href="/">Home</a></li>
				<li><a data-description="My Career" href="#">Professional</a>
					<ul>
                    	<li><a href="#">Professional Bio</a></li>
						<li><a href="#">Honors &amp; Memberships</a></li>
                        <li><a href="#">Author &amp; Lecturer</a></li>
						<li><a href="#">Resources</a></li>
					</ul>
				</li>
				<li><a data-description="The Thinking Man," data-description2="The Artist," data-description3="The Philosopher"  href="/the-thinking-man">The Renaissance Man</a>
                	<ul>
                    	<li><a href="#">Blog/Appearances</a></li>
                        <li><a href="#">Our Finite and Boundless Universe</a></li>
                    	<li><a href="#">My Photos</a></li>
                    	<li><a href="#">Book Recommendations</a></li>
                    </ul>
                </li>
				<li><a data-description="Contact Me"  href="#">Contact</a></li>
			</ul>
	</nav>
		<!-- /nav-wrap -->

CSS

/* NAVIGATION BAR  */

#nav, #nav li {	 white-space: normal; }
#nav li { white-space: normal; }

/* nav link */
#nav a {  white-space: normal;	 }

/* Remove white-space:pre; and all works fine */
#nav a:after {   content: attr(data-description)  "\A" attr(data-description2) "\A" attr(data-description3); white-space:pre;  }
#nav a:hover, #nav li:hover > a {  white-space: normal;  }


/* nav dropdown */
#nav ul { white-space: normal;  }
#nav ul li {  white-space: normal;	}
#nav ul li a, #nav li.current ul li a, #nav ul li:hover > a {   white-space: normal; }
#nav ul li a:hover, #nav li.current ul li a:hover { white-space: normal; }
#nav li:hover > ul {  white-space: normal; }