I'm trying to make a simple CSS drop down menu that when you mouse over a link, the sub menu appears. I've managed to achieve this when you mouse over an li but can't figure out how to do it using a link.
The reason why I'm trying to do this using a link rather than the li is that my menu width is 100% and the li spans a greater area than the link so if you mouse over that area, the sub menu appears when you don't want it to.
My CSS is as follows:
.menu {
border: solid 1px red;
font-size: 5em;
font-family: 'Raleway', arial, serif;
}
.menu ul {
}
.menu ul.children {
display: none;
}
.menu ul li {
margin: 20px 0 10px 0;
}
.menu ul li:hover ul.children {
display: block;
position: absolute;
}
.menu ul li a {
padding: 10px 10px 0 40px;
background: rgba(0,0,0,0.5);
color: #fff;
text-decoration: none;
}
