Currently, I am working on creating a responsive menu. The structure of my menu is set up as follows:
HTML:
<ul id="top-menu">
<li class="active">
<a href="#">HOME</a>
</li>
<li>
<a href="#div2">ABOUT</a>
</li>
</ul>
CSS
#top-menu {
position: fixed;
z-index: 1;
background:#000;
width:100%;
height:60px;
list-style:none;
z-index:100;
margin:0 0 0 0;
}
#top-menu a {
display:block;
width:100px;
text-align:center;
line-height:60px;
text-decoration:none;
height:60px;
color:#FFF;
}
Everything seems to be running smoothly until I decided to make the menu responsive. As someone new to this concept, I tried out some techniques and encountered an issue that left me perplexed.
Oddly enough, this code works perfectly (hides the entire menu):
@media (max-width: 600px) {
#top-menu {
display: none;
}
}
However, when I attempt to apply similar CSS to hide only the links within the menu, nothing happens:
@media (max-width: 600px) {
#top-menu a{
display: none;
}
}
After conducting several searches online, I was unable to find a definitive solution to my problem. I wonder if it is possible to target the "A" element for changes?
I would greatly appreciate any assistance or insights on this matter.
Sincerely, Merijn