Position the CSS meganav sub-nav div at the top of the parent div

I am working on a vertical list with hover functionality that displays a div in a right pane. My issue is that I need the right div to be positioned at the top of the containing div for each item, but currently it is appearing beneath the list item. You can view a demonstration of the current setup HERE

 <div id="main-nav">
  <ul>
    <li><a href="#">item</a>
      <div class="dropdown_3columns">
        <div class="col_1">
          <ul class="left-list">
            <li><a href="#">item</a>
              <div class="col_2">
                <h2>Colours</h2>
                <ul id="sub-main-nav">
                  <li><a href="#">item</li>
                  <li><a href="#">item</li>
                  <li><a href="#">item</li>
                  <li><a href="#">item</li>
                  <li><a href="#">item</li>
                  <li><a href="#">item</li>
                  <li><a href="#">item</li>
                </ul>
              </div>
            </li>
            <li><a href="#">item</a>
              <div class="col_2">
                <h2>item</h2>
                <ul id="sub-main-nav">
                  <li><a href="#">item</li>
                  <li><a href="#">item</li>
                  <li><a href="#">item</li>
                  <li><a href="#">item</li>
                  <li><a href="#">item</li>
                  <li><a href="#">item</li>
                  <li><a href="#">item</li>
                  <li><a href="#">item</li>
                </ul>
              </div>
            </li>
            ... (more items here)
          </ul>
        </div>
        <div class="col_2">
          <ul class="right-list">
          </ul>
        </div>
      </div>
    </li>
  </ul>
</div>

Does anyone have any suggestions on how I can achieve this layout?

htmlcss

Answer №1

While it seems to meet your requirements, one thing you may have overlooked is that the h2 tags are displaying white text inherited from a CSS rule:

#main-nav li{
    ...
    color:#fff;
    .... }

Here are some potential solutions:

  • Add a background color to the li elements
  • Modify the text color of the h2 - be cautious of specificity issues

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for retrieving the current value of an input using AJAX

Currently, I am in the process of developing an e-commerce website using Laravel. One issue I am facing is capturing the new value of an input when it changes. This input is located on the cart page where users have the option to adjust the quantity of a p ...

htmljqueryajaxlaravel

Attempting to create a single function that can be utilized with numerous divs that share the same class in jQuery

Currently, I am working on creating a basic jquery gallery viewer. In my code, I have the following structure: <div class="photoset"> <img /> <img /> </div> <div class="photoset"> <img /> <img /> <i ...

javascriptjqueryhtmlcss

Bringing the Jquery cursor into focus following the addition of an emoji

Looking to add emojis in a contenteditable div but facing an issue with the cursor placement. Here is a DEMO created on codepen.io. The demo includes a tree emoji example where clicking on the emoji adds it to the #text contenteditable div. However, after ...

javascriptjqueryhtmlcss

Challenges with form validation

Hello everyone, I'm a newbie to JS and struggling with my code. It seems like everything should work, but it just won't. The issue seems to be with the phone number form validation. I've written code that, in theory, should do the job, but ...

javascripthtml

Please rewrite the following sentence: "I am going to the store to buy some groceries."

As I navigate through my styled HTML page, an interesting sequence of events unfolds. When the Create New List button is clicked, a pink div emerges, contrasting with the orange hue of the All Lists div. At this moment, a new user has joined but hasn' ...

javascriptphphtmljquerycss

Checking for correct HTML tags using JavaScript

Looking to validate some input in javascript and confirm if it is a valid HTML tag. Any straightforward methods with JQuery for this task? If not, any suggestions on how to achieve this using Regex? Thank you! ...

javascriptjqueryhtmlregex

SyntaxError: Identifier was not expected

I am currently working on a function that involves a table of rows with edit buttons. Whenever the edit button is clicked, the following function is called and I encounter this error: Uncaught SyntaxError: Unexpected identifier The error seems to be poin ...

javascriptphphtml

Quadruple Equidistant Table Containers

I am struggling to achieve the desired outcome of having four evenly spaced <table> cells on my webpage. Despite setting specific widths for each cell, I am facing some challenges. Below is an example where one of the cells appears larger than the r ...

htmlcss

Tips for adding list items programmatically in JQuery without generating a new HTML element

I have a list of items that I want to dynamically load more of from my database using JQuery. My current code looks like this: $("#somediv").append($("<div>").load("ajax.php?action=getresults", function() { $('#busy').delay(1500).fadeO ...

jqueryhtmlajaxappend

Ways to execute several actions within an HTML form

If I wanted to implement a double action in an HTML form, how would I go about it? The first action should direct to examle1.php And the second action should go to example2.php Currently, my code looks like this: <form name="input" action="" method= ...

htmlformsaction

The content division does not have a set position

The content div is not adapting to different screen sizes properly. As the width and height of the browser shrink, it's overlapping with the header and footer. I'm using flex but I'm unsure if I'm implementing it correctly. display: ...

htmlcssresponsive

Update the content of a div element with the data retrieved through an Ajax response

I am attempting to update the inner HTML of a div after a certain interval. I am receiving the correct response using Ajax, but I am struggling to replace the inner HTML of the selected element with the Ajax response. What could be wrong with my code? HTM ...

javascriptjqueryhtmlajax

Is the background image slowly disappearing?

Instead of using the background property for a background image, I have opted for a different style. Here is how I implemented it: <div id="bg"> <img id="bgChange" src="image/image.jpg" /> </div> This is the corresponding CSS code: ...

javascriptjqueryhtmlcss

Personalized VueJS Counter

Just started learning VueJS and I've encountered a challenge while attempting to build a custom counter. Here is the code snippet: <template v-for="(ben, i) in plan.beneficios"> <div class="w-80 w-90-480 m-auto pa-hor-5-480" :class= ...

javascripthtmlvue.js

When an if statement is triggered by an overload of information, it initiates the start of a fresh

I am in need of creating an if statement that will trigger whenever images with IDs 0 to 3 (a total of 4 images) are loaded. This if statement should then generate a new row containing 0 to 3 images, and the same logic needs to be applied for words as well ...

javascripthtmljsonif-statementbootstrap-modal

Creating a webpage that seamlessly scrolls and dynamically loads elements

Currently, I am working on a dynamic website that loads new elements as you scroll down the page. Here is an example of the HTML code: <div>some elements here</div> <div id="page2"></div> And this is the JavaScript code: var dis ...

javascripthtmlcss

Discover the best practices for incorporating max-width into a bootstrap d-flex container with rounded corners

I have been working on a login page design using bootstrap, but I am facing an issue with the width of a div element that I want to use for placing a logo. The w-100 class doesn't seem to be making it full width as intended. To see the problem and my ...

htmlcsstwitter-bootstrapbootstrap-5

What causes the disparity in functionality between CSS's Left 75% and Right 25% properties?

Here is my CSS code snippet: .bloodparam > .highvalue { bottom: 12px; right: 25%; } and .bloodparam > .highvalue { bottom: 12px; left: 75%; } I expected the element to be in the same position with both lines of code, but I'm noticing differe ...

csscss-positionabsolute

Unleash the power of attribute selectors in a SASS/SCSS list variable: a comprehensive guide!

This is a sample code snippet: $list: ( input[type="text"], input[type="name"], input[type="email"], textarea, select[multiple] ) !default; @each $value in $list { ...

csssass

Click on the hyperlinks to add its source to the MySQL table

<a href=xyz.html name="text2">click me too </a> Whenever I click the link, xyz.html must be stored in a table within my database ...

phphtml