+ Start a Discussion
DoondiDoondi 

drop down direction, up or down based on the space available?

Hi, below is my CSS code (pure) for drop down menu:

.onclick-menu 
                    {
                    position: relative;
                    display: inline-block;
                    }
                    .onclick-menu:before 
                    {
                    display: inline-block;
                    font: normal normal normal 14px/1 FontAwesome;
                    font-size: inherit;
                    text-rendering: auto;
                    -webkit-font-smoothing: antialiased;
                    -moz-osx-font-smoothing: grayscale;
                    content: "\f0d7";
                    padding: 5px;
                    border: 1px solid rgb(221, 219, 218);
                    background-color: rgb(255, 255, 255);
                    color: rgb(112, 110, 107);
                    border-radius: .25rem;
                    }
                    .onclick-menu-content li a 
                    {
                    text-decoration: none;
                    display: block;
                    padding: .5rem .75rem;
                    color: rgba(27, 82, 151, 1.0);
                    }
                    .onclick-menu-content li a:hover 
                    {
                    background-color: rgb(236, 235, 234);
                    text-decoration: none;
                    color: rgba(27, 82, 151, 1.0);
                    }
                    .onclick-menu:focus 
                    {
                    pointer-events: none;
                    outline: none;
                    }
                    .onclick-menu:focus .onclick-menu-content {
                    opacity: 1;
                    visibility: visible;
                    pointer-events: auto;
                    
                    }
                    .onclick-menu-content 
                    {
                    position: absolute;
                    z-index: 1;
                    background: rgb(255, 255, 255);
                    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16);
                    border: 1px solid rgb(221, 219, 218);
                    border-radius: .25rem;
                    left: -40px;
                    /* use opacity to fake immediate toggle */
                    opacity: 0;
                    visibility: hidden;
                    transition: visibility 0.5s;
}


By default it's direction is down.....

Can we make it auto (up or down) based on space available?