I developed a demo that functions properly on both desktop and mobile devices. However, I am facing an issue where the dropdown menu is not displayed when switching to the mobile version. Here is my code snippet: http://codepen.io/anon/pen/OyNLqa
#menubar li {
display: inline;
padding:0.5em;
font-size:1.5em;
color :red
}
#menubar li:last-child{
color: black;
}
@media screen and (max-width: 400px) {
.large {
display: none;
}
}
@media screen and (min-width: 400px) {
.small {
display: none;
}
}
#menubar{
float:right;
position:relative;
}
#menubarCont {
width: 100%;
right:5em;
position:relative;
}
https://i.sstatic.net/9HvIA.png
https://i.sstatic.net/H9trB.png The program runs fine on desktop but does not display the dropdown on smaller screens. How can I make the dropdown appear on the right side as shown in the image?