I am facing the following issue:
HTML:
<div id="about" class="menu1"> <a href="#">About</a></div>
<div id="aboutsub">
<div id="team" class="menu2"> <a href="">Team</a></div>
<div id="experience" class="menu2"> <a href="">Experience</a></div>
<div id="difference" class="menu2"> <a href="">Difference</a></div>
</div>
CSS:
.menu1
{
position: absolute;
background: red;
width: 60px;
height: 21px;
padding: 15px 20px;
}
.menu1 a
{
display: inline-block;
position: absolute;
color: white;
text-decoration: none;
}
.menu2
{
position: absolute;
background: purple;
width: 80px;
height: 42px;
left: 115px;
}
.menu2 a
{
padding: 15px 20px;
color: white;
text-decoration: none;
}
Full demonstration available here: http://jsfiddle.net/snk42/1/embedded/result/
The main issue I'm encountering is with the alignment of the <a> element within #about, as it only covers the word "about" instead of the entire div.
Any suggestions on how to vertically center the text and make the whole div clickable would be greatly appreciated.
Additionally, I am struggling to understand why the menu2 elements are not responding to clicks. Any insights on this matter would be helpful.