使导航菜单始终正确显示而不会溢出内容

Question

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 :)

 #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%; } 

 <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> 

Answer 1

For a complete answer we need to know the interaction between the code you supplied and the content it interacts with. But from your question:

the menu eventually overflows UNDER the main content.

When two elements overlap you can use z-index to choose which one is on top. Higher values stays on top of lower values, default is 0 .

Add z-index: 1; to nav or ul . The elements will still overlap, but at least the navbar stays on top.

Answer 2

 #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: 165px; 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%; } 

 <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> 

Answer 3

 z-index: 1000; 

CSS z-index would help you. set it to 1 or 1000.