I’m trying to create a dropdown menu but currently having some problems:
- The sub-menu disappears instantly when not hovering over the link (You can still hover over the sub-menu but it works on random)
- The sub-menu only stay in a fixed position
- Hovering over a sub-menu link doesn’t highlight the whole row
Here is the CodePen link
Code snippet:
/*Header*/
.container {
width: 100%;
height: 900px;
margin-bottom: 10px;
}
.banner {
width: 100%;
}
marquee {
background-color: red;
font-size: larger;
font-weight: bold;
color: white;
height: 50px;
line-height: 50px;
margin: 0;
}
/*Navigation*/
.nav {
display: inline;
margin: 0 20px;
}
.nav > a {
text-decoration: none;
color: darkblue;
font-size: xx-large;
font-weight: bold;
}
nav {
text-align: center;
background-color: white;
height: 50px;
line-height: 50px;
color: darkblue;
font-size: xx-large;
font-weight: bold;
}
ul{
margin: 0;
}
.navbar>ul>li{
position: relative;
}
.navbar > a:hover{
display: block;
}
.sub-menu{
display: none;
position: absolute;
z-index: 1;
left: 5px;
}
.sub-menu>ul{
list-style-type: none;
}
.sub-menu >ul> li:hover {
background-color: orangered;
color: yellow;
border-radius: 10px;
border: solid 1px;
}
.navbar>ul > li:hover > .sub-menu {
display: block;
background-color: white;
margin: 0;
z-index: 9;
width: 300px;
height: 100px;
box-shadow: 0 0 10px;
border-radius: 10px;
list-style-type: none;
text-align: left;
} <div class="container">
<header>
<img class="banner" src="Images/banner.png" alt="banner" />
<marquee scrollamount="20" behavior="scroll" direction="left">Welcome
</marquee>
</header>
<nav>
<div class="navbar">
<ul>
<li class="nav"><a href="#">Home </a></li>
|
<li class="nav"><a href="#">Intro </a>
<div class="sub-menu">
<ul>
<li><a href=""></a>Members</li>
<li><a href=""></a>Library</li>
</ul>
</div>
</li>
|
<li class="nav"><a href="#">Contact </a>
</li>
|
<li class="nav"><a href="#">Help </a></li>
|
<li class="nav"><a href="#">Q&A </a></li>
</ul>
</div>
</nav>
>Solution :
- This wasn’t happening to me with your snippet, do you mean you want the submenu to stay if the cursor is taken completely off? You did seem to have a gap between the nav item and the submenu which could lose focus when moving the cursor slowly.
- I’ve changed your
heighttomin-heightso that its height can grow with its contents. If you want it to follow the cursor you’ll probably need JavaScript. - UA styling for the
ulelement has some default left padding, I’ve swapped it out forpadding: .5em.
Here is a working snippet:
/*Header*/
.container {
width: 100%;
height: 900px;
margin-bottom: 10px;
}
.banner {
width: 100%;
}
marquee {
background-color: red;
font-size: larger;
font-weight: bold;
color: white;
height: 50px;
line-height: 50px;
margin: 0;
}
/*Navigation*/
.nav {
display: inline;
margin: 0 20px;
}
.nav > a {
text-decoration: none;
color: darkblue;
font-size: xx-large;
font-weight: bold;
}
nav {
text-align: center;
background-color: white;
height: 50px;
line-height: 50px;
color: darkblue;
font-size: xx-large;
font-weight: bold;
}
ul{
margin: 0;
}
.navbar>ul>li{
position: relative;
}
.navbar > a:hover{
display: block;
}
.sub-menu{
display: none;
position: absolute;
z-index: 9;
top: 100%;
left: 0;
background-color: white;
margin: 0;
width: 300px;
min-height: 100px;
box-shadow: 0 0 10px;
border-radius: 10px;
list-style-type: none;
text-align: left;
}
.sub-menu>ul{
list-style-type: none;
padding: .5em;
}
.sub-menu >ul> li:hover {
background-color: orangered;
cursor: pointer;
color: yellow;
border-radius: 10px;
outline: solid 1px;
}
.navbar>ul > li:hover > .sub-menu {
display: block;
}<div class="container">
<header>
<img class="banner" src="Images/banner.png" alt="banner" />
<marquee scrollamount="20" behavior="scroll" direction="left">Welcome
</marquee>
</header>
<nav>
<div class="navbar">
<ul>
<li class="nav"><a href="#">Home </a></li>
|
<li class="nav"><a href="#">Intro </a>
<div class="sub-menu">
<ul>
<li><a href=""></a>Members</li>
<li><a href=""></a>Library</li>
</ul>
</div>
</li>
|
<li class="nav"><a href="#">Contact </a>
</li>
|
<li class="nav"><a href="#">Help </a></li>
|
<li class="nav"><a href="#">Q&A </a></li>
</ul>
</div>
</nav>