Wordpress drop down menu styling

Question

I have recently started learning WordPress and have started creating a WordPress website. I have created a drop down side navigation for one of my pages (using the menu options given in WordPress, and added it " ") and am having a little trouble styling it the way I want.

Since it is a drop down menu, I would like to style the parents of the navigation with a grey border (but not the children) if I style the li in css, then all li's are surrounded with a border (even the children). I know this is because they are also li's, but is there a class assigned to the parents (or a way I can assign a class to them) so I can style them separately?

http://jsfiddle.net/twLj3eba/

The fiddle is basically a visual example (this is not being used by me). I would like the parents to have a border around them, and the children to not have anything around them.

.sideNavi a{
    color:#666666;
}

.sideNavi li ul{
    display: none;
}

.sideNavi li:hover ul{
    display: block;
}

The css code is my code

thank you

Answer 1

.parent > li{
  border: solid 1px #000;
}

Answer 2

Create a class for the parent li in the same way as you have created a class for the ul. Assign this class to all your parent li.

For example:

<li class="parent-li">

Then assign styles to that class in your css.

    .parent-li {border: 1px solid #222; display: inline-block;}

Unless I've miss understood what you're trying to achieve it should be a simple solution. Hope that helps.

Edit: I've just seen your comment mentioning you're using the edit menu screen within Wordpress. You should be able to assign custom classes to the menu items. If you can't see the option go to the screen options drop down tab at the top right and enable css custom classes under advanced properties. You will still need to create the css class either by editing your theme style sheet (not recommended) or by creating a child theme.