html - On mouse hover list did not display -
i have following html dynamically generated. goal display dropdown list links in tag #level2, when mouse on corresponding parent li tag.
<div id="level1" style="position: relative; display: inline-block;"> <li id="0" style="height: 30px; min-width: 190px; list-style: outside none none; border: 1px solid rgb(125, 153, 202); text-align: left; padding: 5%; margin-left: 10px; margin-right: 2%; border-radius: 1px; font-size: 12px; font-weight: bold; color: rgb(255, 255, 255); background-color: rgb(96, 96, 96);"> o operating system ▸</li> <div id="level2" style="display: none; position: absolute; min-width: 160px;"> <a href="#" style="display: block; padding: 12px 16px; color: blue;">introduction </a> <a href="#" style="display: block; padding: 12px 16px; color: blue;">synchronization</a> <a href="#" style="display: block; padding: 12px 16px; color: blue;">memory & cache management</a> <a href="#" style="display: block; padding: 12px 16px; color: blue;">file system</a> <a href="#" style="display: block; padding: 12px 16px; color: blue;">storage management</a> <a href="#" style="display: block; padding: 12px 16px; color: blue;">management of process , threads</a> <a href="#" style="display: block; padding: 12px 16px; color: blue;">deadlock</a> </div> <li id="1" style="height: 30px; min-width: 190px; list-style: outside none none; border: 1px solid rgb(125, 153, 202); text-align: left; padding: 5%; margin-left: 10px; margin-right: 2%; border-radius: 1px; font-size: 12px; font-weight: bold; color: rgb(255, 255, 255); background-color: rgb(96, 96, 96);"> o data structures ▸</li> <div id="level2" style="display: none; position: absolute; min-width: 160px;"> <a href="#" style="display: block; padding: 12px 16px; color: blue;">basics</a> <a href="#" style="display: block; padding: 12px 16px; color: blue;">singly linked list</a> <a href="#" style="display: block; padding: 12px 16px; color: blue;">doubly linked list</a> <a href="#" style="display: block; padding: 12px 16px; color: blue;">trees</a> <a href="#" style="display: block; padding: 12px 16px; color: blue;">hash</a> <a href="#" style="display: block; padding: 12px 16px; color: blue;">graphs</a> </div> </div> to achieve goal, used following rules in function dynamically generate css, not helping me.
element = "#level1"; $(element).css("position", "relative"); $(element).css("display", "inline-block"); for(i = 0; < 20; i++){ element = "#level1 li#" + + ":hover > #level2"; $(element).css("display", "block"); } element = "#level1 #level2"; $(element).css("display", "none"); $(element).css("position", "absolute"); $(element).css("backgroud-color", "#f9f9f9"); $(element).css("min-width", "160px"); element = "#level1 #level2 a"; $(element).css("display", "block"); $(element).css("padding", "12px 16px"); $(element).css("color", "blue"); element = "#level1 #level2 a:hover"; $(element).css("background-color", "#606060"); thanks & regards
here pure css example. used external css make more managable. also, here jsfiddle.
html: (made #level1 <ul>, give <div>'s class, removed inline css)
<ul> <li> o operating system ▸ <div class="hidden-div"> <a href="#">introduction </a> <a href="#">synchronization</a> <a href="#">memory & cache management</a> <a href="#">file system</a> <a href="#">storage management</a> <a href="#">management of process , threads</a> <a href="#">deadlock</a> </div> </li> <li> o data structures ▸ <div class="hidden-div"> <a href="#">basics</a> <a href="#">singly linked list</a> <a href="#">doubly linked list</a> <a href="#">trees</a> <a href="#">hash</a> <a href="#">graphs</a> </div> </li> </ul> css: (a few minor things changed, style desired)
li { float: left; width: 200px; height: 30px; list-style: outside none none; border: 1px solid rgb(125, 153, 202); text-align: left; padding: 10px; border-radius: 1px; font-size: 12px; font-weight: bold; color: rgb(255, 255, 255); background-color: rgb(96, 96, 96); } .hidden-div { margin-top: 26px; visibility: hidden; } .hidden-div { display: block; padding: 12px 16px; color: blue; background-color: rgb(200, 200, 200); } li:hover .hidden-div { visibility: visible; }
Comments
Post a Comment