Title: Dropdown Configuration
Last modified: July 17, 2021

---

# Dropdown Configuration

 *  Resolved [epicjono](https://wordpress.org/support/users/epicjono/)
 * (@epicjono)
 * [4 years, 11 months ago](https://wordpress.org/support/topic/dropdown-configuration/)
 * Hello! Quick question about dropdown lists in the header (specifically the “Categories”
   option). I would like to put a 2px border around the dropdown, and also highlight
   the different options a certain color. I’ve done both of those things with the
   below code, but I know there’s a better way.
 * The border is only appearing on hover, which means when I click the dropdown 
   it fades in with a hover animation. I would like it to be there as soon as the
   dropdown is clicked, so that there is no fade-in animation.
 * Also, there seems to be a margin on the top, left, and bottom of the dropdown
   box, so that the hover isn’t selecting the entire area. I would like for those
   margins to be removed (if possible) so that there’s no white space on the edges
   when hovering over a list option. I’d also like to remove the padding in between
   those list options as well.
 * Here is the code. I tried li:hover instead of a:hover, but that didn’t work:
 *     ```
       .menu-container ul.sub-menu
       {border-style: solid;
       border-width: 2px}
       .menu-container ul.sub-menu a:hover
       {background-color: var(--p-body)}
       ```
   
 * Thank you!
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fdropdown-configuration%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

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

 *  Theme Author [Ben Sibley](https://wordpress.org/support/users/bensibley/)
 * (@bensibley)
 * [4 years, 11 months ago](https://wordpress.org/support/topic/dropdown-configuration/#post-14676123)
 * Hi there,
 * This code should work well to keep the border and fix the margins around the 
   menu items. Please remove the code you shared here from the site, and replace
   it with the following:
 *     ```
       @media all and (min-width: 56.25em) {
   
         .menu-primary .sub-menu {
           border: solid 2px #fff;
         }
         .menu-primary .sub-menu li {
           margin: 0 !important;
         }
         .menu-primary .sub-menu a {
           margin: 0;
           padding: 6px;
         }
       }
       ```
   
 *  Thread Starter [epicjono](https://wordpress.org/support/users/epicjono/)
 * (@epicjono)
 * [4 years, 11 months ago](https://wordpress.org/support/topic/dropdown-configuration/#post-14677676)
 * Thanks Ben, it all worked out. I do notice one thing now – with no border, the
   hover color extends all the way to the end of the sub menu container. But when
   I add the border in, there’s a very small amount of space between the end of 
   the hover color and the border, probably a pixel.
 * This is the code for the hover color:
 *     ```
       .menu-primary ul.sub-menu a:hover
       {background-color: var(--p-body)}
       ```
   
 * This code is with the space between the purple and the border. This is how the
   website is currently. I made the background red to be able to see the difference.
 *     ```
       .menu-primary .sub-menu {
           border: solid 2px #000;
           background-color: red;
         }
       ```
   
 * If I comment out the border line from the above code, then everything looks normal
   and the purple extends all the way to the edge of the container. Is there anything
   I can do to make that purple color extend all the way to the border, without 
   any extra space?
 * Hopefully this question made sense.
    -  This reply was modified 4 years, 11 months ago by [epicjono](https://wordpress.org/support/users/epicjono/).
 *  Thread Starter [epicjono](https://wordpress.org/support/users/epicjono/)
 * (@epicjono)
 * [4 years, 11 months ago](https://wordpress.org/support/topic/dropdown-configuration/#post-14677700)
 * I accidentally marked it as resolved.
 *  Theme Author [Ben Sibley](https://wordpress.org/support/users/bensibley/)
 * (@bensibley)
 * [4 years, 11 months ago](https://wordpress.org/support/topic/dropdown-configuration/#post-14679913)
 * Did you find a solution already for this? I just checked it out and I see the
   purple extending all the way to the border now: [https://share.getcloudapp.com/nOuPZBPn](https://share.getcloudapp.com/nOuPZBPn)
 *  Thread Starter [epicjono](https://wordpress.org/support/users/epicjono/)
 * (@epicjono)
 * [4 years, 11 months ago](https://wordpress.org/support/topic/dropdown-configuration/#post-14681274)
 * I did not, I’ll peg it as a monitor issue. It’s insignificant anyway. Thanks 
   again for the help!
 *  Theme Author [Ben Sibley](https://wordpress.org/support/users/bensibley/)
 * (@bensibley)
 * [4 years, 11 months ago](https://wordpress.org/support/topic/dropdown-configuration/#post-14681674)
 * Okay no problem 🙂

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

The topic ‘Dropdown Configuration’ is closed to new replies.

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

 * 6 replies
 * 2 participants
 * Last reply from: [Ben Sibley](https://wordpress.org/support/users/bensibley/)
 * Last activity: [4 years, 11 months ago](https://wordpress.org/support/topic/dropdown-configuration/#post-14681674)
 * Status: resolved