WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Using border-radius for dropdown menu in corporate theme (12 posts)

  1. rohanperry
    Member
    Posted 1 year ago #

    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.

  2. rachelbaker
    Member
    Posted 1 year ago #

    Can you provide a link to your site? It would make it much easier to help you with your question.

  3. rohanperry
    Member
    Posted 1 year ago #

    this is site i'm working on bcofjc.org

  4. rohanperry
    Member
    Posted 1 year ago #

    Check under media.

  5. rachelbaker
    Member
    Posted 1 year ago #

    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;
    }
  6. rohanperry
    Member
    Posted 1 year ago #

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

  7. rohanperry
    Member
    Posted 1 year ago #

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

  8. rachelbaker
    Member
    Posted 1 year ago #

    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

  9. rohanperry
    Member
    Posted 1 year ago #

    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.

  10. rachelbaker
    Member
    Posted 1 year ago #

    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;
    }
  11. rohanperry
    Member
    Posted 1 year ago #

    Still not getting my desired result.

  12. rohanperry
    Member
    Posted 1 year ago #

    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;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic