Title: Dropdown menu css
Last modified: January 16, 2018

---

# Dropdown menu css

 *  Resolved [iwol](https://wordpress.org/support/users/iwol/)
 * (@iwol)
 * [8 years, 2 months ago](https://wordpress.org/support/topic/dropdown-menu-css-2/)
 * Hello, the submenu items under “projects”) has white background and the highlight
   on hover isn’t adjusted when the page is in full screen. Anybody can help with
   the css? thanks!!!
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fdropdown-menu-css-2%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 6 replies - 1 through 6 (of 6 total)

 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [8 years, 2 months ago](https://wordpress.org/support/topic/dropdown-menu-css-2/#post-9870531)
 * Can you explain what the issue is?
 *  Thread Starter [iwol](https://wordpress.org/support/users/iwol/)
 * (@iwol)
 * [8 years, 2 months ago](https://wordpress.org/support/topic/dropdown-menu-css-2/#post-9870852)
 * the problem is the menu item PROJECTS.. when i hover on it, there is a submenu
   popping up and it has a white background, pink border and the highlight of the
   menu item is going beyond the frame of the box.
    I would like to change the white
   background to the color of the main background or at least get rid of the border
   line. ALso would like to fix the size of the highlight.
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [8 years, 2 months ago](https://wordpress.org/support/topic/dropdown-menu-css-2/#post-9872103)
 * > is going beyond the frame of the box.
 * This is caused by your Custom CSS in Siteorigin:
 *     ```
       .menu li {
           display: inline-block;
           float: none;
           margin-left: -5px;
       }
       ```
   
 * Specifically this line:
 *     ```
           margin-left: -5px;
       ```
   
 * If you still want to keep that Custom CSS, then make sure to only apply it to
   top-level navigation items and not dropdown items using the ‘greater than’ selector:
 *     ```
       .menu > li {
           display: inline-block;
           float: none;
           margin-left: -5px;
       }
       ```
   
 * Otherwise remove that line.
 * > I would like to change the white background to the color of the main background
   > or at least get rid of the border line.
 * In the “Additional CSS” section of the dashboard add this:
 *     ```
       @media screen and (min-width: 48em) {
   
           .colors-custom #site-navigation ul ul {
               border: none;
               background: red;
           }
       }
       ```
   
 * _[https://codex.wordpress.org/CSS#Custom\_CSS\_in\_WordPress](https://codex.wordpress.org/CSS#Custom_CSS_in_WordPress)_
 *  Thread Starter [iwol](https://wordpress.org/support/users/iwol/)
 * (@iwol)
 * [8 years, 2 months ago](https://wordpress.org/support/topic/dropdown-menu-css-2/#post-9872760)
 * great! all worked except for the little triangle which still appears when hovering
   over the “projects” menu item.. the triangle background is white and has a pink
   frame; could you pls help with the css for changing that?
    thanks!
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [8 years, 2 months ago](https://wordpress.org/support/topic/dropdown-menu-css-2/#post-9872799)
 * Instead of what I recommended when I said “In the “Additional CSS” section of
   the dashboard add this”, try adding this:
 *     ```
       @media screen and (min-width: 48em) {
   
           .colors-custom #site-navigation ul ul {
               border: none;
               background: #eae6e7;
           }
   
           .main-navigation ul li.menu-item-has-children.focus:before, 
           .main-navigation ul li.menu-item-has-children:hover:before, 
           .main-navigation ul li.menu-item-has-children.focus:after, 
           .main-navigation ul li.menu-item-has-children:hover:after, 
           .main-navigation ul li.page_item_has_children.focus:before, 
           .main-navigation ul li.page_item_has_children:hover:before, 
           .main-navigation ul li.page_item_has_children.focus:after, 
           .main-navigation ul li.page_item_has_children:hover:after {
               display: none;
           }
       }
       ```
   
 *  Thread Starter [iwol](https://wordpress.org/support/users/iwol/)
 * (@iwol)
 * [8 years, 2 months ago](https://wordpress.org/support/topic/dropdown-menu-css-2/#post-9873553)
 * thank you! works perfectly

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Dropdown menu css’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/twentyseventeen/4.0/screenshot.
   png)
 * Twenty Seventeen
 * [Support Threads](https://wordpress.org/support/theme/twentyseventeen/)
 * [Active Topics](https://wordpress.org/support/theme/twentyseventeen/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/twentyseventeen/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/twentyseventeen/reviews/)

## Tags

 * [dropdown](https://wordpress.org/support/topic-tag/dropdown/)
 * [menu](https://wordpress.org/support/topic-tag/menu/)

 * 6 replies
 * 2 participants
 * Last reply from: [iwol](https://wordpress.org/support/users/iwol/)
 * Last activity: [8 years, 2 months ago](https://wordpress.org/support/topic/dropdown-menu-css-2/#post-9873553)
 * Status: resolved