locked
Hover Menu Not Working RRS feed

  • Question

  • User982203039 posted

    I can not get my menu to work. What am I overlooking?

    The Link1 and link2 both show the same sub menu and link2 sub menu shows up under link1? Any ideas?

    Thanks, EB

    <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="mynav_navbar">
                    <a href="#home">Home</a>
                    <div class="mynav_dropdown">
                        <button class="mynav_dropbtn">
                            Link1
                            <i class="fa fa-caret-down"></i>
                        </button>
                        <div class="mynav_dropdown-content">
                            <a href="#">Link 1</a>
                            <a href="#">Link 2</a>
                            <a href="#">Link 3</a>
                        </div>
                        <button class="mynav_dropbtn">
                            Links2
                            <i class="fa fa-caret-down"></i>
                        </button>
                        <div class="mynav_dropdown-content">
                            <a href="#">Link 4</a>
                            <a href="#">Link 5</a>
                            <a href="#">Link 6</a>
                        </div>
                    </div>
                </div>
            </div>
        </nav>
    Tuesday, June 4, 2019 12:14 PM

All replies

  • User753101303 posted

    Hi,

    Seems a kind of mix between Bootstrap and your own CSS classes? If using Bootstrap, have you tried to follow exactly the provided documentation one step at a time and in particular to add missing class names on your dropdown divs and links ?

    Make first something that works according to your CSS framework and then do changes (and if unsure one step at a time so that you can better fix things if you start to break the design).

    Edit : or maybe Bootstrap with https://www.w3schools.com/howto/howto_css_dropdown.asp ? Make sure changed names are consistent and once again try to follow as much as you can what you are using to make it work first before doing changes.

    Also you can use F12 in your browser to inspect your page, see which styles are applied etc... to learn debugging your rendering on your own. For now I'm not even sure which CSS framework or design principle you are trying to use for your menu.

    Tuesday, June 4, 2019 1:11 PM
  • User839733648 posted

    Hi Baze72,

    According to your description and code, it seems that you've used bootstrap along with some customized CSS style.

    I've tried to search and find that maybe you've used the same style as this link shows: https://codedocu.com/Details_mobile?d=2212&z=1&t=new+01.03.2018+12%3A03%3A17

    I've tried the style and reproduce the issue.

    The key point is that you've added the Link1 and Links2 under the same mynav_dropdown class, you should create two classes.

    Here is the working code.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" />
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
        <style>
            .mynav_navbar {
                overflow: hidden;
                background-color: #333;
                font-family: Arial, Helvetica, sans-serif;
            }
                .mynav_navbar a {
                    float: left;
                    font-size: 16px;
                    color: white;
                    text-align: center;
                    padding: 14px 16px;
                    text-decoration: none;
                }
            .mynav_dropdown {
                float: left;
                overflow: hidden;
            }
                .mynav_dropdown .mynav_dropbtn {
                    font-size: 16px;
                    border: none;
                    outline: none;
                    color: white;
                    padding: 14px 16px;
                    background-color: inherit;
                    font-family: inherit;
                    margin: 0;
                }
                .mynav_navbar a:hover, .mynav_dropdown:hover .mynav_dropbtn {
                    background-color: red;
                }
    
            .mynav_dropdown-content {
                display: none;
                ;
                background-color: #f9f9f9;
                min-width: 160px;
                box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
                z-index: 1;
            }
    
                .mynav_dropdown-content a {
                    float: none;
                    color: black;
                    padding: 12px 16px;
                    text-decoration: none;
                    display: block;
                    text-align: left;
                }
                    .mynav_dropdown-content a:hover {
                        background-color: #ddd;
                    }
            .mynav_dropdown:hover .mynav_dropdown-content {
                display: block;
            }
        </style>
    </head>
    <body>
        <div style="background-color: transparent; border-image-outset: 0; border-image-repeat: stretch; border-image-slice: 100%; border-image-source: none; border-image-width: 1; color: #666666; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; vertical-align: baseline; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px; padding: 0px; margin: 0px; border: 0px none #666666;">
            <nav class="navbar navbar-inverse navbar-fixed-top">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                    <div class="mynav_navbar">
                        <a href="#home">Home</a>
                        <div class="mynav_dropdown">
                            <button class="mynav_dropbtn">
                                Link1
                                <i class="fa fa-caret-down"></i>
                            </button>
                            <div class="mynav_dropdown-content">
                                <a href="#">Link 1</a>
                                <a href="#">Link 2</a>
                                <a href="#">Link 3</a>
                            </div>
                        </div> 
                        <div class="mynav_dropdown">
                            <button class="mynav_dropbtn">
                                Links2
                                <i class="fa fa-caret-down"></i>
                            </button>
                            <div class="mynav_dropdown-content">
                                <a href="#">Link 4</a>
                                <a href="#">Link 5</a>
                                <a href="#">Link 6</a>
                            </div>
                        </div>
                        <div style="background-color: transparent; border-image-outset: 0; border-image-repeat: stretch; border-image-slice: 100%; border-image-source: none; border-image-width: 1; color: #666666; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; vertical-align: baseline; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px; padding: 0px; margin: 0px; border: 0px none #666666;">                       
                        </div>
                    </div>
                </div>
            </nav>
        </div>
    </body>
    </html>

    result:

    Best Regards,

    Jenifer

    Wednesday, June 5, 2019 6:14 AM
  • User-857013053 posted

    <style>
    .dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    }

    .dropdown {
    ;
    display: inline-block;
    }

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

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

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

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

    .dropdown:hover .dropbtn {background-color: #3e8e41;}
    </style>
    </head>
    <body>

    <h2>Hoverable Dropdown</h2>
    <p>Move the mouse over the button to open the dropdown menu.</p>

    <div class="dropdown">
    <button class="dropbtn">Dropdown</button>
    <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    </div>
    </div>

    </body>

    Friday, June 21, 2019 3:48 AM
  • User-857013053 posted

    HTML:

    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!------ Include the above in your HEAD tag ---------->

    <nav class="navbar navbar-expand-sm navbar-light bg-light">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Waris</a>

    <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
    <li class="nav-item">
    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">Contact us</a>
    </li>
    <li class="nav-item dropdown dmenu">
    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
    Dropdown link
    </a>
    <div class="dropdown-menu sm-menu">
    <a class="dropdown-item" href="#">Link 1</a>
    <a class="dropdown-item" href="#">Link 2</a>
    <a class="dropdown-item" href="#">Link 3</a>
    </div>
    </li>
    <li class="nav-item dropdown dmenu">
    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
    Dropdown link
    </a>
    <div class="dropdown-menu sm-menu">
    <a class="dropdown-item" href="#">Link 1</a>
    <a class="dropdown-item" href="#">Link 2</a>
    <a class="dropdown-item" href="#">Link 3</a>
    <a class="dropdown-item" href="#">Link 4</a>
    <a class="dropdown-item" href="#">Link 5</a>
    <a class="dropdown-item" href="#">Link 6</a>
    </div>
    </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-default my-2 my-sm-0" type="submit">Search</button>
    </form>
    </div>
    </nav>

    CSS:


    .navbar{
    background: #0c73cc !important;
    }

    .dropdown{
    border-radius:0;
    border:0;
    }
    .dropdown-menu{
    background: #0c73cc;
    border:0;
    top:80%;
    border-radius:0px 0px 5px 5px;
    }
    .dropdown-item:hover{
    background:#085ca5;
    color:#fff;
    }
    .dropdown-menu a{
    color:#fff;
    }
    .navbar .nav-item .nav-link{
    color:#eee !important;

    }
    .navbar .nav-item .nav-link:hover .navbar .nav-item .nav-link{
    color:red !important;

    }

    JS:

    $(document).ready(function () {
    $('.navbar-light .dmenu').hover(function () {
    $(this).find('.sm-menu').first().stop(true, true).slideDown(150);
    }, function () {
    $(this).find('.sm-menu').first().stop(true, true).slideUp(105)
    });
    });

    Wednesday, August 21, 2019 4:33 AM