Mastering the art of finding the perfect position

I'm trying to keep the menu on top, but when I hover over one menu, the others should not overlap. How can I achieve this?

Thanks for any help!

Before:

https://i.sstatic.net/esBw6.png

After:

https://i.sstatic.net/slW1n.png

Expected:

https://i.sstatic.net/L0glQ.png

My Code:

var ul = document.querySelector('.nav');
      var lis = ul.children;
      console.log(lis);
      for (var i = 0; i < lis.length; i++) {
        lis[i].onmouseover = function() {
          this.children[1].style.display = 'block';
        }
        lis[i].onmouseout = function() {
          this.children[1].style.display = 'none';
        }
      }
* {
      margin: 0;
      padding: 0;
    }
      
    li {
      list-style: none;
    }
      
    a {
      text-decoration: none;
      color: black;
      text-align: center;
    }
      
    .nav {
      position: relative;
      width: 300px;
      margin: 0 auto;
    }
      
    .nav>li {
      display: inline-block;
      width: 80px;
      border: 1px solid blue;
    }
      
    .nav>li>a {
      display: inline-block;
      width: 100%;
      padding: 5px 0;
      border: 1px solid rgb(245, 108, 172);
    }
      
    .nav>li>a:hover {
      background-color: #eee;
      color: #ff8500;
    }
      
    .box {
      display: none;
      text-align: center;
      border: 1px solid red;
    }
      
    .box ul li {
      border: 1px solid rgb(173, 236, 25);
    }
      
    .box ul li a {
      display: inline-block;
      padding: 5px 34px;
      border: 1px solid red;
    }
      
    .box ul li a:hover {
      background-color: #f1b97c;
      color: white;
    }
<ul class=nav>
      <li>
        <a href="#">menu</a>
        <div class="box">
          <ul>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
          </ul>
        </div>
      </li>
      <li>
        <a href="#">menu</a>
        <div class="box">
          <ul>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
          </ul>
        </div>
      </li>
    </ul>
htmlcss

Answer №1

If you want to align items vertically, you should use the vertical-align property.

To fix the alignment of your .nav > li elements, simply add vertical-align:top; to them.

var ul = document.querySelector('.nav');
var lis = ul.children;
console.log(lis);
for (var i = 0; i < lis.length; i++) {
  lis[i].onmouseover = function() {
    this.children[1].style.display = 'block';
  }
  lis[i].onmouseout = function() {
    this.children[1].style.display = 'none';
  }
}
* {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
  color: black;
  text-align: center;
}

.nav {
  position: relative;
  width: 300px;
  margin: 0 auto;
  /* border: 3px solid green; */
}

.nav>li {
  display: inline-block;
  width: 80px;
  border: 1px solid blue;
  vertical-align:top;
}

.nav>li>a {
  display: inline-block;
  width: 100%;
  padding: 5px 0;
  border: 1px solid rgb(245, 108, 172);
}

.nav>li>a:hover {
  background-color: #eee;
  color: #ff8500;
}

.box {
  display: none;
  text-align: center;
  border: 1px solid red;
}

.box ul li {
  border: 1px solid rgb(173, 236, 25);
}

.box ul li a {
  display: inline-block;
  padding: 5px 34px;
  border: 1px solid red;
}

.box ul li a:hover {
  background-color: #f1b97c;
  color: white;
}
<ul class=nav>
  <li>
    <a href="#">menu</a>
    <div class="box">
      <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
      </ul>
    </div>
  </li>
  <li>
    <a href="#">menu</a>
    <div class="box">
      <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
      </ul>
    </div>
  </li>
</ul>

Answer №2

Try using flex with the CSS selector .nav{...}

IMPORTANT:

Deleted the console.log() in JavaScript as it seems to be causing an error.

var ul = document.querySelector('.nav');
var lis = ul.children;

for (var i = 0; i < lis.length; i++) {
  lis[i].onmouseover = function() {
    this.children[1].style.display = 'block';
  }
  lis[i].onmouseout = function() {
    this.children[1].style.display = 'none';
  }
}
* {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
  color: black;
  text-align: center;
}

.nav {
  display: flex;
  position: relative;
  width: 300px;
  margin: 0 auto;
}

.nav>li {
  display: inline-block;
  width: 80px;
  border: 1px solid blue;
}

.nav>li>a {
  display: inline-block;
  width: 100%;
  padding: 5px 0;
  border: 1px solid rgb(245, 108, 172);
}

.nav>li>a:hover {
  background-color: #eee;
  color: #ff8500;
}

.box {
  display: none;
  text-align: center;
  border: 1px solid red;
}

.box ul li {
  border: 1px solid rgb(173, 236, 25);
}

.box ul li a {
  display: inline-block;
  padding: 5px 34px;
  border: 1px solid red;
}

.box ul li a:hover {
  background-color: #f1b97c;
  color: white;
}
<ul class=nav>
  <li>
    <a href="#">menu</a>
    <div class="box">
      <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
      </ul>
    </div>
  </li>
  <li>
    <a href="#">menu</a>
    <div class="box">
      <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
      </ul>
    </div>
  </li>
</ul>

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

Issues arising from JavaScript/jQuery dysfunction

I've successfully implemented this code in jsfiddle, but I'm struggling to make it work on my local files like index.html, index.css, index.js. Can someone please guide me on how to achieve this locally and not just on jsfiddle? Here's the j ...

javascriptjqueryhtmlcss

Ensure that the page is edited before being shown in the iframe

Is it possible to remove a div from an HTML page within an iFrame? The code below fetches an HTML page and displays it in an iframe. Is there a way to remove the specified div from the fetched HTML page? <script type="text/javascript"> (function(){ ...

javascriptjqueryhtmliframe

After the initial submission, the Bootstrap placeholder for the Select Option is only displayed

I'm attempting to create a placeholder for my dropdown with multiple options using Angular and Bootstrap. However, it seems like I may be doing something incorrectly. I created an option for a placeholder such as please select and placed it at the top ...

htmlangulartwitter-bootstrap

A large responsive bootstrap website filling only half the screen

I am currently in the process of developing a simple version of a Content Management System (CMS). I have created a page that offers an HTML template, allowing users to insert their own text and image uploads to display on another screen. The template fun ...

htmlcssbootstrap-4

Conceal a specific element (such as a button) using the visibility property

Trying to hide a button without affecting the spacing between buttons. $(document).ready(function(){ $('#hide').click(function(){$('#btn').css('display','none');}); $('#show').click(function(){$(&a ...

jquerycssvisibility

Tips for ensuring the vertical scroll bar is always visible on a div element

I need help with maintaining a vertical scroll bar on a div regardless of its height. .myclass { overflow-y: scroll; } <div class="myclass"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the in ...

javascripthtmljquerycss

Tips on utilizing the getElementsByClassName method in JavaScript

Check out this HTML snippet: <html> <body> <div id="wrapper"> <div id="c_wrapper"> <div class="member"> <form name="f1"> </form> </div> ...

javascripthtmldomclientscript

Tips on aligning a span element at the center of an image without losing its mouseover

<div class="pic"> <img src="image.jpg" height="250"/> <span class="text" style="display:none">text here</span> </div> <scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </scrip ...

javascriptjqueryhtmlcss

Verify if a checkbox is selected upon loading the page

Hey there, I have a jQuery change function set up to turn an input text box grey and read-only when a user selects a checkbox. However, I'm interested in adding a check on page load to see if the checkbox is already selected. Any suggestions for enhan ...

javascriptjqueryhtml

Steps for creating a fade effect between two different elements when the mouse is interacting with one of them

I want to create a unique effect with an image in the background and a button above it. When the mouse hovers over the button, I want its opacity to decrease while the image's opacity increases simultaneously. I have experience applying fade effects ...

htmlcss

Increased space between the sidebar and the top bar

Currently, my code is a bit messy as I am still in the learning stages of bootstrap. I need some assistance on how to resolve the empty space that exists between the top and side bar elements. <!DOCTYPE html> <html lang="en"> <sty ...

htmlcsstwitter-bootstrap

Exploring the use of React material-ui Drawer list to render various components onClick in your application

Working on designing a Dashboard with the React material-ui package involves implementing an App bar and a Drawer containing a List of various items. The objective is to render the corresponding component inside the "main" tag of the Drawer upon clicking a ...

htmlreactjsreact-routermaterial-ui

Making the text gradually disappear at the bottom of a section using a see-through overlay, while ensuring the height remains within the boundaries of the section even

Trying to achieve a sleek fade-out effect at the end of a text section for a 'read more' indicator. I've been studying various tutorials, including this, and my current code is as follows: html <section> <p>Lorem ipsum dol ...

csshtmlfadefadeoutfadein

Hiding a button based on the visibility of another button in the user's viewport

Is there a way to dynamically hide button B when the user scrolls and button A becomes visible on the screen? Additionally, how can we show button B again once button A is no longer visible to the user? Both buttons should never be visible simultaneously. ...

javascripthtmljquerycss

React: The row flex-direction is not being applied as expected

Although I know there are countless identical questions out there, mine lacks context and is as generic as they come. Why isn't the flex-direction row property working? React View return ( <Fragment> <h1>The About us page.</ ...

cssreactjsflexbox

The element is spilling over the height of the page

I'm currently working on a webpage with a fixed width and height. Although I'm incorporating hover effects, I'm encountering an issue where the vertical overflow of the page is not set to 100% (100vh). What could be causing this problem an ...

htmlcsshoveroverflow

Error Encountered when Using JQuery AJAX: Unexpected Identifier Syntax Issue

I've been struggling with a strange error for quite some time now. I want to believe that this is one of those errors where the solution will magically appear, but only time will tell. Here's the piece of code causing the issue: var images = ...

javascriptphpjqueryhtmljson

What is the best way to retrieve the value of a textbox in AngularJS?

Trying my hand at creating a basic web page using angular. I've got 2 textboxes and 2 buttons - one to set a predefined value in a textbox, and the other to add some text. Here's the code snippet: <!DOCTYPE html> <html lang="en" ng-app ...

javascriptjqueryhtmlangularjs

Scroll upwards within a nested div

Is there a way to smoothly animate the content of the inner div upward without requiring any button clicks? Also, is there a method to trigger an event once the animation has completed? ...

javascriptjqueryhtmlcssanimation

I can't seem to get my SVG data URL located inside an HTML file within an SVG data URL to display in Chrome

Background I am encountering an issue where an SVG data URL used as a background image property inside an HTML element within a <foreignObject> nested within an SVG data URL is not rendering properly in Google Chrome. If this structure was outside o ...

htmlcssgoogle-chromesvghtml5-canvas