I am looking for a way to create a menu where the drop-down items overlay the rest of the menu when the screen width is small.
Here is my current code:
nav{
line-height:100%;
opacity:.9;
}nav ul{
background: #999;
padding: 0px;
border-radius: 20px;
list-style: none;
position: relative;
display: inline-table;
}nav ul ul{
display: none;
background: #567;
border-radius: 0px;
padding: 0px;
position: absolute;
top: 100%;
}nav ul li{
float: left;
}nav ul li a{
display: block;
padding: 25px 40px;
color: #666;
text-decoration: none;
}nav ul li:hover{
background: #345;
}nav ul li:hover a{
color: #fff;
}nav ul li:hover>ul{
display: block;
}nav ul ul li{
float: none;
border-top: 1px solid #567;
border-bottom: 1px solid #678;
position: relative;
}nav ul ul li a{
padding: 15px 40px;
color: #fff;
}nav ul ul li a:hover{
background: #456;
}nav ul ul ul{
position: absolute; left: 100%; top:0;
}<!DOCTYPE html>
<html>
<body>
<nav>
<ul>
<h3>
<li><a href="otherpage.html">Home</a></li>
<li><a href="otherpage.html">Page2</a>
<ul>
<li><a href="otherpage.html">Page2.1</a></li>
<li><a href="otherpage.html">Page2.2</a></li>
<li><a href="otherpage.html">Page2.3</a>
<ul>
<li><a href="otherpage.html">Page2.3.1</a></li>
<li><a href="otherpage.html">Page2.3.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="otherpage.html">Page3</a>
<ul>
<li><a href="otherpage.html">Page3.1</a></li>
<li><a href="otherpage.html">Page3.2</a></li>
</ul>
</li>
<li><a href="otherpage.html">Page4</a></li>
</h3>
</ul>
</nav>
</body>
</html>I want a navigation menu that maintains my current design but allows the dropdown items to appear above the other menu items at a reduced width. Something similar to this example how to set css width equal to length of longest text.
I am not sure if achieving this would involve using JavaScript. While I would appreciate a JavaScript dropdown effect like the one in the link, it is not necessary.
If my issue is unclear, please try running my code in fullscreen mode and then decrease the browser width so you can see that the dropdown may become unclickable.
Also, it would be great if the text spacing remains consistent as the width changes.
Thank you!