What could be the issue with my dropdown navigation bar?

Currently in the process of learning CSS and HTML, I wanted to create a basic dropdown menu using CSS exclusively. However, there are some aspects that are unclear to me, so I would appreciate any assistance in figuring out what is happening.

Here is how it appears:

Why is Menu 1 being pushed to the top of the navigation bar? How can this be prevented? Why is Submenu 1 positioned to the right of Menu 1? What steps should be taken to correct this issue? Additionally, the height of my submenu is overflowing beyond the first UL element. Is this expected behavior?

I am hopeful that someone can offer insight into what is occurring, as it would greatly benefit my learning journey. While online tutorials are available, I believe that starting from scratch provides a more valuable learning experience. Any help at this point would be much appreciated.

Thank you!

htmlcssdrop-down-menu

Answer №1

Here are some key points for you to consider (I recommend exploring resources like w3chool or here, or any other page that can help you fully grasp and solve your problem)

  1. The reason Menu 1 is pushed away is because the second ul has been set with visibility:hidden - it is hidden but still occupies the same space (width and height). Changing this to display:none and removing height:100px in the first ul will make it one line and smooth. Avoid setting height on ul, especially when there are one or more nested ul elements, as it can disrupt your menu layout.
  2. Your Submenu 1 appears to the right of Menu 1 due to certain reasons that are unclear. To position your submenu correctly, I suggest using position:absolute along with margins to place it beside the main menu if it's a vertical menu, or below it if it's horizontal.

Below is the modified CSS after making some adjustments:

body {margin: 0; padding: 0;}
nav {background-color: pink; margin: 0; padding: 0; height: 100px;}
ul {list-style: none; width: 50%; background: yellow; margin: 0 auto}
li {display: inline-block; background-color: green; width: 100px; height: 50px}
a {text-decoration: none;}
ul > li > ul {display: none; position: absolute; margin: 35px 0 0 -40px;}
ul > li:hover > ul {display: block;}
ul > li > ul li {display: block;}

Feel free to check out the new DEMO for reference.
Wishing you success in mastering HTML and CSS!

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

Which is better for parsing HTML - CSS or XPath selectors?

For my project, I aim to utilize lxml for parsing HTML content, as it offers support for both XPath and CSS selectors. I am currently deciding whether to bind my model properties to either CSS or XPath. I am contemplating which option would be most benefi ...

htmlcssparsingxpathcss-selectors

Steps to Delete Branding WHMCS Ver 8.1 "Powered by WHMcomplete solutions"

As a newcomer to this community, I am reaching out for the first time seeking assistance. A friend of mine recently updated his WHMCS to the latest version and encountered a branding line above the footer area. Previously, he could remove it by editing th ...

phpjquerycsstemplateswhmcs

Material UI's Paper component is not expanding to full width when viewed on a smaller screen size

I'm currently working on a website project and utilizing a component for displaying dark mode. However, I've encountered an issue where the Component shrinks excessively when the screen size goes below 600px, unlike other components. This is a s ...

cssreactjsmaterial-uistyleddocument

Just starting out with Boostrap; looking for ways to tidy up this code and achieve the intended effect

UPDATE: Check out the revised JS Fiddle link at the end of this post; I managed to achieve the desired result, but I believe there's room for improvement in the code! After experimenting with HTML/CSS for some time, I'm now working on my first l ...

htmlcsstwitter-bootstrap

Darken the backdrop of the bootstrap modal

When the modal is opened, the background turns black instead of having an opacity of 0.5 or something similar. How can I resolve this issue? I am using Bootstrap 3.2. Below is some CSS code snippet: .fade.in { opacity: 1; } .modal-open .modal { overflow ...

htmlcsstwitter-bootstrap-3

Variety of formatting options for menu items when the menu is in its collapsed state

I am working with a Bootstrap nav-bar that collapses into a button by default. Within my nav-bar, I have opted for images instead of text links. However, when the nav-bar is collapsed, I would like these images to be smaller in size. Is there a way to cu ...

csstwitter-bootstrap

Tips for creating square corner images within a bootstrap card group

How can I create a square image gallery using Bootstrap 4 cards? <div class="card-group flex-wrap"> <div class="card border-dark"> <img class="card-img-top" src="h ...

htmlcssbootstrap-4

TypeError: 'array' type does not contain the method 'fetch_attribute'

I've encountered an issue with a piece of code that I'm working on and I'm trying to retrieve a link from an element identified as "statistic_info_link". However, when I attempt to do so, I receive the following error message: AttributeErr ...

pythonhtmlseleniumweb-scraping

The button component in my React application is not functioning as expected, despite utilizing the useState and useEffect hooks

I'm having trouble with my Button not working, even though I am using useState and useEffect Check out the code below: import React, { useState, useEffect } from "react"; // import Timeout from "await-timeout"; import ...

javascripthtmlreactjs

Tips for adjusting VBA script in Excel to work with an Access database table

I received this code from a skilled user who prefers to remain anonymous. The code is designed to search the HTML content for innerText of specific tags and transfer them to an Excel table, well organized under headers, structured as a pivot. Public Sub Ge ...

htmlsqlexcelvbams-access

Issue with Flowplayer not displaying the audio player

Currently, I am facing an issue with displaying both video and audio on an HTML page. The video seems to be working fine, but unfortunately, the audio is not appearing as expected. Any assistance in resolving this matter would be greatly appreciated. &l ...

htmlflowplayer

What is the best approach for determining which CSS file to import in next.js?

I'm currently facing the task of selecting which CSS file to apply in my next.js project. I have two separate CSS files, one for desktop and one for mobile devices. My current method of importing CSS files is as follows: // _app.tsx import ".. ...

htmlcsstypescriptnext.js

Revolving mechanism within React.js

I am currently developing a lottery application using React.js that features a spinning wheel in SVG format. Users can spin the wheel and it smoothly stops at a random position generated by my application. https://i.stack.imgur.com/I7oFb.png To use the w ...

javascriptcssreactjs

Streamlining form submission processes with VBA automation of check box selections

Currently, I am facing a challenge with automating the process of filling out a web form using VBA. Specifically, I have hit a roadblock when it comes to selecting a checkbox in the form before proceeding. Here is the HTML code pertaining to the checkbox: ...

htmlvbaautomation

Attaching the CSS file to the Haml layout template

I'm currently working on linking a css file to a haml layout template Within the ApplicationHelper class, I have a method to properly generate html module ApplicationHelper def styletag(sheet_name) "<link rel='stylesheet' href=&a ...

htmlcssruby-on-railshaml

Can the floated DIVs be prevented from breaking onto a new line if they exceed the container's width?

Take a look at this sample HTML code: <div id="container" style=""> <div id="left" style="float: left; width: 200px;">...</div> <div id="right" style="float: right; width: 100px;">...</div> </div> How can we prevent ...

htmlcss

What could be causing the error.status value to not be displayed on my Embedded Javascript (EJS) page?

Currently utilizing ejs, node.js & express along with other packages I'm facing an issue where the error.status and error.stack values are not appearing on the rendered page. I suspect that the error variable may be undefined or inaccessible within t ...

javascripthtmlnode.jsexpressejs

Ways to Utilize CSS for Substituting Text

Is there a way to change Type： to Class： using CSS? <span class="skills">Type：<a href="....../type/aaa/">aaa</a>, <a href="...../type/bbb/">bbb</a></span> ...

htmlcss

Trimming whitespace from strings within HTML tag attributes can be achieved using various methods

I have been reviewing the .cshtml pages of a website with the aim of adding ID attributes to various divisions and elements for testing purposes. These pages utilize AngularJS, and many of the elements I need to add ID attributes to are part of a list tha ...

javascripthtmlangularjsstringwhitespace

Using AJAX and PHP to submit a form and receive a success response text without the need to reload the page

Greetings, fellow coders! I'm excited to be posting my first question here. As a beginner in the coding world, I've already made some progress thanks to the helpful answers I've found on this platform! Today, I am encountering an issue with ...

phphtmljqueryajaxforms