Title: Dropdown Menu items problem
Last modified: August 22, 2016

---

# Dropdown Menu items problem

 *  [giacomo.trevisan](https://wordpress.org/support/users/giacomotrevisan/)
 * (@giacomotrevisan)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/dropdown-menu-items-problem/)
 * Hi all,
 * I have two annoying problems concerning drop down menu/submenu items and navbar
   submenu items of my [website](http://www.socialitudine.it/wordpress/en/).
 * 1) In the dropdown menu, the items appear in line instead of as a list. I would
   like to have a list as happened before the updates.
 * 2) I don’t know how to change hover background color of submenus. Now is transparent
   but i would like to have blu one as other items on hover.
 * Is there someone who can kindly help me and tell me what edit in my style.css?
 * Many thanks in advance.
 * G.

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

 *  [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/)
 * (@rdellconsulting)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/dropdown-menu-items-problem/#post-5564030)
 * 2)
 *     ```
       .navbar-wrapper .navbar.resp .nav > li .dropdown-menu li {
         background-color: #16335b;
       }
       ```
   
 * 1) Don’t understand as looks OK to me. Try clearing cache Ctl/F5 (Win) Cmd/F5(
   Mac)
 *  Thread Starter [giacomo.trevisan](https://wordpress.org/support/users/giacomotrevisan/)
 * (@giacomotrevisan)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/dropdown-menu-items-problem/#post-5564059)
 * Thanks a lot rdell!
 * 2) It works! Thanks!
 * 1) Don’t you see the menu like in this [screenshot](http://awesomescreenshot.com/0be40a4570)?
 *  [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/)
 * (@rdellconsulting)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/dropdown-menu-items-problem/#post-5564069)
 * Ah, you mean responsive at <980px. It seems OK at 768px but when you drop to 
   smaller viewports, you need to adjust CSS using [@media](http://www.themesandco.com/snippet/media-queries-responsiveness/)
 *  Thread Starter [giacomo.trevisan](https://wordpress.org/support/users/giacomotrevisan/)
 * (@giacomotrevisan)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/dropdown-menu-items-problem/#post-5564157)
 * Yes, exactly.
 * Could you please suggest me what to add in style.css? I have some difficulties
   in understanding [@media](https://wordpress.org/support/users/media/)!
 * Many thanks in advance.
 *  [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/)
 * (@rdellconsulting)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/dropdown-menu-items-problem/#post-5564180)
 * Take out this line 34:
 *     ```
       .navbar-wrapper .navbar.resp .nav > li {
           float: none;
           display: inline-block;
       }
       ```
   
 *  Thread Starter [giacomo.trevisan](https://wordpress.org/support/users/giacomotrevisan/)
 * (@giacomotrevisan)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/dropdown-menu-items-problem/#post-5564193)
 * Thanks. Do you mean like this?
 *     ```
       /* MEDIA MENU MOBILE */
   
       /* ============================================== */
       /* iPad Landscape                                 */
       /*                                       1024x768 */
       /* ============================================== */
       @media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
       .navbar-wrapper .navbar.resp .nav > li {
           float: none;
           display: inline-block;
       }
       }
   
       /* ============================================== */
       /* iPad Portrait                                  */
       /*                                       768x1024 */
       /* ============================================== */
       @media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
       .navbar-wrapper .navbar.resp .nav > li {
           float: none;
           display: inline-block;
       }
       }
   
       /* ============================================== */
       /* Small Tablet Landscape/Portrait                */
       /*                                        800x600 */
       /* ============================================== */
       @media screen and (min-width: 600px) and (max-width: 800px) {
       .navbar-wrapper .navbar.resp .nav > li {
           float: none;
           display: inline-block;
       }
       }
   
       /* ============================================== */
       /* iPhone5/Android landscape (& narrow browser)   */
       /*                                        568x320 */
       /* ============================================== */
       @media screen and (min-width: 320px) and (max-width:568px) {
       .navbar-wrapper .navbar.resp .nav > li {
           float: none;
           display: inline-block;
       }
       }
   
       /* ============================================== */
       /* iPhone4/Android landscape (& narrow browser)   */
       /*                                        480x320 */
       /* ============================================== */
       @media screen and (min-width: 320px) and (max-width:480px) {
       .navbar-wrapper .navbar.resp .nav > li {
           float: none;
           display: inline-block;
       }
       }
   
       /* ============================================== */
       /* iPhone4/Android portrait               320x480 */
       /* iPhone5 portrait                       320x568 */
       /* ============================================== */
       @media screen and (max-width:320px) {
       .navbar-wrapper .navbar.resp .nav > li {
           float: none;
           display: inline-block;
       }
       }
   
       /* ============================================== */
       /* Smaller devices                                */
       /* Android Landscape                      320x240 */
       /* ============================================== */
       @media screen and (min-width:240px) and (max-width:320px) {
       .navbar-wrapper .navbar.resp .nav > li {
           float: none;
           display: inline-block;
       }
       }
   
       /* ============================================== */
       /* Smaller devices                                */
       /* Android Portrait                       240x320 */
       /* ============================================== */
       @media screen and (max-width:240px) {
       .navbar-wrapper .navbar.resp .nav > li {
           float: none;
           display: inline-block;
       }
       }
       ```
   
 * Nothing changed 🙁
 *  [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/)
 * (@rdellconsulting)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/dropdown-menu-items-problem/#post-5564196)
 * No, in your Child Theme style.css at line 34 you have that code.

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

The topic ‘Dropdown Menu items problem’ is closed to new replies.

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

## Tags

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

 * 7 replies
 * 2 participants
 * Last reply from: [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/)
 * Last activity: [11 years, 4 months ago](https://wordpress.org/support/topic/dropdown-menu-items-problem/#post-5564196)
 * Status: not resolved