Unwanted space and arrow in accordion menu

Question

I am creating a vertical accordion menu. Here is code what I had done so far. Two problems I am facing.

1. There is unwanted space between border and menu. It is for all li elements ie for menu and sub menu items also.

2. And arrow is showing for submenu also after having following code

#menunav li > a:only-child:before { content: '';}

I trying to put arrow image for menu that having sub menus. eg Item 1 is having sub menus so Item 1 should have arrow not its sub menus items. And also if I have Sub-Item 1 a of Item 1 , sub menus like below:

  <li><a href="#">Item 1</a>
    <ul>
      <li><a href="#">Sub-Item 1 a</a>
        <ul>
      <li><a href="#">Sub-Item 1 aa</a></li>
      <li><a href="#">Sub-Item 1 bb</a></li>
      <li><a href="#">Sub-Item 1 cc</a></li>
    </ul>
        </li>
      <li><a href="#">Sub-Item 1 b</a></li>
      <li><a href="#">Sub-Item 1 c</a></li>
    </ul>
  </li>

Then Item 1 and Sub-Item 1 a will have arrow etc.

I am not able to remove that space and putting arrow for menu that having submenu.

Can someone please suggest what should I change in jquery and css so that I can get that properly working?

Answer 1

CSS

#menunav{padding:0}

since we need to clear the default style of the ul element

Answer 2

Set #menunav , ul into li padding to 0

#menunav, #menunav ul {
    padding: 0;
}

Or just reset the padding:

* {
    padding: 0
}

Demo

Update

If you want to remove submenu arrow, do this:

Example:

#menunav li ul li a:before {
    background: none;
}

updated demo: http://jsfiddle.net/jpcb7w5y/10/

Answer 3

Try this.

CSS:

#menunav {
    padding: 0px;
}

#menunav li ul {
    padding: 0px;
}

I think your <ul> has its own padding. Hope this helps.

Edited:

DEMO

I you want that the arrows only appears to the main menu that have the sub menu, I have this quick solution for that. Why not try putting some class on the <a> for the main menu. Hope this works.

Instead of:

#menunav li a:before {
    content: "";
    display: block;
    background: url("http://transparency.perkinswill.com/content/images/right-arrow.png") no-repeat;
    width: 20px;
    height: 20px;
    float: left;
    margin: 0 6px 0 0;
}

Why not:

#menunav .main:before {
    content: "";
    display: block;
    background: url("http://transparency.perkinswill.com/content/images/right-arrow.png") no-repeat;
    width: 20px;
    height: 20px;
    float: left;
    margin: 0 6px 0 0;
}