J'ai les codes ci-dessous, cependant, lorsque je modifie le code avec du code Visual Studio et l'exécute dans mon navigateur Chrome, je ne vois pas le menu déroulant dans les "Produits phares". section.

Cependant, lorsque j'insère le code ici (stackoverflow), je peux voir mon menu déroulant. Quelqu'un peut-il m'expliquer comment cela s'est produit? Et comment puis-je résoudre ce problème afin que je puisse le voir dans tous les types de navigateurs? Merci beaucoup!

body {
    background-color: white;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

/* Navigation bar */
#navigation_bar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top: 0;
    width: 100%;
}

li {
    float: left;
    
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active), .dropdown:hover .dropbtn {
    background-color: #111;
}

li.dropdown {
    display: inline-block;
}

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

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

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

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

.active {
    background-color: #4CAF50;
}
<!DOCTYPE html>
<html>
    <head>
        <title>Bo Kei Restaurant</title>
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
        <script type='text/javascript' src='javascript/jquery-3.1.0.js'></script>
        <script type='text/javascript' src='javascript/jquery-ui.min.js'></script>
        <script type='text/javascript' src='javascript/script.js'></script>
    </head>
    <body>

<!--Navigation bar-->
        <ul id="navigation_bar">
            <li><a class="active" href="navigation_bar/home.html">Home.</a></li>
            <li><a href="navigation_bar/promotion.html">Promotion.</a></li>
<!--drop down menu-->
           <li class="dropdown"><a href="navigation_bar/hot_products.html" class="dropbtn">Hot Products.</a>
                <div class="dropdown-content">
                    <a herf="navigation_bar/sub_menu/sandwiches.html">Sandwiches</a>
                    <a herf="navigation_bar/sub_menu/burger.html">Burger</a>
                    <a herf="navigation_bar/sub_menu/rice.html">Rice</a>
                    <a herf="navigation_bar/sub_menu/noodles.html">Noddles</a>
                </div>
            </li>   
<!--Back to normal-->
            <li><a href="navigation_bar/cold_products.html">Cold Products.</a></li>
            <li><a href="navigation_bar/snacks.html">Snacks.</a></li>
            <li><a href="navigation_bar/about_us.html">About Us.</a></li>
            <li><a href="navigation_bar/contact_us.html">Contact Us.</a></li>
        </ul>

    

    </body>
</html>
3
Jimmy Wong 9 août 2016 à 13:12

3 réponses

Meilleure réponse

Je ne peux pas voir le menu déroulant ici SO ... Supprimez simplement le overflow: hidden du #navigation_bar et cela devrait fonctionner:

body {
    background-color: white;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

/* Navigation bar */
#navigation_bar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #333;
    position: fixed;
    top: 0;
    width: 100%;
}

li {
    float: left;
    
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active), .dropdown:hover .dropbtn {
    background-color: #111;
}

li.dropdown {
    display: inline-block;
}

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

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

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

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

.active {
    background-color: #4CAF50;
}
<!DOCTYPE html>
<html>
    <head>
        <title>Bo Kei Restaurant</title>
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
        <script type='text/javascript' src='javascript/jquery-3.1.0.js'></script>
        <script type='text/javascript' src='javascript/jquery-ui.min.js'></script>
        <script type='text/javascript' src='javascript/script.js'></script>
    </head>
    <body>

<!--Navigation bar-->
        <ul id="navigation_bar">
            <li><a class="active" href="navigation_bar/home.html">Home.</a></li>
            <li><a href="navigation_bar/promotion.html">Promotion.</a></li>
<!--drop down menu-->
           <li class="dropdown"><a href="navigation_bar/hot_products.html" class="dropbtn">Hot Products.</a>
                <div class="dropdown-content">
                    <a herf="navigation_bar/sub_menu/sandwiches.html">Sandwiches</a>
                    <a herf="navigation_bar/sub_menu/burger.html">Burger</a>
                    <a herf="navigation_bar/sub_menu/rice.html">Rice</a>
                    <a herf="navigation_bar/sub_menu/noodles.html">Noddles</a>
                </div>
            </li>   
<!--Back to normal-->
            <li><a href="navigation_bar/cold_products.html">Cold Products.</a></li>
            <li><a href="navigation_bar/snacks.html">Snacks.</a></li>
            <li><a href="navigation_bar/about_us.html">About Us.</a></li>
            <li><a href="navigation_bar/contact_us.html">Contact Us.</a></li>
        </ul>

    

    </body>
</html>
3
andreas 9 août 2016 à 10:15

Cela n'a rien à voir avec le navigateur. Il devient totalement invisible lorsque l'écran est suffisamment large pour afficher le menu sur une seule ligne à cause de

#navigation_bar {
    overflow: hidden;
}

Même dans votre exemple, il n'affiche pas tous les éléments de menu, uniquement ceux qui correspondent à la hauteur de la barre de navigation. Donc, supprimez simplement cette propriété afin d'afficher les éléments de menu survolés quelle que soit la hauteur du menu.

1
Theodore K. 9 août 2016 à 10:24

La suppression de overflow: hidden; de votre #navigation_bar identifiant vous aidera à voir votre menu déroulant.

Violon

2
shishir 9 août 2016 à 10:21