Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Here is the jsFiddle: <a href="http://jsfiddle.net/FVjhQ/2/" rel="nofollow">http://jsfiddle.net/FVjhQ/2/</a></p> <p><strong>CSS</strong></p> <pre><code>#profile-nav { margin-bottom: 25px; } .nav-container, .nav-container li { margin: 0; padding: 0; } .nav-container { clear: right; float: right; } .nav-container li { border-left: 1px solid #E1E1E1; float: left; list-style: none; line-height: 36px; } .nav-container a { font: 7.25pt Georgia, serif; color: #E1915C; text-decoration: none; font-weight: bold; padding: 10px; text-transform: uppercase; } .nav-container a:hover { color: #369AAA; } .nav-container .last-link { border-right: 1px solid #E1E1E1; } .no-border li { border: 0; } </code></pre> <p><strong>HTML</strong></p> <pre><code>&lt;ul id="profile-nav" class="nav-container no-border"&gt; &lt;li&gt; &lt;a href="#" title="My Profile"&gt;My Profile&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#" title="Account Profile"&gt;Account Profile&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#" title="Sign Out"&gt;Sign Out&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;ul id="component-nav" class="nav-container"&gt; &lt;li&gt; &lt;a href="#" title="My Component Books"&gt;My Component Books&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#" title="New Component Books"&gt;New Component Books&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#" title="Notifications"&gt;Notifications&lt;/a&gt; &lt;/li&gt; &lt;li class="last-link"&gt; &lt;a href="#" title="System Logs"&gt;System Logs&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload