Border radius on last-child menu Item Hover

EtienneEtienne Registered Users Posts: 70 Big grins
edited August 30, 2015 in SmugMug Customization
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 */
}

Comments

  • EtienneEtienne Registered Users Posts: 70 Big grins
    edited August 28, 2015
    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 .....
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited August 28, 2015
    Try it with the !important added.

    border-radius:0 0 8px 8px !important;
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited August 28, 2015
    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.
  • EtienneEtienne Registered Users Posts: 70 Big grins
    edited August 28, 2015
    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 ? mwink.gif
  • EtienneEtienne Registered Users Posts: 70 Big grins
    edited August 28, 2015
    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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited August 28, 2015
    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 ? mwink.gif

    Either looking at the Source Code or using Firebug. thumb.gif

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited August 28, 2015
    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;
        } 
    
  • EtienneEtienne Registered Users Posts: 70 Big grins
    edited August 30, 2015
    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.
Sign In or Register to comment.