fix: studio dropdown hover styles (#433)

example/index.js

@@ -7,6 +7,7 @@ import { AppContext, AppProvider } from '@edx/frontend-platform/react';
 import Header from '@edx/frontend-component-header';
 
 import './index.scss';
+import StudioHeader from '../src/studio-header/StudioHeader';
 
 subscribe(APP_READY, () => {
   ReactDOM.render(
@@ -32,7 +33,35 @@ subscribe(APP_READY, () => {
       }}>
         <Header />
       </AppContext.Provider>
-      <h5 className="mt-2">Logged in state</h5>
+      <h5 className="mt-2  mb-5">Logged in state</h5>
+      <AppContext.Provider value={{
+        authenticatedUser: {
+          userId: '123abc',
+          username: 'testuser',
+          roles: [],
+          administrator: false,
+        },
+        config: getConfig(),
+      }}>
+        <StudioHeader
+          number="run123"
+          org="testX"
+          title="Course Name"
+          isHiddenMainMenu={false}
+          mainMenuDropdowns={[
+            {
+              id: 'content-dropdown',
+              buttonTitle: 'Content',
+              items: [{
+                href: '#',
+                title: 'Outline',
+              }],
+            },
+          ]}
+          outlineLink="#"
+        />
+      </AppContext.Provider>
+      <h5 className="mt-2">Logged in state for Studio header</h5>
     </AppProvider>,
     document.getElementById('root'),
   );