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
Post a Comment