CODEWITHSUNDEEP
jqueryhtmlcss
ThisisD
ThisisD

Reputation: 17

Dropdown Menu not working

Why is the dropdown menu not working in this piece of code? The list option is being displayed but it appears the "Caret" is not working correctly. Any ideas why? 

    <!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title> Retrofit </title>
        <link rel ="stylesheet" href ="css/bootstrap.min.css">
        <link rel ="stylesheet" href ="css/main.css">
        <meta name="viewport" content ="width = device-width, initial-scale = 1, user-scalable = no">
        <script src ="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js " </script>
        <script src ="js/bootstrap.min.js"></script>
    </head>
    <body>
        <nav class ="navbar navbar-default navbar-fixed-top">
            <div cass ="container"> 
                <a href ="index.php" class ="navbar-brand"> Retrofit </a>
                <ul class ="nav navbar-nav"> 
                    <li class ="dropdown ">
                        <a href ="#" class ="dropdown-toggle" data-toggle ="dropdown"> League <span class = "caret"></span></a>
                        <ul class ="dropdown-menu" role="menu">
                            <li><a href ="#"> Premier League </a></li> 
                            <li><a href ="#"> La Liga </a></li>
                            <li><a href ="#"> Bundesliga </a></li>
                            <li><a href ="#"> Serie A </a></li>
                        </ul>
                    </li>
                </ul>
            </div>   

        </nav>
        <?php
        // put your code here
        ?>
    </body>
</html>

Upvotes: 0

Views: 350

Answers (1)

Xigo
Xigo

Reputation: 29

Try putting jquery to the bottom of the body something like this

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>
</html>

Upvotes: 1

Related Questions