One of the hardest things to get right is always the navigation. It is an inherently complex structure, especially since you might want different stylings on the different levels — for example different colors on the second-level navigation and third-level navigation. Luckily, Plone gives you a lot of CSS classes to latch on to, and my best advice when creating your own schemes is to use the DOM Inspector religiously to find which classes to manipulate.

We chose to go for a simpler style for demonstration purposes.

First, some basic portlet/breadcrumb styling — add the following to your CSS:

    /* Navigation */
    #portal-breadcrumbs {
        margin: 1em 1em 1em 19em;
    }

    #portal-breadcrumbs {
        display: none;
    }

    .portlet dt {
        background-color: #d3cebc;
        margin-bottom: 0.5em;
        display: block;
        padding: 0.2em 0.5em;
    }

    .portlet dd {
        margin-left: 0;
    }

    .portlet a {
        text-decoration: none;
    }

    .portletItem {
        padding: 0.5em;
    }

    .portletFooter {
        border-bottom: 1px dashed #c9c4c0;
        padding: 0.5em;
        text-align: right;
    }

    .portletItemDetails {
        text-align: right;
        display: block;
        color: black;
    }

Then we add the navigation-specific elements:

    .portletNavigationTree {
        padding-left: 0;
    }

    #portlet-navigation-tree .portletHeader {
        display: none;
    }

    .portletNavigationTree a {
        background-color: #d3cebc;
        margin-bottom: 0.5em;
        display: block;
        padding: 0.2em 0.5em;
    }

    .navTreeItem {
        display: inline;
        list-style: none;
        list-style-image: none;
    }

    .navTreeItem a,
    .navTreeItem a:visited {
        text-decoration: none;
        color: #463229;
    }

    .portletNavigationTree a:hover,
    .navTreeCurrentItem {
        color: #d3cebc !important;
        background-color: #463229 !important;
    }

Whew, this looks a bit complex if you haven't seen CSS before, but if you add the rules one at a time, you can see the progression, and what each rules does. If you reload, you should now have the following:

Wow, now we're talking. It's starting to look like the proper design now, just needs some tightening of the margins and positioning.