HELP!!! Problem with Mega Menu

I've copied some source code from w3schools.com, which should make a 3-column mega menu. However, when I open it on a certain page, the 3rd column is on a second row, below the first 2. Here's the code I'm using for the header, including CSS: <!DOCTYPE html> <html lang='en'> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Community Projects | FastLabs </title> <meta name="description" content="Welcome to our new website! Thanks for coming."> <link rel="stylesheet" href="main.css"> <style> .fadebox{ position: relative; width: 50%; height:100% } .image { display: block; width: 100%; height: 100%; } .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: #008CBA; } .fadebox:hover .overlay { opacity: 1; } .text { color: white; font-family: "Segoe UI", monospaced; font-size: 20px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; } /* Style the tab buttons */ .tablink { background-color: #555; color: white; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; font-size: 17px; width: 25%; } /* Change background color of buttons on hover */ .tablink:hover { background-color: #777; } /* Set default styles for tab content */ .tabcontent { color: white; display: none; padding: 50px; text-align: center; } /* Style each tab content individually */ #Pipit {background-color:red;} #In-SuiteX {background-color:orange;} #sanguinearts {background-color:green;} #mlen {background-color:darkblue;} .btn { border: none; /* Remove borders */ color: white; /* Add a text color */ padding: 14px 28px; /* Add some padding */ cursor: pointer; /* Add a pointer cursor on mouse-over */ } .success {back

html css mega-menu

20th Apr 2020, 3:21 PM

Isaac Whitaker

3 Answers

+ 3

Hello Isaac Whitaker , For big codes like that (more than 10-15 lines) the code better be be saved in SoloLearn. Once you have it in SoloLearn you can share the code link instead. Put the code link in your thread Description. By sharing code link you wouldn't have to worry character limits will truncate your code. Once you have edited this thread to add code link you can remove the raw text code. Follow the guide below to sharing links 👇 https://www.sololearn.com/post/75089/?ref=app

20th Apr 2020, 3:49 PM

Ipang

Sorry, it cut off. From there it goes: .success {background-color: #4CAF50;} /* Green */ .success:hover {background-color: #46a049;} .info {background-color: #2196F3;} /* Blue */ .info:hover {background: #0b7dda;} .warning {background-color: #ff914d;} /* Orange */ .warning:hover {background: #e68a00;} .danger {background-color: #f44336;} /* Red */ .danger:hover {background: #da190b;} .default {background-color: lightgrey; color: black;} /* Gray */ .default:hover {background: #ddd;} .navbar { overflow: hidden; background-color: #333; font-family: Arial; } /* Links inside the navbar */ .navbar a { float: left; font-size: 16px; color: white; text-align: left; padding: 14px 16px; text-decoration: none; } /* The dropdown container */ .dropdown { float: left; overflow: hidden; } /* Dropdown button */ .dropdown .dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font: inherit; /* Important for vertical align on mobile phones */ margin: 0; /* Important for vertical align on mobile phones */ } /* Add a red background color to navbar links on hover */ .navbar a:hover, .dropdown:hover .dropbtn { background-color: darkorange; } /* Dropdown content (hidden by default) */ .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; width: 100%; left: 0; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /* Mega Menu header, if needed */ .dropdown-content .header { background: darkorange; padding: 16px; color: white; } /* Show the dropdown menu on hover */ .dropdown:hover .dropdown-content { display: block; } /* Create three equal columns that floats next to each other */ .columnmega { float: left; width: 33.33%; padding: 10px; background-color: #ccc; height: 250px; } /* Style links inside the columns */ .columnmega a { float: none; color:

20th Apr 2020, 3:23 PM

Isaac Whitaker

and then: /* Style links inside the columns */ .columnmega a { float: none; color: black; padding: 16px; text-decoration: none; display: block; text-align: left; } /* Add a background color on hover */ .columnmega a:hover { background-color: #ddd; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } </style> </head> <body style="background-color: white"> <header style= "background-color: #ff914d"> <div style="color:white"> <h1 style="text-align: center">FastLabs Software</h1> <nav style="text-align: center"> <div class="topnav"> <a href="index.html">Home</a> <a class="active" href="community-projects.html">Community Projects</a> <div class="dropdown"> <button class="dropbtn">Products <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <div class="header"> <h2>FastLabs Products</h2> </div> <div class="row"> <div class="columnmega"> <h3>Our Products</h3> <a href="actigo.html">Actigo</a> </div> <div class="columnmega"> <h3>Vigsites Products</h3> <a href="https://vigsites.wixsite.com/mlen">MinecraftLive</a> <a href="https://vigsites.wixsite.com/ripple">Ripple News</a> <a href="https://vigsites.wixsite.com/vwebos">In-Suite X (V WebOS)</a> </div> <div class="columnmega"> <h3>Other</h3> <a href="community-projects.html">Pipit</a> </div> </div> </div> </div> <a href="purchase.html">Plans</a> </div> </nav> </div> </header>

20th Apr 2020, 3:23 PM

Isaac Whitaker