Horizontal sub-menu mouse hover

[Micheleamaglio]

Hi there,

I'd like to have my menu appearing on the right on mouse hover like it happens in this website: http://cristianordonez.com/

At the moment when I hover, the sub-menu appears underneath the button "menu".
This is the code I have entered so far.

.primary .sub-menu {
    display: none;
    position: absolute;
    left: 0;
    border: 0px solid grey;
    padding-bottom: 20px;
}

nav.primary .sub-menu li{
    display: inline-block;
}

.menu-item:hover .sub-menu{
    display: block;
    
}

Thank you in advance for any help!

Michele

[Richard]

Dear Michele @Micheleamaglio

These are the CSS properties of the sub-menu example you like

{
    position: absolute;
    padding-left: 50px !important;
    top: 0px !important;
    /* line-height: 18px; */
    /* background-color: #f5f5f5; */
    border: 0px solid grey;
    padding-top: 0px /*padding-top: 45px;*/ /*padding-left: 
    75px;*/;
}

So your CSS would need to change to something like:

.primary .sub-menu {
    display: none;
    position: absolute;
    padding-left: 50px !important;
    top: 0px !important;
    border: 0px solid grey;
    padding-bottom: 20px;
}

nav.primary .sub-menu li{
    display: inline-block;
}

.menu-item:hover .sub-menu{
    display: block;
    
}

Paying attention to 'padding-left' & 'top' for your Menu's placement :) Let me know how you go and hope this helps!

Best wishes for 2021
Richard