The drop-down menu malfunctions when the overflow: hidden property is added

Here is how my current dropdown menu looks like: https://i.sstatic.net/evv1I.png

The "Home" option is not positioned correctly at the top left as I would prefer. How can I adjust this? Thank you for any assistance.

* {
  margin: 0;
  padding: 0;
}

nav {
  width: 1600px;
}

ul {
  list-style: none;
  background-color: #333;
}

ul li {
  width: 200px;
  background: #333;
  float: left;
  height: 35px;
  line-height: 35px;
  text-align: center;
  margin-right: 2px;
  position: relative;
  float: none;
  display: inline-block;
}

ul li:hover {
  background: #0e6ea8;
}

ul li a {
  color: #fff;
  text-decoration: none;
  font-family: sans-serif;
  display: block;
  border: none;
}

ul li ul li {
  border-top: 1px solid #fff;
}

ul li ul {
  display: none;
}

ul li:hover ul {
  display: block;
}

ul li ul .first {
  position: absolute;
  left: 201px;
  top: 0;
  display: none;
}

ul li ul :hover .first {
  display: block;
}

ul li ul .second {
  position: absolute;
  left: 201px;
  top: 0;
  display: none;
}

ul li ul :hover .second {
  display: block;
}

ul li ul li ul .seconda {
  position: absolute;
  left: 201px;
  top: 0;
  display: none;
}

ul li ul li ul:hover .seconda {
  display: block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<nav>
  <div class="nav navbar-fixed-top">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Options<span> &#x25BE</span></a>
        <ul>
          <li><a href="#">Consumer 
Management&nbsp<span>&#x25B6</span></a>
            <ul class="first">
              <li><a href="#">www.e-homes.com.my</a></li>
            </ul>
          </li>
          <li><a href="#">Project Admin 
Tool&nbsp<span>&#x25B6</span></a>
            <ul class="second">
              <li><a href="#">Download</a></li>
              <ul class="seconda">
                <li><a href="#">Download MR</a></li>
                <li><a href="#">Download PO</a></li>
                <li><a href="#">Download Invoice</a>
                </li>
                <li><a href="#">Download lalalala</a>
                </li>
              </ul>
            </ul>
          </li>
        </ul>
  </div>
</nav>

I overlooked a minor detail and the positioning of "Home" in my navigation bar is not quite right. Any advice on how to correct this issue would be greatly appreciated. Thank you once again for your help.

htmlcssbootstrap-4

Answer №1

You're missing a ul and li before the second-to-last closing element.

Remember to add 'd-flex' on the ul after the 'navbar-fixed-top' element: 

<div class="nav navbar-fixed-top">  <ul class="d-flex">

* {
  margin: 0;
  padding: 0;
}

nav {
  width: 1600px;
}

ul {
  list-style: none;
  background-color: #333;
}
... (CSS code continues) ...

</nav>

Answer №2

It seems like there are some issues with your HTML structure (missing closing tags) and CSS errors in the ul li section. I have corrected it below for you to reference.

* {
  margin: 0;
  padding: 0;
}

nav {
  width: 1600px;
}

ul {
  list-style: none;
  background-color: #333;
}

ul li {
  width: 200px;
  background: #333;
  float: left;
  height: 35px;
  line-height: 35px;
  text-align: center;
  margin-right: 2px;
  position: relative;
  /* float: none; REMOVED */
  display: inline-block;
}

ul li:hover {
  background: #0e6ea8;
}

ul li a {
  color: #fff;
  text-decoration: none;
  font-family: sans-serif;
  display: block;
  border: none;
}

ul li ul li {
  border-top: 1px solid #fff;
}

ul li ul {
  display: none;
}

ul li:hover ul {
  display: block;
}

ul li ul .first {
  position: absolute;
  left: 201px;
  top: 0;
  display: none;
}

ul li ul :hover .first {
  display: block;
}

ul li ul .second {
  position: absolute;
  left: 201px;
  top: 0;
  display: none;
}

ul li ul :hover .second {
  display: block;
}

ul li ul li ul .seconda {
  position: absolute;
  left: 201px;
  top: 0;
  display: none;
}

ul li ul li ul:hover .seconda {
  display: block;
}
<nav>
  <div class="nav navbar-fixed-top">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Options<span> &#x25BE</span></a>
        <ul>
          <li><a href="#">Consumer 
Management&nbsp<span>&#x25B6</span></a>
            <ul class="first">
              <li><a href="#">www.e-homes.com.my</a></li>
            </ul>
          </li>
          <li><a href="#">Project Admin 
Tool&nbsp<span>&#x25B6</span></a>
            <ul class="second">
              <li><a href="#">Download</a>
                <ul class="seconda">
                  <li><a href="#">Download MR</a></li>
                  <li><a href="#">Download PO</a></li>
                  <li><a href="#">Download Invoice</a>
                  </li>
                  <li><a href="#">Download lalalala</a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

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

Issue with displaying data in Laravel 8 jQuery Modal

Having trouble retrieving the location_name on a delete confirmation modal as it is not displaying any results. Delete Button: <li> <a href="" class="remove" data-id="{{ $location->id }}" data-location_name=&q ...

jquerylaravelbootstrap-4bootstrap-modal

Dynamically adjust the height of a parent div to match its child div's height upon clicking using JavaScript

Within my div element (divChatContainer), there is a top div (divChatContainerTop) containing a "span" element. When this "span" element is clicked, I want the container div to resize to the height of the "divChatContainerTop" (essentially minimizing the c ...

javascripthtmlcss

Encountering an unexplained JSON error while working with JavaScript

I'm trying to retrieve data from a JSON API server using JavaScript AJAX and display it in an HTML table. However, I keep encountering an undefined error with the data displaying like this: Name id undefined undefined This is my code snippe ...

javascripthtmljsonajax

The update query is failing to make changes, but it is not presenting any errors upon execution

I'm currently developing a PHP user administration system for my workplace. I have successfully implemented the functionality to create new users and update details such as first name, last name, email, and password for the logged-in user. Additionall ...

phphtmlmysqlcssutf-8

Tips for aligning text to the left within a Bootstrap accordion

I am in the process of developing a static website utilizing the W3schools "Company" theme. The complete code for this website, including CSS, is provided below: <!DOCTYPE html> <html lang="en"> <head> <!-- Theme Made By www.w3schoo ...

htmlcss

Ways to ensure child element takes up the entire screen

Here is the layout I am working with: <ul class="all-content white-bg"> <row> <div class="col-md-3"> <!-- Content --> <div class="content white-bg fullscreen clearfix"> < ...

jquerycsshtmltwitter-bootstrap

Tips for incorporating transitions into CSS styling

After successfully adding a picture over an element when hovering over it, I decided to include a transition: 0.2s; property but unfortunately the transition effect is not working as expected. Why is this happening? My intention is for the picture to smoot ...

csscss-transitionstransition

Scaling images proportionally using CSS (without the need for JavaScript, ideally!)

Is there a way to proportionally scale images using CSS? I'm looking for a solution where the image adjusts to the full container size, becoming larger or smaller based on the container dimensions. Additionally, I want the image to be displayed in th ...

htmlimagecss

IE - Adjusting the Width of the Vertical Spry Menu Bar

As I delve into the world of web design using Dreamweaver, I find myself faced with some challenges as a beginner. One specific issue I'm encountering is related to a vertical Spry Menu Bar on my website that functions well in most browsers except for ...

cssinternet-explorerdreamweaverspry

The meta refresh feature gets stuck in an endless cycle

I recently implemented a code snippet to delete entries from my SQL table. Here is the code I used: echo "<td><a href='protected_page.php?action=delete&id=$id'>Borrar</a></td>"; } if(($_GET['action'] == &ap ...

phphtmlmysql

What is the best approach for managing CSS in a React application when dynamically loading custom styles at runtime?

In the process of developing a ReactJS webshop app with Webpack, I need to pull some shop configuration data from the backend in JSON format. This configuration includes a customCss property that is intended to override the CSS of my webshop app. Current ...

cssreactjsdynamic

I'm having trouble with my carousel. I suspect it's the "link-rel" in the head tag that's causing the issue

Having trouble with my carousel - it's not navigating properly. When I check the console, it shows: Failed to find a valid digest in the 'integrity' attribute for resource '' with computed SHA-256 integrity 'YLGeXaa ...

javascriptcssbootstrap-4carousel

The attempt to enhance the appearance of the string table has been unsuccessful

In a jQuery call, I am working with a string of HTML as shown below: var template = '<html >' + '<head>' + '<h1>Most important heading here</h1>'+ '</head>' + '<body>' ...

jqueryhtmlcss

Troubulating with overflow-y: scroll functionality? Follow these steps to troubleshoot

I've been working on a project involving the .menu-scroll class, which is a div within a <ul> list. I want this div to display a scroll bar when it exceeds its height limit. However, instead of achieving this, it keeps pushing down the .menu-foo ...

htmlcss

Tips for concealing non-selected categories in the product tree when a single category is chosen

When navigating through the shopping cart, users will encounter a product category tree structured as follows: Category1 Subcategory11 Subcategory12 ... Category2 Subcategory21 Subcategory22 ... Category3 Subcategory31 Subcategory32 ... ...

jquerycssasp.net-mvcjquery-uijquery-plugins

The embedded video on Youtube is not extending to fill the entire screen

Currently, I am in the process of creating a website for a friend's upcoming wedding using Bootstrap 5. However, I have encountered an issue where the embedded video is not expanding to fill the entire screen size. For reference, you can view the live ...

htmltwitter-bootstrapyoutubebootstrap-5

What causes discrepancies between jQuery set attributes and .html() output?

In an attempt to set attributes on HTML snippets, I am aiming to repopulate a form with previously entered values. Despite using .attr() to set the attributes, they do not appear after using .html(). For reference, I have provided a simple example here: h ...

javascriptjqueryhtml

Managing a multilingual website without relying on a database or backend code: Is it possible?

I am in need of translating my small website, which consists of 8-10 pages, into Spanish. Unfortunately, I do not have the resources to work with a backend developer to implement any database or variables. Therefore, I am attempting to tackle this task usi ...

jqueryhtmlcss

Use jQuery to open and close HTML tags efficiently

It seems like the task I have at hand may not be as simple as I had hoped, so here I am seeking some reassurance. I am aiming to switch out an image with a closing div, then the image itself, followed by another opening div. Let me illustrate this with a ...

javascriptjqueryhtml

Ways to widen a selected drop-down menu outside the dialog box containing it

I'm working with a Html.DropDownList that has been styled using Chosen within a jQuery UI dialog. As the list of items is quite long, when it's opened, it gets cut off by the border of the dialog window. Is there a way to extend the dropdown por ...

jqueryhtmljquery-uijquery-ui-dialogjquery-chosen