Menu
This is what I'm trying to do:
If you noticed there is space between the menu and the submenu.
The problem is that the submenu doesn't work this way, because when the mouse pointer leaves the menu the submenu disappears.
It only works if it looks like this:
How can I leave the space between the menu and the submenu and get it to work?
My Code:
JSFIDDLE CODE
HTML:
<body>
<nav>
<ul>
<li><a href="#">One</a>
<ul>
<li><a href="1.html">1.1</a></li>
<li><a href="2.html">1.2</a>
</ul>
</li>
<li><a href="#">Two</a>
<ul>
<li><a href="3.html">2.1</a></li>
<li><a href="4.html">2.2</a></li>
<li><a href="5.html">2.3</a></li>
</ul>
</li>
<li><a href="#">Three</a>
<ul>
<li><a href="6.html">3.1</a></li>
<li><a href="7.html">3.2</a></li>
</ul>
</li>
<li><a href="8.html">Four</a></li>
</ul>
</nav>
</body>
CSS:
body {
background-color: #cac3bc
}
nav {
float: left;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background-color: #fff;
margin-top: 10px;
padding: 0 20px;
list-style: none;
position: relative;
display: inline-table;
margin-right: -80px;
}
nav ul li {
float: left;
}
nav ul li:hover {
border-bottom: 5px solid #f5aa65;
color: #fff;
}
nav ul li a:hover {
color: #000;
}
nav ul li a {
display: block;
padding: 15px 15px;
font-family: 'PT Sans', sans-serif;
color: #000;
text-decoration: none;
}
nav ul ul {
background-color:#fff;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #000;
}
818
You could make use of :before to extend the "hoverable" area:
nav ul ul:before {
content: "";
display: block;
height: 20px;
position: absolute;
top: -20px;
width: 100%;
}
See this demo.
133
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
