From: Jeremy Englert <jeremy@cmsadgroup.com>
Date: Mon, 21 Mar 2016 01:14:23 +0000 (-0700)
Subject: Preventing FOUC
X-Git-Tag: v6.2.1~13^2~6^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F8436%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Preventing FOUC
---

diff --git a/docs/pages/dropdown-menu.md b/docs/pages/dropdown-menu.md
index 809ef65fe..f95c0d108 100644
--- a/docs/pages/dropdown-menu.md
+++ b/docs/pages/dropdown-menu.md
@@ -152,3 +152,24 @@ Add the `.vertical` class to the top-level menu to make it vertical. Sub-menus a
 ## Sticky Navigation
 
 See the documentation for the [Sticky](sticky.html#sticky-navigation) plugin to see how to easily make a sticky nav bar. 
+
+---
+
+### Preventing FOUC
+
+Before the JavaScript on your page loads, the dropdown menus will not have arrows. However, once the JavaScript file has loaded, the arrows will appear causing a [flash of unstyled content](https://en.wikipedia.org/wiki/Flash_of_unstyled_content). You can prevent this by adding the `.is-dropdown-submenu-parent` class manually. 
+
+```html
+<ul class="dropdown menu" data-dropdown-menu>
+  <li class=".is-dropdown-submenu-parent">
+    <a href="#">Item 1</a>
+    <ul class="menu">
+      <li><a href="#">Item 1A</a></li>
+      <!-- ... -->
+    </ul>
+  </li>
+  <li><a href="#">Item 2</a></li>
+  <li><a href="#">Item 3</a></li>
+  <li><a href="#">Item 4</a></li>
+</ul>
+```
\ No newline at end of file