Display listitems when hovering on the UL item

Here's the code using bootstrap framework

What I'd like to do if I hover on "Application", the 2 listitems will automatically display even without clicking. I need a css or script to accomplish it.
 
<ul class="navbar-nav">
                    <li class="nav-item">
                        <a href="#" class="nav-link">Application</a>
                        <ul class="dropdown-menu">
                            <li>
                                Supported
                            </li>
                            <li>
                                Unsupported

                            </li>
                        </ul>

                    </li>.....

Open in new window

I would like to hover the
zachvaldezAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Branislav BorojevicWeb EnthusiastCommented:
You can achieve this with jQuery. Check the link below for a working example:

https://jsfiddle.net/702cdhka/3/
0
zachvaldezAuthor Commented:
The submenu displays but I'm not able to make a selection. It disappears if I hover on it. Also it is off left and not centered  below the
LIst (Li)
0
Branislav BorojevicWeb EnthusiastCommented:
Just change the script to the code below:

$(document).ready(function () {

  $(".nav-link").mouseenter(function(){
    $(".dropdown-menu").show(); 
  });

  $(".dropdown-menu").mouseleave(function(){
    $(".dropdown-menu").hide(); 
  });
});

Open in new window

0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

zachvaldezAuthor Commented:
How would I center the dropdown-menu so its right below the list?
0
Branislav BorojevicWeb EnthusiastCommented:
Add
padding-left:0px

Open in new window

to the .dropdown-menu in the CSS.

https://jsfiddle.net/702cdhka/7/
0
zachvaldezAuthor Commented:
ok, the problem here is that  it has class="nav-link" in all listitems(li), therefore the dropdown-menu constantly display in very options. Is it possible that this rule only applies for "Application"?
Thanks


        <div class="nav navbar-collapse collapse justify-content-end">
               
                <ul class="nav navbar">
                    <li class="nav-item">
                        <a href="#" class="nav-link dropdown-toggle">Application</a>
                        <ul class="dropdown-menu">
                            <li><a href="/Application.aspx" class="nav-link">Supported</a>
                            </li>
                            <li><a href="#" class="nav-link">UnSupported</a>

                            </li>
                        </ul>

                    </li>


                    <li class="nav-item">
                        <a href="/Software.aspx" class="nav-link">Software</a>
                    </li>
                    <li class="nav-item">
                        <a href="/Process.aspx" class="nav-link">Process</a>
                    </li>
                    <li class="nav-item">
                        <a href="/SiteSystem.aspx" class="nav-link">System</a>
                    </li>
                    <li class="nav-item">
                        <a href="/SiteServer.aspx" class="nav-link">Servers</a>
                    </li>


                </ul>
               
            </div>

Open in new window

0
zachvaldezAuthor Commented:
Is it possible to create an ID for the ul that carries the submenus so it is identifiable and will be isolated from the other list?
0
Branislav BorojevicWeb EnthusiastCommented:
Certainly, the same way you assign the class, you can add id="IDNAME" to the menu and apply CSS specific to that ID.
0
zachvaldezAuthor Commented:
How would I write the code calling that ID?
0
Branislav BorojevicWeb EnthusiastCommented:
You can do that by assigning the ID to the navigation link that holds the sub-menu individually.

In the case below, I assigned this navigation item
id="application-menu"

Open in new window


Then, you apply the change on the jQuery code to reference that ID rather than all NAV links:

$(document).ready(function () {

  $("#application-menu").mouseenter(function(){
    $(".dropdown-menu").show(); 
  });

  $("#application-menu").mouseleave(function(){
    $(".dropdown-menu").hide(); 
  });
});

Open in new window


See the working updated example here: https://jsfiddle.net/702cdhka/9/
0
zachvaldezAuthor Commented:
If I hover to the submenus, the control disappears
0
Branislav BorojevicWeb EnthusiastCommented:
If I hover to the submenus, the control disappears

What do you mean by the control disappears?

You have the ID added to the navigation item that holds the submenu. You wanted to be able to show the dropdown on a hover action, which is working. What else are you missing? As long as you are hovering over items that are child items of the ID that they are in, they will be showing:

 <li class="nav-item" id="application-menu" >
                        <a href="#" class="nav-link dropdown-toggle">Application</a>
                        <ul class="dropdown-menu">
                            <li><a href="/Application.aspx" class="nav-link">Supported</a>
                            </li>
                            <li><a href="#" class="nav-link">UnSupported</a>

                            </li>
                        </ul>

                    </li>

Open in new window


dropdown-menu class is inside the application-menu ID so, because the jQuery functions are linked to the ID, they will be active as long as you are hovering over that ID (and elements within it)

Are you missing anything else? I believe you have your answers, you just need to apply CSS to your ID's and classes to style it up appropriately.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
zachvaldezAuthor Commented:
This is great solution.
0
zachvaldezAuthor Commented:
I could not display the result in fiddle.net when I 'run' the code?
0
Branislav BorojevicWeb EnthusiastCommented:
https://jsfiddle.net/702cdhka/14/ will work for you certainly.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.