html - How to target four layers deep UL with css without affecting its parents -
i creating drop down menu using ul , did. except can't target 4 layer deep ul because assume target path code gets repeated , css gets confused.
i want target last ul in ul lu ul lu ul li ul sequence , tell him opacity:0
ul wrapped #menu div. consequently wrote: #menu li li li ul {opacity:0} think css here can't tell difference between li li ul , li li li ul changes applied parent well.
any solutions missing?
thanks in advance.
this did multi level drop down menu, using css.. hope you, can add more level in same manner
#menu { width:1000px; margin:0 auto; height:44px; z-index:300; } #menu ul { list-style:none; position:relative; } #menu ul li { float:left; } #menu ul li { display:block; padding:13px 35px 13px 35px; text-decoration:none; color:#fff; } #menu ul li a:hover { background:#4255a4 url(../images/nav_hover.jpg) bottom left repeat-x; } #menu ul li ul { position:absolute; top:43px; visibility:hidden; z-index:300; width:184px; height:auto; -moz-box-shadow: 1px 1px 10px #333; -webkit-box-shadow: 1px 1px 10px #333; box-shadow: 1px 1px 10px #333; } #menu ul li ul li { position:relative; float:none; } #menu ul li ul li { padding:8px 10px 8px 10px; } #menu ul li:hover ul { visibility:visible; } #menu ul li ul:hover { visibility:visible; } #menu ul li:hover ul li ul{ visibility:hidden; } #menu ul li ul:hover li ul{ visibility:hidden; } #menu ul li ul li ul { position:absolute; top:0px; margin:0px 0px 0px 185px; visibility:hidden; z-index:300; width:184px; height:auto; -moz-box-shadow: 1px 1px 10px #333; -webkit-box-shadow: 1px 1px 10px #333; box-shadow: 1px 1px 10px #333; } #menu ul li ul li ul li { float:none; } #menu ul li ul li ul li { padding:8px 10px 8px 10px; } #menu ul li ul li:hover > ul { display:block; visibility:visible; z-index:300; } #menu ul li ul li:hover ul { display:block; visibility:visible; z-index:300; } #menu ul li ul li ul:hover { display:block; visibility:visible; z-index:300; }
Comments
Post a Comment