diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx
index 87740c7f..d48e62e8 100644
--- a/client/components/Nav.jsx
+++ b/client/components/Nav.jsx
@@ -99,10 +99,13 @@ class Nav extends React.PureComponent {
               <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
             </button>
             <ul className="nav__dropdown">
-              <li className="nav__dropdown-heading">
+              <button
+                onClick={this.toggleDropdown.bind(this, 'file')}
+                className="nav__dropdown-heading"
+              >
                 <span>File</span>
                 <InlineSVG src={triangleUrl} />
-              </li>
+              </button>
               <li className="nav__dropdown-item">
                 <button
                   onClick={() => {
@@ -210,10 +213,13 @@ class Nav extends React.PureComponent {
               <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
             </button>
             <ul className="nav__dropdown">
-              <li className="nav__dropdown-heading">
+              <button
+                onClick={this.toggleDropdown.bind(this, 'edit')}
+                className="nav__dropdown-heading"
+              >
                 <span>Edit</span>
                 <InlineSVG src={triangleUrl} />
-              </li>
+              </button>
               <li className="nav__dropdown-item">
                 <button
                   onClick={() => {
@@ -278,10 +284,13 @@ class Nav extends React.PureComponent {
               <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
             </button>
             <ul className="nav__dropdown">
-              <li className="nav__dropdown-heading">
+              <button
+                onClick={this.toggleDropdown.bind(this, 'sketch')}
+                className="nav__dropdown-heading"
+              >
                 <span>Sketch</span>
                 <InlineSVG src={triangleUrl} />
-              </li>
+              </button>
               <li className="nav__dropdown-item">
                 <button
                   onClick={() => {
@@ -346,10 +355,13 @@ class Nav extends React.PureComponent {
               <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
             </button>
             <ul className="nav__dropdown">
-              <li className="nav__dropdown-heading">
+              <button
+                onClick={this.toggleDropdown.bind(this, 'help')}
+                className="nav__dropdown-heading"
+              >
                 <span>Help & Feedback</span>
                 <InlineSVG src={triangleUrl} />
-              </li>
+              </button>
               <li className="nav__dropdown-item">
                 <button
                   onClick={() => {
@@ -420,10 +432,13 @@ class Nav extends React.PureComponent {
               </button>
               <InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
               <ul className="nav__dropdown">
-                <li className="nav__dropdown-heading">
+                <button
+                  onClick={this.toggleDropdown.bind(this, 'account')}
+                  className="nav__dropdown-heading"
+                >
                   <span>My Account</span>
                   <InlineSVG src={triangleUrl} />
-                </li>
+                </button>
                 <li className="nav__dropdown-item">
                   <Link
                     to={`/${this.props.user.username}/sketches`}