First on
Today, children's shoes asked me the multi-level menu problem, using offset to get the location, but Chrome's offset and IE's offset get the result is not the same, I think this problem does not need to use JavaScript to get the location, Direct use of CSS positioning can be very convenient to implement
Then wrote a simple multilevel menu, posted here
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title></Head><style>* {margin:0;padding:0;}Ul,li{List-style:None;}Li{position:relative;width:200px;Height:30px;Line-height:30px;text-align:Center;Background-color:#ccc;Border:1px solid #f00;}Li:hover{Background-color:#369;}Li>ul{Display:None;position:Absolute; Left:100%;Top:0;}Li:hover>ul{Display:Block;}. Main-ul{margin:100px 100px;}</style><Body> <ulclass= "Main-ul"> <Li> <span>1</span> </Li> <Li> <span>2</span> <ul> <Li> <span>2-1</span> </Li> <Li> <span>2-2</span> </Li> <Li> <span>2-3</span> </Li> <Li> <span>2-4</span> <ul> <Li> <span>3</span> </Li> <Li> <span>3</span> </Li> <Li> <span>3</span> </Li> <Li> <span>3</span> </Li> <Li> <span>3</span> </Li> </ul> </Li> <Li><span>2-5</span></Li> </ul> </Li> <Li>3</Li> <Li>4</Li> <Li>5</Li> </ul></Body></HTML>
Demo Address
Pure CSS Implementation level three menu display