CSS write menu: simple comments

Here is the simplified version, which is used to strip the [display/hide] effect for your research.
It mainly uses the status of a: hover [ie], Li: hover [non-ie] to display/hide the menu effect.
Key points:
Program Code
<! -- [If IE 7]> <! --> </A> <! -- <! [Endif] -->
This comment indicates that only non-ie browsers and IE7 can be read </a>
In this way, the HTML read from non-ie and IE7 browsers is:
Program code
<Li> <a href = "#"> navigation </a>
<Ul> <li> secondary navigation </LI> </ul>
</LI>
Program code
<! -- [If lte ie 6]> </a> <! [Endif] -->
This comment indicates that only browsers with IE6 or earlier versions can read </a>
The HTML read in IE6 and IE6 browsers is:
Program code
<Li> <a href = "#"> navigation
<Ul> <li> secondary navigation </LI> </ul>
</A>
</LI>
Some may ask: why is it so complicated? Instead of using links to include the list of level-2 instances, you just need to write a: hover and the code is much simpler.
I personally think:
Follow the semantics as much as possible when playing the standard.
In IE6 and earlier versions, because hover pseudo classes other than a are not supported, only this method can achieve a similar purpose, so we have to discard semantics for ie6.
But we should not break the whole pot of soup for an IE6, so although some things are troublesome, we still need to do it ~ <textarea id="runcode59676"></textarea> Xmlns = "http://www.w3.org/1999/xhtml">

• Homepage
  
  

  111112 111112 111112

• Navigation 2
  
  

  222221 222221 222221

• Navigation 3
  
  

  333331 333331 333331

• Navigation 4
  
  

  444441 444441 444441

• Navigation 5
  
  

  555551 555551 555551

• Navigation 6
  
  

  666661 666661 666661