Geek Answers Handbook

Rounded corners of the first and last <li> elements

I am trying to create a top menu in my Wordpress theme, similar to http://mailchimp.com/ . As you can see from this menu, when “Pricing” is active, the background changes to white. I am trying to implement the same effect in my menu.

There are currently round corners at the back of the menu:

#menu-main-menu{
    margin-top:66px;
    background: #eeeeee;

    -moz-border-radius: 5px;
    border-radius: 5px;
}

no problem here.

But the problem arises when “Home” (the first item in the menu) or “Contact” (the last item in the menu) is active, the corners are no longer rounded.

Obviously, for “Home” I need only the rounded corners of my left hand and “Contact”. I want the corners of my right hand to be rounded. Here is what I'm trying at the moment (see CSS between START and STOP below), but it doesn't seem to round the corners as I want.

            body > header .nav li a {
                            background: none;
                            text-decoration: none;
                            /*font-family: TitilliumText22L005, sans-serif;*/
                            font-family: 'Open Sans', sans-serif;
                            font-size: 13px;
                            color: #000000;
                            text-shadow: none;
                            text-transform: uppercase;
                            border-right: solid 1px #000000;
                        }

                        body > header .nav li:last-child a {
                            border-right: none;                                                     
                        }

                        body > header .nav > li.current-menu-item,
                        body > header .nav > li.current-menu-ancestor {
                            background: #c4c4c4;
                        }


        /* START: Its this bit below I'm trying to get working. */

            body > header .nav li:first-child .current_menu_item{                                               
                                -moz-border-radius-topleft: 5px;
                                -moz-border-radius-bottomleft: 5px;             

                                border-top-left-radius: 5px;
                                border-bottom-left-radius: 5px;                             
                            }

                            body > header .nav li:last-child .current_menu_item{                                
                                -moz-border-radius-topright: 5px;
                                -moz-border-radius-bottomright: 5px;                

                                border-top-right-radius: 5px;
                                border-bottom-right-radius: 5px;                                
                            }
/* STOP */

    body > header .nav > li.current-menu-item > a,
                body > header .nav > li.current-menu-ancestor > a,
                body > header .nav > li.current-page-ancestor > a,
                body > header .nav > li.current_page_parent > a {               
                    /*background: #ffffff;*/
                    text-shadow: none;                              
                    box-shadow: none;                                       
                }

UPDATE Post HTML as requested.

<ul id="menu-main-menu" class="nav">
    <li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-15"><a href="http://www.xxxxxx.com">Home</a></li>
    <li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a href="http://www.xxxxxx.com">Quiénes Somos</a></li>
    <li id="menu-item-18" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-18"><a href="http://www.xxxxxx.com">Servicios</a></li>
    <li id="menu-item-17" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-17"><a href="http://www.xxxxxx.com">Noticias</a></li>
    <li id="menu-item-122" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-122"><a href="http://www.xxxxxx.com">Portfolio</a></li>
    <li id="menu-item-12" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12"><a href="http://www.xxxxxx.com">Contact</a></li>
</ul>

Any help was appreciated.

Regards, Stephen

+5
source share
3 answers

You have a background color set to whether, but you round its border to the child. Since li has the background color applied to it, you need to round its corners, not li. In addition, if you want this element to always have rounded corners, you do not need to use the .current-menu-item class. So part of your code should look like this:

header .nav li:last-child{                                
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;                

    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;                 
}

. , . , li . , . .

+8

- , .

li{display:inline;}
li a{display:inline-block; padding:20px; background:red;}
li:first-child a{border-top-left-radius: 10px; border-bottom-left-radius: 10px;  }
li:last-child a{border-top-right-radius: 10px; border-bottom-right-radius: 10px;  }
li a:hover,li a.active {background: salmon;}
+1

JSfiddle : http://jsfiddle.net/9YtfT/

LI. A .

( , Firefox), LI , (.. A). , , A.

.

@Stephen - CSS :

.nav li:first-child .current_menu_item{
...
}

The selector searches for a child inside the first LI tag with the class "current_menu_item". Your HTML puts this class in the LI tag, not under it.

To fix your css, you need to remove the space.

.nav li:first-child.current_menu_item{
...
}

This tells the browser to find the LI of the first child with the class "current_menu_item". I think it will work. Of course, he asks to ask if you are trying to get around the first child, why are you targeting the class "current_menu_item"? You can remove it all together.

.nav li:first-child{
...
}

UPDATE 2

I updated JSFiddle to include class names to give a closer example of Stephen's situation:

http://jsfiddle.net/9YtfT/3/

+1
source

More articles:


All Articles