Border radius on last-child menu Item Hover

Etienne

Hi,

I have a submenu where I apply a border-radius:0 0 8px 8px ;

And I want to apply the border-radius:0 0 8px 8px on the last-child ITEM on hover, not others, but it does not work.

My submenu use transparency.

Heres is my code ( border radius at the end) and a capture showing the border radius on others items than last-child (on hover).

What's wrong in the code ?

.yui3-menu {
background: rgba(224,138,21,0);
}

.yui3-menu-children {
margin-top: 0px !important;
background: rgba(224,138,21,0.3) !important;
}

.yui3-menu-item .yui3-menu-label {
background: rgba(224,138,21,0);
opacity: 1;
-webkit-transition:all 0.4s ease-in;
-moz-transition:all 0.4s ease-in;
transition:all 0.4s ease-in;
}

.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label:hover {
background: rgba(224,138,21,0.7);
}

/* Code for border radius */

.yui3-menu-children { /* Works */
border-radius:0 0 8px 8px !important ;
}

.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label:last-child:hover {
border-radius:0 0 8px 8px ; /* don't work : all the item not only last */
}

Hikin' Mike

Looks like you got it fixed?

Etienne

yes and not :

I fixed the problem on one site changing this code (for information) :

.horizontal ul li li > a:last-child:hover {
border-radius:0 0 8px 8px ;
}

And it works now for the last-child border radius.

But the exactly same code do not fix the problem on my other site (other post) : I 'm trying to understand the reason .....

Allen

Try it with the !important added.

border-radius:0 0 8px 8px !important;

Hikin' Mike

Etienne wrote: »

yes and not :

I fixed the problem on one site changing this code (for information) :

.horizontal ul li li > a:last-child:hover {
border-radius:0 0 8px 8px ;
}

And it works now for the last-child border radius.

But the exactly same code do not fix the problem on my other site (other post) : I 'm trying to understand the reason .....

Because the two sites you sent me (via PM) do NOT have the same code.

Site #1

.sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .sm-page-widget-nav-toplink {
     margin-right: 1px ! important;
     padding-right: 0px ! important;
}

.sm-page-widget-nav-toplink {
     background: rgba(224, 138, 21, 0.5);
     border-radius: 8px 8px 0px 0px;
     margin-bottom: 1px ! important;
     opacity: 1;
     transition: all 400ms ease-in-out 0s;
}

.yui3-menu-children {
     opacity: 0;
     transition: opacity 0.4s ease-out 0s;
}

.yui3-menu-open > .yui3-menu-children {
     opacity: 1;
}

.horizontal ul li:last-child, .yui3-menu-children {
     border-radius: 0px 0px 8px 8px ! important;
}

.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label:last-child:hover {
     border-radius: 0px 0px 8px 8px;
}

.sm-page-widget-nav-toplink:hover {
     background: #e08a15;
     display: block;
     opacity: 1;
}

.sm-page-widget-nav-activepage {
     background: #e08a15;
     display: block;
     opacity: 1;
}

.sm-page-widget-nav-hasactivepage {
     background: #e08a15;
     display: block;
     opacity: 1;
}

.yui3-menu-children {
     background: rgba(224, 138, 21, 0.4) ! important;
     margin-top: 0px ! important;
}

.yui3-menu {
     background: rgba(224, 138, 21, 0);
}

.yui3-menu-item .yui3-menu-label {
     background: rgba(224, 138, 21, 0);
     opacity: 1;
     transition: all 0.4s ease-in 0s;
}

.horizontal a {
     display: block;
     min-width: 100px;
     padding: 8px 0px;
     text-decoration: none;
}

.horizontal ul a {
     padding: 8px 0px;
}

.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label:hover {
     background: rgba(224, 138, 21, 0.7);
}

.sm-page-widget-10853241 .sm-page-widget-content {
     margin: 24px 0px 0px;
}

.sm-page-widget-10853242 .sm-page-widget-content {
     margin: 24px 0px 36px;
}

.sm-page-widget.sm-page-widget-11619474 p {
     font-family: Raleway;
     font-size: 100%;
     text-align: center;
}

Site #2

.sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .sm-page-widget-nav-toplink {
     margin-right: 1px ! important;
}

.sm-page-widget-nav-toplink {
     background: rgba(224, 138, 21, 0.5);
     border-radius: 8px 8px 0px 0px;
     margin-bottom: 1px ! important;
     opacity: 1;
     transition: all 400ms ease-in-out 0s;
}

.sm-page-content .yui3-menu-children {
     border-radius: 0px 0px 8px 8px;
     left: 0px;
     margin: 0px;
     max-height: 0px;
     overflow: hidden;
     padding: 0px;
     position: absolute;
     top: 2em;
     transition: max-height 1s ease 0.1s;
}

.sm-page-content .horizontal > .sm-page-widget-nav-toplink:hover .yui3-menu-children {
     max-height: 15em;
}

.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label:hover {
     background: rgba(224, 138, 21, 0.7);
}

.yui3-menu-children {
     border-radius: 0px 0px 8px 8px ! important;
}

.horizontal ul ul li > a:last-child:hover {
     border-radius: 0px 0px 8px 8px;
}

.sm-page-widget-nav-toplink:hover {
     background: #e08a15;
     display: block;
     opacity: 1;
}

.sm-page-widget-nav-activepage {
     background: #e08a15;
     display: block;
     opacity: 1;
}

.sm-page-widget-nav-hasactivepage {
     background: #e08a15;
     display: block;
     opacity: 1;
}

.yui3-menu-children {
     background: rgba(224, 138, 21, 0.3) ! important;
     margin-top: 0px ! important;
}

.yui3-menu {
     background: rgba(224, 138, 21, 0);
}

.yui3-menu-item .yui3-menu-label {
     background: rgba(224, 138, 21, 0);
     opacity: 1;
     transition: all 0.4s ease-in 0s;
}

.horizontal a {
     display: block;
     min-width: 100px;
     padding: 8px 0px;
     text-decoration: none;
}

.sm-page-widget-11547998 .sm-page-widget-content {
     margin: 24px 0px 0px;
}

.sm-page-widget-11547999 .sm-page-widget-content {
     margin: 24px 0px 36px;
}

When I copy #2 code into #1 site, it works fine.

Etienne

effectively,

I copied (not on production) only the code with the radius border and the submenu, it's why you do not see the same code on production.

I copy the whole code to try, and it's good now, thanks.

Just for info, where do you see all the CSS code ?

Etienne

I found where it doe's not work, it's about the transition menu :

when I use this transition : Menu Transition 1 ------------------------------->

.sm-page-content .yui3-menu-children {
position: absolute;
top: 2em; left: 0;
max-height:0em;
margin: 0; padding: 0;
overflow: hidden;
transition: 1s max-height 0.1s;
border-radius: 0 0 8px 8px;
}

.sm-page-content .horizontal > .sm-page-widget-nav-toplink:hover .yui3-menu-children {

max-height:15em;
}
<-------------------------------

the border radius for the last-child works

(.horizontal ul ul li > a:last-child:hover {
border-radius:0 0 8px 8px ;
})

BUT when I use an other kind of transition : Menu Transition 2 ------------------------------->

.yui3-menu-children {
opacity: 0;
transition: opacity 0.40s ease-out;
border-radius: 0 0 8px 8px;
}


.yui3-menu-open > .yui3-menu-children {
opacity: 1;
}
<-------------------------------


the border radius for the last-child do not work
.horizontal ul ul li > a:last-child:hover {
border-radius:0 0 8px 8px ;
}

Stange. So if I want to use Transition 2, it does not work,
and it's work for Transition 1 for the same whole code.

I don't see the connection.

I've a question on Menu Transition 1, perhaps an other trhead :

The submenu scroll down with animation , but instead of scroll up with animation (like on website where I see the same code), the submenu disapear.
Do you know why ?

The original code is :

#menu ul { position: absolute; top: 2em; left: 0; max-height:0em; margin: 0; padding: 0; background-color: #ddd; background-image: linear-gradient(#fff,#ddd); overflow: hidden; transition: 1s max-height 0.3s; border-radius: 0 0 8px 8px; } /* ici on change la valeur de max-height au :hover */ #menu > li:hover ul { /* à adapter, le minimum est le meilleur mais voyez large */ max-height: 13em; }

Thanks

Hikin' Mike

Etienne wrote: »

effectively,

I copied (not on production) only the code with the radius border and the submenu, it's why you do not see the same code on production.

I copy the whole code to try, and it's good now, thanks.

Just for info, where do you see all the CSS code ?

Either looking at the Source Code or using Firebug.

Hikin' Mike

Also when I was playing around with your problem with the rounded corners, I used this on my testing site instead:

.sm-user-ui .yui3-menu-children,
.sm-user-ui .yui3-menu-children .yui3-menu-item:first-child:hover {
    border-radius: 0 0 8px 8px;
    } 

Etienne

I see, but if I use on site 2

.sm-user-ui .yui3-menu-children,
.sm-user-ui .yui3-menu-children .yui3-menu-item:last-child:hover {
border-radius: 0 0 8px 8px;
}

it do not work with the Menu Transition 2

---

>

.yui3-menu-children {
opacity: 0;
transition: opacity 0.40s ease-out;
border-radius: 0 0 8px 8px;
}


.yui3-menu-open > .yui3-menu-children {
opacity: 1;
}

Perhaps it's because I use transparency for all the menu .....


very strange.