I am looking to center a title over the top of two unordered lists. I am rather new to HTML,CSS and JS so my go-to is usually chat gpt or just google, but I cannot seem to find any examples of how to best do it, and chat gpt doesnt seem to have a clue what I want so i figured here was the best place to come.
As I have mentioned before, I am looking to center a title over two unordered lists. I have illustrated roughly what I want in this image:Depiction of hover mega-menu
I have all my current code in this codepen: Codepen Code and I am hopeful you can help me.
I have tried positioning the header in multiple ways and changing how the lists are styled but I only seem to be able to make the header appear over the top of all the links, like this:Long list of links under header, or have the header appear on the side in an individual box, like this:Header in an individual box (notice the underline at the bottom of the box, because I'm using a border as my underline). I am doing the css and html only preferably. Here is the code if you don't like using codepen:
HTML:
<nav>
<div class="container">
<ul class="menu-main">
<li class="Tab1"><a href="">Tab 01</a>
<div class="menu-sub">
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
</ul>
</div>
</li>
<li class="Tab2"><a href="">Tab 02</a>
<div class="menu-mega">
<ul>
<h3>Category</h3>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
</ul>
<ul>
<h3>Category</h3>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
</ul>
<ul>
<h3>Category</h3>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
</ul>
</div>
</li>
<li class="Tab2"><a href="">Tab 03</a>
<div class="menu-mega">
<ul>
<h3>Category</h3>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
</ul>
<ul>
<h3>Category</h3>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
</ul>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
</ul>
</ul>
</div>
</li>
<li><a href="">Tab 04</a></li>
</ul>
</div>
</nav>
CSS:
* {
margin: 0;
}
ul {
list-style: none;
padding: 0;
}
a {
text-decoration: none;
color: white;
}
body {
background: #333333;
}
.container {
width: 100%;
height: 40px;
background: #666666;
}
.menu-main {
display: flex;
justify-content: start;
}
.menu-main li {
display: flex;
align-items: center;
justify-content: center;
margin: 0px 10px;
height: 40px;
width: 100px;
position: relative;
transition: all 0.5s;
}
h3 {
display: flex;
align-items: center;
justify-content: center;
color: white;
margin: 0 10px 10px 10px;
border-bottom: 1px solid rgba(255,255,255,0.3);
}
.menu-main li:hover {
background: gray;
}
.menu-sub {
display: flex;
justify-content: center;
pointer-events:none;
opacity: 0;
position: absolute;
top: 40px;
left: 0px;
background: #555555;
width: 100%;
transition: all 0.2s ease-in-out;
}
.Tab1:hover .menu-sub,
.Tab2:hover .menu-mega
{
opacity: 1;
pointer-events:auto;
}
.menu-sub ul li {
transition: all 0.2s ease-in-out;
}
.menu-mega {
display: flex;
pointer-events:none;
opacity: 0;
justify-content: space-evenly;
position: absolute;
top: 40px;
left: 0px;
background: #555555;
width: auto;
padding: 10px;
transition: all 0.2s ease-in-out;
}
Also any improvements I could make to my code would be very much appreciated as I am still only 2 weeks into my web dev journey, and I'm always looking for how to improve! Thanks!
If you want two separate lists displayed side by side, then you need to add a flex wrapper around them.
But if you want a single list which wraps automatically, you could just style the list with a
columnsrule.