I recently came across a code snippet on a tutorial website that explained how to create a pure CSS horizontal menu. Just when I thought I had grasped the concept, I encountered an issue that has left me reflecting on all that I have learned about CSS. The code in question is as follows:
#nav, .nav, #nav .nav li { margin:0px; padding:0px; }
#nav li {float:left; display:inline; cursor:pointer; list-style:none; padding:0px 10px 0px 10px; border:1px #000 solid;
position:relative;}
#nav li ul.first {left:-1px; top:100%;}
li, li a {color:#000; text-decoration:none;}
#nav .nav li { width:100%; text-indent:10px; line-height:30px; margin-right:10px; border-top:1px #000 solid;
border-bottom:1px #000 solid; border-left:none; border-right:none; background:#fff;}
#nav li a {display:block; width:inherit; height:inherit;}
ul.nav { display:none; }
#nav li:hover > a, #nav li:hover { color:#fff; background:#000; }
li:hover > .nav { display:block; position:absolute; width:200px; top:-2px; left:50%; z-index:1000; border:1px #000 solid; }
li:hover { position:relative; z-index:2000; }
And here is the corresponding HTML:
<ul id="nav">
<li>Menu 1
<ul class="nav first">
<li><a href="#">Menu 1</a></li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
However, I ran into an issue while working on this code. Specifically, on the 9th line of the CSS where it says li:hover > .nav. When I tried changing it to #nav li:hover > .nav, the drop down menu did not behave as expected and seemed to mess up. I've been trying to understand why simply adding "#nav" could disrupt the layout. Despite coming up with some theories, they seem to contradict what I've learned so far. If anyone can offer an explanation, I would greatly appreciate it. Thank you!