css - Sub-Navigation Dropdown deactivates on mouse-out -


I have to display the menu and submenu submenu on the mouseover but display it under the colorful area. When I mouseover of item 3, the submenu disappears.

I understand why this is disappearing and I am thinking that there is no way to do this work. Margins and padding ul li do not work on CSS

  & lt; Div id = "bg" & gt; & Lt; Ul class = "menu" & gt; & Lt; Li class = "first leaf" & gt; Item 1 & lt; / Li & gt; & Lt; Li class = "leaf" & gt; Item 2 & lt; / Li & gt; & Lt; Li class = "extended" & gt; Item 3 & lt; Ul class = "menu" & gt; & Lt; Li class = "leaf" & gt; Sub-item 1 & lt; / Li & gt; & Lt; Li class = "leaf" & gt; Sub-item 2 & lt; / Li & gt; & Lt; Li class = "leaf" & gt; Sub-item 3 & lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; Li class = "last leaf" & gt; Last item & lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt;  

css

  # bg {background color: yellow; Width: 400px; Height: 50px; } Ul {float: left; Margin: 0; Padding: 0; } UL Li (Status: Relative; Swim left; List style: none; List-style-image: none; Padding: .5 AM 1em; Margin: 0; Cursor: indicator; } Ul li ul. {Display: none; Status: Completed; Width: 120px; Left: 0; Top: 50px; } Ul li: hover ul (display: block; }  

This is happening because you went too far in the drop down, You can get the same effect by using padding-top and heading

  ul li ul {top: 20px ; Padding-top: 30px; }  

If you are not familiar with it, sometimes you can add borders to your elements when you have problems


Comments

Popular posts from this blog

java - org.apache.http.ProtocolException: Target host is not specified -

java - Gradle dependencies: compile project by relative path -

ruby on rails - Object doesn't support #inspect when used with .include -