CSS list styling - how to reduce the distance between parent and children of the previous parent?


Tags: css,list,styles

Problem :

See the menu on the left: http://goo.gl/gV6B8D

I want to reduce or remove the ugly gap between the parent items and the children of the previous parent.
(I'll differentiate parent from children using different styling, so the parent-child structure is needed,
and that's how wordpress generates menus anyway).

How to do this?

CSS code:

.advanced-sidebar-menu ul {
    background-color : #EDEDED;
}

.advanced-sidebar-menu ul li a {
    display: block;
    text-decoration: none;
    color: black;
    padding: 5px 15px 5px 15px;
    background: ##EDEDED;
    margin-left: 1px;
}

.advanced-sidebar-menu ul li {
    border-bottom: 0px;
}

.advanced-sidebar-menu ul li a:hover { background: white; }

.widget-area .child-sidebar-menu, .widget-area .child-sidebar-menu li { padding : 0; margin : 0 0 15px 0; }
.widget-area .child-sidebar-menu li li { margin-bottom : 0; }
.widget-area .child-sidebar-menu a { margin : 0; }

.child-sidebar-menu * {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.child-sidebar-menu > li a {
    padding-left: 20px !important;
}

.child-sidebar-menu li li a {
    padding-left: 20px !important;
}


Solution :

Change the margin on this line:

.widget-area .child-sidebar-menu, .widget-area .child-sidebar-menu li { padding : 0; margin : 0 0 15px 0; }

Just set it to margin: 0px; That should fix your menu issue.


    CSS Howto..

    How can I make my container transparent without making the whole site transparent too?

    How to add different CSS to the same HTML tags?

    Bootstrap 3: How to make margins responsive?

    How to create tabs using Javascript and Jquery

    How to have render big chunk of html inside a javascript forloop

    how to style in css: product…(price)?

    How to force inline-block wrap to new line using CSS or jQuery?

    how to make form input in middle

    How to align an icon to the right of content

    How to apply CSS class to a parent element?

    Polymer 1.0 how can I style a paper-input:disabled?

    How to add a line break
    in
    in HTML

    How can I register a css page from an ascx control?

    How to create dropdown with multiple columns?

    How can I define styles for individual cells in a SharePoint 2007 topnav?

    How to avoid text wrap when the parent element has position absolute?

    How do you solve this problem regarding aligning divs next to each other? [duplicate]

    How can one use scroll bar images?

    Image rotation in IE causes automatic translation. How do I remove the translation?

    In CSS how do I affect links of only 1 class

    how to choose what transform is applied first in css

    How to apply CSS directly to DOM TextNodes?

    How do i select all nodes and apply a css style to all of them, D3

    How to align images and urls within div trees in CSS?

    How to change background color of elements every 5s using jquery? [duplicate]

    How do you choose when to use DIV and when SPAN, to wrap something?

    How to fix a double click on a jQuery slide up/down animation?

    How to get the Tololtip Tail for Menu

    PHP / CSS How to work with themes for my site? [closed]

    How to vertically align data in the center of a table cell in HTML?