html - Need make pure css menu with 3 level -

I'm making pure CSS menus with 2 stairs. But now I need to make it 3 levels. I tried many times but not working for me. Here it is. I do not need any jquery code, just pure css

css

  # menu {width: 980 pixels; Height: 30px; Swim left; Border-top: dashed 1px # d8d8d8; Margin-left: 7px; } # Menu ul Main Menu {Width: 996px; Margin: 0 px; Padding: 0 pixels; Margin-top: 10px; } # Menu ul Main Menu Lee {Float: Left; List style: none; Margin-right: 20px; Font-family: vardana, geneva, non-serif; Font-size: 14px; Color: # 860300; Margin-right: 16px \ 9; / * IE8 and below * / Status: Relative; Height: 30px; } # Menu ul Main Menu Lee {Text-Decoration: None; Font-family: vardana, geneva, non-serif; Font size: 13px; Color: # 860300; } Ul Lee al [Padding: 0; Status: Completed; Top: 25px; Left: -10px; Width: 190px; -WebKit-Box-Shadow: None; -Moz Box-Shadow: None; Box-Shadow: None; Opacity: 0; Visibility: hidden; Webkit-transit: ambiguity 0.5 s; -Mozy-infected: ambiguity 0.5 s; -M transition: ambiguity 0.5 s; -O-Infection: Opacity 0.5 S; -Management: Opacity 0.5 S; Z-index: 100000; Width: 200px; Background color: #fff; Padding: 7px; -Vibit-boundary-radius: 3px; -max-boundary-radius: 3px; Boundary-radius: 3px; } Ul li ul li (color: #fff; Swim left; Width: 190px; Height: Auto! Important; Minimum height: 20px; Margin-down: 9 pixels; Line-height: 18px; -Vibit-boundary-radius: 2px; -max-boundary-radius: 2px; Boundary-radius: 2px; Padding-top: 3px; Padding-left: 3px; } Ul li ul li (color: #fff; Font size: 12px! Important; } Ul li ul li: hover {background: # 820b 06; Color: #fff; } UL Lee UL Lee: Hover {Color: #FFF! Important; } Ul li: hover ul (opacity: 1; Visibility: visible; }  

Thanks guys

Here I added sample CSS menu Level 3. Please check and let me know that you should be helpful thanks.

  & lt ;! DOCTYPE HTML & gt; & Lt; Html & gt; & Lt; Top & gt; & Lt; Style = "text / css" & gt; / * Menu styles * /. Third level menus {status: absolute; Top: 0; Correct: -150px; Width: 150px; List style: none; Padding: 0; Margin: 0; display none; }. Third level menu & gt; Li {Height: 30px; Background: # 999999; }. Third level menu & gt; Li: Hover {Background: #CCCCC; } .second-level-menu {status: absolute; Top: 30px; Left: 0; Width: 150px; List style: none; Padding: 0; Margin: 0; display none; } .second-level-menu & gt; Lee (Status: Relative; Height: 30px; Background: # 999999; } .second-level-menu & gt; Li: Hover {Background: #CCCCC; } .top-level-menu {list-style: none; Padding: 0; Margin: 0; } .top-level-menu> Lee (Status: Relative; Swim left; Height: 30px; Width: 150px; Background: # 999999; } .top-level-menu> Li: Hover {Background: #CCCCC; } .top-level-menu li: hover & gt; Display the menu at the next level, at UL {/ * hover * / display: inline; } / * Menu link styles * / .top-level-menu a / * Apply to all links within the multi-level menu * / {font: bold 14px aerial, helvicica, non-serif; Color: #FFFFFF; Text-decoration: None; Padding: 0 0 10 px; / * Complete list item-container * / display link: block; Line-height: 30px; } .top-level-menu a: hover {color: # 000000; } & Lt; / Style & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Ul class = "top-level-menu" & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; About & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Service & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Office & lt; / A & gt; & Lt; Ul class = "second-level-menu" & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Chicago & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Los Angeles & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; New York & lt; / A & gt; & Lt; Ul class = "Third level menu" & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Notification & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Book a meeting & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Testimonials & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Jobs & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Seattle & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Contact & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Body & gt; & Lt; / Html & gt;  

I have also set a live demo which is available to play with

.