I'd like a menu so that the drop down goes over the menu at a small width.
Here it goes for those of you who like a challenge. Here's what I got:
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'd like a nav menu that does what I have so far, but so that the drop down goes over the rest of the menu when at a small width. Sort of like this: how to set css width equal to length of longest text.
I don't know too much but would this require javascript? I'd also appreciate the javascript dropdown effect similar to the link but that isn't necessary.
If you don't understand my problem, please run my code fullscreen, then decrease the width of your browser, so that the dropdown isn't clickable.
Bonus points for making the text spacing even as the width adjusts.
Thanks
Aucun commentaire:
Enregistrer un commentaire