Click here to Skip to main content
15,119,322 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I am trying to add a dropdown button that displays a few links when the mouse hovers over the button, when I tried implementing the css for this everything appears to work fine except the actual links are not being displayed under the button.

This is part of my css:

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}


/* The dropdown container */

.dropdown {
  float: left;
  overflow: hidden;
}


/* Dropdown button */

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: black;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}


/* Add a red background color to navbar links on hover */

.dropdown:hover .dropbtn {
  background-color: lightgray;
}


/* Dropdown content (hidden by default) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #ff6a00;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}


/* Links inside the dropdown */

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}


/* Add a grey background color to dropdown links on hover */

.dropdown-content a:hover {
  background-color: #ddd;
}


/* Show the dropdown menu on hover */

.dropdown:hover .dropdown-content {
  display: block;
}


This is part of my navbar from my layout page in my asp.net core web app:

<header>
    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
        <div class="container-fluid">
            <a class="navbar-brand" asp-area="" asp-page="/Index">Demo</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row ">
                <ul class="navbar-nav flex-grow-1">
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
                    </li>
                </ul>
                <div class="dropdown">
                    <button class="dropbtn">
                        Dropdown
                        class="fa fa-caret-down">
                    </button>
                    <div class="dropdown-content">
                        <a href="#">Link 1</a>
                        <a href="#">Link 2</a>
                        <a href="#">Link 3</a>
                    </div>
                </div>
            </div>

        </div>
    </nav>
</header>


The dropdown button works and gets highlighted when I hover over it but the dropdown menu links do not appear under the button.

I ran a code snippet online to see how it works and it does in fact show the links when you hover over the drop down button, however when I run this same code in my asp.net webapp, hovering over the dropdown button does not reveal the links under the button. Not sure why the code snippet works online but not in my webapp

What I have tried:

I tried playing around with different style sheets for drop down buttons and the different bootstrap functions but they either lose the button or the same issue occurs. I also tried adding text-decoration to see if it was just blended into the background but it is not.
Posted
Updated 30-Jul-19 14:05pm
Comments
lmoelleb 29-Jul-19 3:33am
   
This is all client side stuff. So debug it as such. Use the browser DOM navigator to see if the expected elements are present, if they contain the expected values, and if the stle is as expected. The browser will allow you to change values and styles directly so you can experiment easily without rerunning the code. Once you know why the field is not displayed, you are either able to fix it, or you can ask a more precise question here.
Richard Deeming 30-Jul-19 11:25am
   
Your dropdown menu code works fine for me: Demo[^]

The most likely problem is that your CSS isn't being included, or is out-of-date. Use your browser's developer tools to inspect the styles applied to the elements.

1 solution

I found the solution. The reason why it was not working in my webapp was because my dropdown button name was conflicting with bootstraps dropdown button name. I changed the name to my_dropdown in my css and included this new name in the layout html page and it works.
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900