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 &amp; 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

Popular posts from this blog

javascript - Laravel datatable invalid JSON response -

-
everything work fine on code below fetch user logs: js: <script> $(document).ready(function () { var table =$('#systemlogs').datatable({ responsive: true, processing: true, serverside: true, "language": { "url": "/datatables/media/plug-in/persian.json" }, ajax: '{!! url('/admin/systemlogs/data/systemlogsdatatable') !!}', columns: [ { data: 'name', name: 'name' }, { data: 'message_text', name: 'message_text' }, { data: 'remote_addr', name: 'remote_addr' }, { data: 'log_created_at', name: 'management_logs.created_at' }, { data: 'log_updated_at', name: 'management_logs.updated_at' }, ] }); }); </script> routes: route::get('/systemlogs/data/systemlogsdatatable','systemlogscontrolle...
Read more

java - Exception in thread "main" org.springframework.context.ApplicationContextException: Unable to start embedded container; -

-
i getting error when run spring application: exception in thread "main" org.springframework.context.applicationcontextexception: unable start embedded container; nested exception org.springframework.context.applicationcontextexception: unable start embeddedwebapplicationcontext due missing embeddedservletcontainerfactory bean. @ org.springframework.boot.context.embedded.embeddedwebapplicationcontext.onrefresh(embeddedwebapplicationcontext.java:124) @ org.springframework.context.support.abstractapplicationcontext.refresh(abstractapplicationcontext.java:476) @ org.springframework.boot.context.embedded.embeddedwebapplicationcontext.refresh(embeddedwebapplicationcontext.java:109) @ org.springframework.boot.springapplication.refresh(springapplication.java:691) @ org.springframework.boot.springapplication.run(springapplication.java:320) @ org.springframework.boot.springapplication.run(springapplication.java:952) @ org.springframework.boot.springa...
Read more

sql server 2008 - My Sql Code Get An Error Of Msg 245, Level 16, State 1, Line 1 Conversion failed when converting the varchar value '8:45 AM' to data type int -

-
msg 245, level 16, state 1, line 1 conversion failed when converting varchar value '8:45 am' data type int. script declare @specimenid bigint = 0, @script varchar(max); declare @starttime int = (select convert(int,substring(start_time,0,charindex(':', start_time)) - 12) appt appt._id=112601) --select @starttime set @script = 'select distinct ptlast_name + '', '' + pt.first_name patient_name, dbo.formatdate(pt.dob,''mm/dd/yyyy'') dob, (convert(varchar, (datediff(yy, dob, appt_date) - case when (month(dob) > month(appt_date)) or (month(dob) = month(appt_date) , day(dob) > day(appt_date)) 1 else 0 end)) + ''/'' + convert(varchar, (datediff(m, dateadd(yy, (datediff(yy, dob, appt_date) - case when (month(dob) > month(appt_date)) or (month(dob) = month(appt_date) , day(dob) > day(appt_date)) 1 else 0 end), d...
Read more