Disappearance of the second level in a CSS dropdown menu

I am currently working on creating a dropdown menu using only CSS.
Check out this example I'm using:
http://jsfiddle.net/DEK8q/8/
My next step is to center the menu, so I added position-relative like this:

#nav-container {
    position: relative;
    float: left;
    left: 50%;
}

#nav {
    ***position: relative;***
    float: left;
    left: -50%;
    font: bold 12px SimHei, Arial, Helvetica, Sans-serif;
    border: 1px solid #121314;
    overflow: hidden;
}

However, I've encountered an issue where positioning the nav relatively causes the second level of the menu not to display!
This problem arises from a display boundary for relatively positioned divs.
I aim to resolve this and center align the menu using just CSS. Any suggestions on how to overcome this challenge?

htmlcssdrop-down-menu

Answer №1

It seems like there's a lot of unnecessary positioning going on here. The default value for position is actually "static", so there's no need to define it in your CSS. Instead, try using relative or absolute positioning. You can see an example of this in action in this example. Also, consider reducing the amount of positioning you're using for another element that appears when hovering over the second menu item.

Take a look at the example and use the code below:

#nav-container {
  float: left;
  width:100%; 
}
#nav {
float: left;
margin-left:25%;
font: bold 12px SimHei, Arial, Helvetica, Sans-serif;
border: 1px solid #121314;
overflow: hidden;
}

Answer №2

I have just discovered the solution by utilizing position static and margin-left instead of left.

#nav {
    position: static;
    float: left;
    margin-left: -50%;
    font: bold 12px SimHei, Arial, Helvetica, Sans-serif;
    border: 1px solid #121314;
    overflow: hidden;
}

http://jsfiddle.net/LrmUS/1/

Answer №3

Give this a shot too

#navbar {
    border: 1px solid #121314;
    font: bold 12px SimHei,Arial,Helvetica,Sans-serif;
    margin: 0 auto;
    overflow: hidden;
    width: 500px;
}

Check out this JSFiddle for more details

Answer №4

You may want to consider a different approach

#nav-container {
    position: relative;
    float: left;
    width:100%;
}

#nav {
    position: absolute;
    left:50%;
    margin-left:-160px; /* Adjust this value to half of your menu's width */
    font: bold 12px SimHei, Arial, Helvetica, Sans-serif;
    border: 1px solid #121314;
    overflow: hidden;
}

Check it out here: http://jsfiddle.net/DEK8q/8/

Answer №5

If you're looking for a solution, I have one for you right here: http://jsfiddle.net/DEK8q/36/

Here are some of the key CSS styles used in this solution:

#nav-container {
    position: relative;
    left: 50%;
}

#nav {
    position:absolute;
    left: -50%;
    font: bold 12px SimHei, Arial, Helvetica, Sans-serif;
    border: 1px solid #121314;
}

#nav ul{
    list-style:none;
}

#nav > ul{
    margin:0px;
    padding:0px;
}

#nav li{
    float:left;
    position:relative;
}

#nav li ul{
    display:none;
    position:absolute;
    left:0px;
    top:30px;
    padding:0px;
    margin:0px;
}

#nav li li ul{
    left:100%;
    top:0px;
}


#nav li:hover > ul{
    display:block;
}

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

Having trouble with the functionality of my JavaScript slider

After attempting to incorporate a slider into my website, I encountered an issue where the slider was not functioning as expected. The slider I tried to implement can be found here: https://codepen.io/amitasaurus/pen/OMbmPO The index of the site can be a ...

jqueryhtmlcss

Using PHP to substitute a particular HTML tag with new content

Here is an example of HTML code: <div> <h1>Header</h1> <code><p>First code</p></code> <p>Next example</p> <code><b>Second example</b></code> </div> I am tryin ...

phphtmldomdocument

Ways to locate CSS file path within a web browser

Currently, I am focusing on the theme development aspect of Magento2. After compiling the .less file, I noticed that two css files are generated: styles-l.css styles-m.css Despite trying to inspect the element and view the applied CSS in the browser, i ...

cssmagento2

I'm always puzzled by why my attempts to spell a word in a foreign language with accent symbols somehow result in a strange appearance when it comes to bootstrapping

Hey guys, I'm trying to spell a word in Portuguese and instead of PROGRAMAÇÃO, it's showing up as PROGRAMAÇÃO. It seems like the accent symbols are not being displayed correctly. Any thoughts on how to fix this issue? This is happening ...

htmlcsstwitter-bootstrap

Looking to alter the appearance of a div within an iframe by matching it with the title of the parent window using javascript?

I am currently working on a parent page titled Criatweb, which contains an iframe page. My goal is to modify the display of a specific div within the iframe page only when its title matches Criatweb. I attempted to implement the following script within t ...

javascripthtmliframe

Verify if there is a cookie available; then execute the load() function. If the cookie matches, it is necessary to

$(document).ready(function() { var hrefs = { "en": ["includes/test1.html", "includes/test2.html"], "es": ["includes/test3.html", "includes/test4.html"] } $(function() { var cookie = Cookies.get('langCookie'); if (cookie) { ...

javascriptjqueryhtmlajaxcookies

What is the best way to resize an image within an SVG shape to completely fill the boundaries?

There is an SVG shape in the form of a parallelogram that has been filled with an image. To view the demo, click here. The code for the SVG object is as follows: <svg style="overflow:visible; margin-left:111px; margin-top:22px; " height="86" width=" ...

htmlcsssvg

Is there a way to automatically redirect a webpage based on the URL that is entered

Looking for a solution where a page checks a typed link upon loading, such as: www.test.com/myphp.php=10 If it detects a specific number, it should redirect to another link. For example: Upon finding www.test.com/myphp.php=10, it redirects to www. ...

javascriptphpjqueryhtmlajax

Information about the HTML detail element in Angular 2 is provided

Hi, I'm curious if there's a way to know if the details section is open or closed. When using <details (click)="changeWrap($event)">, I can't find any information in $event about the status of the details being open. I am currently wor ...

htmlangulartypescriptevents

Angular JS integration for optimal Bootstrap grid alignment

Recently, I have been exploring the Bootstrap framework and experimenting with grid alignment. When working with 4 columns, W3 schools recommends using the following row setup: <div class="row"> <div class="col-lg-3"> </div> ...

javascripthtmlcssangularjstwitter-bootstrap

How can two unique links toggle the visibility of divs with two specific IDs?

I am developing an interactive questionnaire that functions like a 'create your own adventure' story. The questions are shown or hidden depending on the user's responses. Below is the HTML code: <!-- TIER 3 ============================== ...

javascriptjqueryhtmlcss

Alter the URL path with the help of jQuery

I developed a website with content in two different languages, each stored in separate folders named en and bn. My goal is to toggle between these folders when clicking on an href element using jQuery. <a class="eng_link " style="" href="#"> English ...

jqueryhtml

Inaccurate rendering of border widths on IOS platform

After setting the border width of these input boxes to 1px, it appears that on iOS devices, the top border seems larger than intended (regardless of the browser being used). Interestingly, on any other type of device, the border looks perfectly fine. & ...

htmlioscss

Challenges with HTML and Session Handling

It's not functioning properly! <?php session_start(); ?> <p class="username"><?php echo $_SESSION['name']; ?></p> ...

phphtml

How to align multiple span elements vertically using HTML and CSS

<div class="row history"> <div class="col col-50 histroy1"> <span class="my-orders">Statistics</span> <span class="my-orders-numbers">27</span> </div> <div class="col col-50 histroy ...

htmlcss

Saving the subtracted value from a span into a cookie until the checkbox is unchecked - here's how to

I am working on a piece of code that includes numeric values within a span. When the checkbox is clicked, it subtracts 1 from the main value, essentially reducing the total value. How can I achieve this so that even after the form is submitted, the deducte ...

javascriptphpjqueryhtml

How can the background color of a DIV be altered based on the values of an array's minimum

Basically, I am fetching values from an array using AJAX. The background color will change from green to red based on the "aht_value". Currently, the colors are displaying correctly because I hardcoded the values in the calculation below. However, I want t ...

javascriptphpjquerycssajax

Customize your AutoComplete with MUI styling

Upon taking over a project, I found myself working with material ui for the first time. Here is an excerpt from my code: <FormControl fullWidth> <InputLabel className={className} htmlFor={id} error={error} > ...

cssmaterial-uigoogle-apiautocomplete

I am unable to determine the origin or background of my sidebar

I am having an issue with styling a sidebar using HTML and CSS. The problem I am facing is with setting the background-color property. Despite my efforts to customize the style, the background remains transparent and shows the color of the page beneath it. ...

cssbootstrap-4backgroundsidebar

The margins are not being maintained by the columns

Currently, I am using Bootstrap 3.3.7 and facing an issue with the alignment of smaller columns in relation to bigger columns. To see a demo, click here. I have set a margin of 10px between the columns. For example, the first row consists of the followin ...

htmlcsstwitter-bootstrap