I have this menu on left hand side of my website. Everything appears fine under normal viewing. However, when I try to resize the browser window by progressively reducing the width, the menu eventually overflows UNDER the main content. I would like for the navigation menu to totally appear without overflowing under the content, irrespective of the browser window size. 

Any suggestions? 

Thanks :)

```css
#page-links-list {
    /* Formatting applied to display the vertical navigation menu. */
    border-right: 2px solid rgb(255, 255, 255);
    background-color: #000000;
    list-style-type: none;
    padding: 4% 0.25% 0%;
    margin: auto;
    position: fixed;
    height: 100%;
    float: left;
    width: 12%;
    font-size: 15px;
}

#page-links-list li {
    /* Formatting applied to display each parent item in the navigation menu. */
    text-align: center;
    padding: 1% 0%;
    display: block;
    width: 100%;
}

#page-links-list a {
    /* Formatting applied to display each hyperlink and its repective text in the navigation menu. */
    text-decoration: none;
    text-align: center;
    width: 100%;
    display: block;
    color: rgb(255, 255, 255);
    overflow: hidden;
    padding: 1% 1%;
}

#page-links-list #navigation-menu-logo {
    background-color: rgb(255, 255, 255);
    width: 40%;
}

#page-links-list li:hover .page-links-list-sub {
    /* Formatting applied to submenu when the cursor is hovered over the parent item, which contrasts with the formatting applied on the parent item. */
    display: block;
    max-height: 80%;
    padding: 0%;
    margin: 0%;
    background-color: rgb(255, 255, 255);
}

#page-links-list li:hover .page-links-list-sub a {
    /* Formatting applied to submenu text when the cursor is hovered over the parent item, which contrasts with the formatting applied on the text of the parent item. */
    color: #000000;
}

#main a:link {
    color: #ffffff;
}

#main a:visited {
    color: rgb(245, 245, 220);
}

#main a:hover {
    color: hsl(208, 100%, 97%);
}

#main a:active {
    color: darkgray; 
}

.page-links-list-sub {
    /* Formatting to display the transition of the submenu expanding beneath the parent item. */
    max-height: 0px;
    overflow: hidden;
    transition: all 0.5s ease-out;
    padding: 0%;
}
```

```html
<nav>
            <!-- Start of vertical navigation menu and sub menus -->
            <ul id="page-links-list">
                <li><img id="navigation-menu-logo" src="assets/images/trust-logo.png" alt="The Tropical Rainforests Trust logo"></li>
                <!-- Links to social media - First two option in vertical navigation -->
                <li><a href="https://www.facebook.com"><img src="assets/images/facebook-logo.png" alt="The Facebook logo."></a></li>
                <li><a href="https://www.twitter.com"><img src="assets/images/twitter-logo.png" alt="The Twitter logo."></a></li>
                <!-- Home tab in navigation menu -->
                <li><a>Home</a>
                    <!-- Home tab sub menus -->
                    <ul class="page-links-list-sub">
                        <li><a href="index.html">Home Page</a></li>
                        <li><a href="index.html#overview-container">Campaign Overview</a></li>
                        <li><a href="index.html#subscribe-form">Subscribe to News Letter</a></li>
                    </ul>
                </li>
                <!-- History tab in navigation menu -->
                <li><a>History</a>
                    <!-- History tab sub menus -->
                    <ul class="page-links-list-sub">
                        <li><a href="history.html">History Page</a></li>
                        <li><a href="history.html#history-container">Inception of Tropical Rainforest Trust</a></li>
                    </ul>
                </li>
                <!-- Education tab in navigation menu -->
                <li><a>Education</a>
                    <!-- Education tab sub menus -->
                    <ul class="page-links-list-sub">
                        <li><a href="education.html">Education Page</a></li>
                        <li><a href="education.html#education-container">Educational Visits</a></li>
                        <li><a href="education.html#tours-table-container">Educational Visit Bookings</a></li>
                    </ul>
                </li>
                <!-- Community tab in navigation menu -->
                <li><a>Community</a>
                    <!-- Community tab sub menus -->
                    <ul class="page-links-list-sub">
                        <li><a href="community.html">Community Page</a></li>
                        <li><a href="community.html#login-container">Comment Section Login</a></li>
                        <li><a href="community.html#post-link">Posts</a></li>
                    </ul>
                </li>
                <!-- About Rainforests tab in navigation menu -->
                <li><a>About Rainforests</a>
                    <!-- About Rainforests tab sub menus -->
                    <ul class="page-links-list-sub">
                        <li><a href="about-rainforests.html">About Rainforests Page</a></li>
                        <li><a href="about-rainforests.html#about-rainforests-title">Rainforest Importance</a></li>
                    </ul>
                </li>
                <!-- Visitor Information tab in navigation menu -->
                <li><a>Visitor Information</a>
                    <!-- Visitor Information tab sub menus -->
                    <ul class="page-links-list-sub">
                        <li><a href="visitor-information.html">Visitor Information Page</a></li>
                        <li><a href="visitor-information.html#visitor-information-container">Inception of Tropical Rainforest Trust</a></li>
                    </ul>
                </li>
                <!-- Get involed tab in navigation menu -->
                <li><a>Get involed</a>
                    <!-- Get involed tab sub menus -->
                    <ul class="page-links-list-sub">
                        <li><a href="get-involved.html">Get involed Page</a></li>
                        <li><a href="get-involved.html#get-involved-container">Get involed Introduction</a></li>
                        <li><a href="get-involved.html#adopt-an-animal-form">Adopt an Animal Form</a></li>
                    </ul>
                </li>
                <!-- Adopt an Animal tab in navigation menu -->
                <li><a>Adopt an Animal</a>
                    <!-- Adopt an Animal tab sub menus -->
                    <ul class="page-links-list-sub">
                        <li><a href="adopt-an-animal.html">Adopt an Animal Page</a></li>
                        <li><a href="adopt-an-animal.html#adopt-an-animal-title">Photo Gallery</a></li>
                        <li><a href="adopt-an-animal.html#adoption-gift-pack">Gift Pack</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
```