WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] Using border-radius for dropdown menu in corporate theme

[Resolved] Using border-radius for dropdown menu in corporate theme

  • When I apply the border radius it makes radius for each menu item. I want just the bottom left & right corners of the last item in the menu list to have this border radius.

Viewing 11 replies - 1 through 11 (of 11 total)
  • Can you provide a link to your site? It would make it much easier to help you with your question.

    this is site i’m working on bcofjc.org

    Check under media.

    You are applying the border-radius to

    #nav li li a, #nav li li a:link, #nav li li

    Instead, you have to apply it to the ul element. Specifically, in your CSS that would be this declaration:

    #nav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 180px;
    margin: 0 0 0 0px;
    padding: 0;
    }

    I add border radius to the above declaration but no change.

    Is there a specific line it must be in. Meaning above margin or below or anywhere else in the declaration.

    You are applying a background color to the submenu li element, and not declaring a background color to the #nav li ul element.

    If you correct that, you will see your border-radius

    I get the border radius but it is coming on each item list in the drop down menu. I just want it on the bottom left & right of last item in the list.

    Bring it all together like this:

    #nav li li a, #nav li li a:link, #nav li li a:visited {
    color: #FFF;
    display: block;
    width: 158px;
    font-size: 12px;
    margin: 0;
    padding: 5px 10px 5px 10px;
    border-bottom: 1px solid #ef8300;
    position: relative;
    }

    AND

    #nav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 180px;
    margin: 0 0 0 0px;
    padding: 0;
    background: #ef8300;
    border-radius-bottomright: 4px;
    -moz-border-radius-bottomright: 4px;
    -webkit-border-radius-bottomright: 4px;
    border-radius-bottomleft: 4px;
    -moz-border-radius-bottomleft: 4px;
    -webkit-border-radius-bottomleft: 4px;
    }

    Still not getting my desired result.

    I finally got it.

    #nav li li a, #nav li li a:link, #nav li li a:visited {
    background: #0b55a1;
    color: #fff;
    display: block;
    width: 158px;
    font-size: 12px;
    margin: 0;
    padding: 7px 14px 7px 14px;
    border-top: 1px solid #0b55a1;
    border-left: 1px solid #0b55a1;
    border-right: 1px solid #0b55a1;
    border-bottom: 4px solid #0b55a1;
    position: relative;
    }

    #nav li ul {
    z-index: 9999;
    position: absolute;
    display: block;
    left: -999em;
    height: auto;
    width: 180px;
    margin: 0 0 0 0px;
    padding: 0px;
    border-right: 1px solid #0b55a1;
    border-top: 1px solid #0b55a1;
    border-bottom: 4px solid #0b55a1;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    overflow: hidden;
    -webkit-box-shadow:rgba(0, 0, 0, 0.298039) 0 0 6px;
    }

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘[Resolved] Using border-radius for dropdown menu in corporate theme’ is closed to new replies.
Skip to toolbar