CODEWITHSUNDEEP
javascripthtmlcss
Jimmy Wong
Jimmy Wong

Reputation: 231

Cannot view my drop down menu in Chrome browser, but when I insert the codes in here, I can view that. How come?

I am having the codes in below, however, when I modify the code with visual studio code and run it in my Chrome browser, I cannot see the drop down menu in the "Hot Products." section.

However, when I insert the code in here (stackoverflow), I can see my drop down menu. Can someone explain to me how come this happened? And how can I fix this problem so that I can view that in all types of browsers? Thanks a lot!

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>

Upvotes: 3

Views: 2201

Answers (3)

Theodore K.
Theodore K.

Reputation: 5176

It has nothing to do with the browser. It just gets totally invisible when the screen is wide enough to display the menu in one line because of 

#navigation_bar {
    overflow: hidden;
}

Even in your example it doesn't show all menu items, only those that fit inside the navigation bar height. So, just remove this property in order to show the overflown menu items whatever the menu height.

Upvotes: 1

shishir
shishir

Reputation: 851

Removing overflow: hidden; from your #navigation_bar id will help you see your drop-down menu.

Fiddle

Upvotes: 2

andreas
andreas

Reputation: 16936

I can't see the drop down here on SO... Just remove the overflow: hidden from the #navigation_bar and it should be working:

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>

Upvotes: 3

Related Questions