Some of the items in the dropdown menu are not fully displayed

I'm currently working on a drop-down menu, but I'm facing an issue where adding position: absolute; and display: block; is causing the second ul element to not be fully visible. My goal is to have both ul elements visible so that I can proceed to incorporate a hover effect and adjust the display to complete the drop-down menu.

I've attempted to use z-index and overflow, however, neither solution has proven successful.

/* CSS code snippet */
/* Import Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap");
* {
  /* Reset default margin,padding and box-sizing */
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-decoration: none;
  font-family: 'Roboto Slab', serif;
}

html {
  font-size: 10px;
}

/* Custom styling for body */
body {
  background-color: #1C1B1A;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: #fff;
}

h1,
h2,
h3 {
  color: #fff;
}
/* Custom styling for header navigation */
header nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  position: relative;
  width: 100%;
  font-size: 2rem;
}

header nav h1 {
  font-size: 3.5rem;
  font-weight: 350;
  text-transform: uppercase;
  padding-left: 5rem;
}
/* Custom styling for navigation links */
header nav .links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: #6B653C;
  height: 100%;
  padding: 1rem;
  padding-left: 5rem;
  padding-right: 5rem;
  -webkit-clip-path: polygon(2.75rem 0, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(2.75rem 0, 100% 0, 100% 100%, 0 100%);
}

header nav .links ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

header nav .links ul li {
  margin: 1rem;
  text-transform: uppercase;
  position: relative;
}

header nav .links ul li ul {
  display: block;
  position: absolute;
  top: 2.2rem;
  background: #6B653C;
}

header nav .links ul li ul li {
  margin-left: 0;
  color: #ffffff;
}
<body>
  <header>
    <nav>
      <h1>logo</h1>
      <div class="links">
        <ul>
          <li><a href="#">link</a></li>
          <li><a href="#">link</a></li>
          <li><a href="#">link</a></li>
          <li><a href="#">link</a></li>
          <li><a href="#">link</a>
            <ul>
              <li><a href="#">link</a></li>
              <li><a href="#">link</a></li>
              <li><a href="#">link</a></li>
            </ul>
          </li>
          <li><a href="#"><i class="fas fa-user"></i></a></li>
        </ul>
      </div>
    </nav>
  </header>
</body>

Feel free to check out the code on Codepen: https://codepen.io/ji-nov-ek/pen/KKWMawG

htmlcsslistdrop-down-menunav

Answer №1

Here is a more simplified version of the code as the original seems quite messy ;)
Your code is overly complex. For instance, you are using the incorrect font-weight: 350 for the fonts, while there are only hundreds in the googleapis.com declaration.
Do you really need so many font versions [100,200, ..., 900]? It significantly slows down the page. You could simply use html strong or b elements instead.

:root {
  --olive: #6b653c;
}

@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap");
*,
:after,
:before {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  background-color: #1c1b1a;
  text-decoration: none;
  margin: 0;
  font-size: 1rem;
  font-family: "Roboto Slab", serif;
}

ul {
  list-style: none;
  padding: 0;
}

a {
  text-decoration: none;
  color: #fff;
}

h1,
h2,
h3 {
  color: #fff;
}

header {
  height: 78px;
}

nav {
  display: flex;
  align-items: center;
}

h1 {
  font-size: 2.5rem;
  font-weight: 500;
  text-transform: uppercase;
  padding-left: 40px;
  margin: 0;
}

.links {
  position: relative;
  margin-left: auto;
  background: var(--olive);
  padding-right: 20px;
}

.links:before {
  content: "";
  position: absolute;
  left: -30px;
  border-right: 0px solid transparent;
  border-left: 30px solid transparent;
  border-bottom: 50px solid var(--olive);
}

.links ul li {
  display: inline-block;
  position: relative;
  font-size: 1rem;
  text-transform: uppercase;
}

.links ul li {
  margin-left: 20px;
}

.sub-menu ul {
  display: none;
  position: absolute;
  left: -20px;
  background: var(--olive);
  padding: 10px 20px;
}

.sub-menu ul li {
  margin: 0;
}

.sub-menu:hover ul {
  display: block;
}
<header>
  <nav>
    <h1>logo</h1>
    <div class="links">
      <ul>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li class="sub-menu"><a href="#">link</a>
          <ul>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
          </ul>
        </li>
        <li><a href="#"><i class="fas fa-user"></i>last</a></li>
      </ul>
    </div>
  </nav>
</header>

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

Padding needed for floated <li> items in horizontal menu

I'm attempting to design a horizontal top header featuring a main navigation stacked above a sub-navigation. Both navigations are constructed using <ul> elements with floated <li> items. The sub-navigation mysteriously has excess horizonta ...

css

What is the best way to calculate precise pixel dimensions for mobile devices?

Upon inspecting the browser's developer tool, it indicates that the resolution of an iPhone X is 375*812, although this may not be the actual resolution. While CSS pixels do not always align perfectly with display resolution, the question remains - If ...

htmlcssresponsive-design

Instructions for adjusting the size of my modal window when the keyboard appears?

While developing a next.js app, I encountered an issue with the chat modal. When the input field is in focus, I want to resize the modal height so that the keyboard popup does not hide the input field. I attempted to modify the DOM but could not get it to ...

javascriptcssreactjsnext.js

Bootstrap 4 Multinav Navigation with Adjusted Z-index

Using Bootstrap 4, I have created a modified multi-flyout navigation menu. The HTML code for this structure is as follows: <ul class="nav"> <li class="nav-item dropdown IFSUB"><a href="#" class="nav-link">Destinations</a> < ...

htmlsassbootstrap-4z-index

Is there a way to automatically extract data from a CSV file and display it on a website using either PHP or JavaScript?

I have a web service link at www.xyz.com/abcdefg. When I visit this link, it automatically downloads a CSV file. The CSV file contains columns of data organized like this: Column A Column B Column C Column D test1 1 5 ...

javascriptphpjqueryhtmlangularjs

Arranging containers in a fixed position relative to their original placement

A unique challenge presents itself in the following code. I am attempting to keep panel-right in a fixed position similar to position: relative; however, changing from position: relative to position: fixed causes it to move to the right side while the left ...

javascripthtmlcssreactjsflexbox

Is it possible to utilize a hyphen in the link_to attribute?

I'm encountering a dilemma in my Rails app where I need to assign a value to a custom data-* attribute for an anchor tag. The issue is that hashes can't contain hyphens, leading to difficulties with this code: <%= link_to 'Example', ...

ruby-on-railshashhtmlanchor

What is the best way to apply an active class to the parent li element when selecting an item within it? I want to achieve this effect

$(function() { var pgurl = window.location.href.substr(window.location.href .lastIndexOf("/") + 1); $("#nav ul li a").each(function() { if ($(this).attr("href") == pgurl || $(this).attr("href") == '') $(thi ...

javascriptjqueryhtmlcss

The challenges of utilizing breakpoints effectively within Tailwind CSS

So here's the issue. I've gone through various other queries related to this problem but haven't found a solution yet. Tailwind seems to be functioning well except for breakpoints. This is what I have in the head <meta name="viewpo ...

htmlcsstailwind-cssbreakpoints

Using conditional statements like 'if' and 'else' in JavaScript can

Can someone help me with solving my problem using if-else statements in Javascript? I need to filter names by gender and save them as keys - woman / man in local storage. Any assistance would be greatly appreciated. I am struggling to figure out how to im ...

javascripthtmljsonif-statementlocal-storage

Tips on widening a paper to its fullest width while also keeping it versatile and adaptable

How can we ensure that in a React application using Material-UI, the width of a paper always expands to a maximum of 600px, regardless of the width of its contents? We also want to keep the paper flexible, so that when the parent container's width shr ...

cssreactjsflexboxmaterial-designmaterial-ui

Attempting to change the appearance of my jQuery arrow image when toggling the visibility of content

Here is a sample of my JQuery code: $(document).ready(function() { $(".neverseen img").click(function() { $(".neverseen p").slideToggle("slow"); return false; }); }); Below is the corresponding HTML: <div class="neverseen"> <h1> ...

jqueryhtmlcsstoggle

What is the process for obtaining WOFF files from Google Fonts?

It appears that Google Fonts primarily provides fonts in WOFF2 format. Although this may be compatible with Chrome, WOFF2 is not widely supported by other browsers Is there a method to link directly to Google fonts stored on their CDN using a different f ...

cssfontscross-browsergoogle-font-api

Easy jQuery image that smoothly fades in and out

Can anyone recommend a script that allows for creating a slideshow where images fade in and out, rather than sliding left and right? I have a list of images below that I would like to use for the slideshow. <ul class="slideshow"> <li><im ...

jquerycssimagefadeoutfadein

Is there a way to efficiently retrieve and handle multiple $_POST records in PHP simultaneously?

I am currently working on developing a management interface that allows administrators to make bulk edits to members of a website all at once. While we already have the capability for single edits, there is a need for an option to modify all users simultan ...

phphtmlarrayspost

Is it advisable to use only one base SCSS @use import throughout the entire React application?

Hey there, I've got a question that's been on my mind. I really enjoy using SCSS in React, but for the longest time, I steered clear of variables and mixins because dealing with imports after making changes was a complete nightmare for me (I had ...

cssreactjssass

Manage the application of CSS media queries using JavaScript

Is there a method to control which CSS media query a browser follows using JavaScript? As an example, let's say we have the following CSS: p { color: red; } @media (max-width: 320px) { p { color: blue; } } @media (max-width: 480px) { p { col ...

javascriptcssmedia-queries

Guide on utilizing the carousel component in Bootstrap and populating it with data generated from Node.js

My goal is to design a carousel that displays 5 different pieces of information pulled from a separate app.js file. I attempted to implement a forEach loop, but encountered issues when trying to create a second Bootstrap carousel container. Here's th ...

javascripthtmlcssnode.jsbootstrap-5

Tips for displaying CSS background color on top of an inline style background image

I am facing a dilemma while using Laravel - if I put a background image into my CSS style sheet, I lose my variable. Currently, this is how I have it set up: <div class="gradient"><div class="topback" style="background-image: url('/storage/c ...

htmlcss

React Sticky sidebar implementation throughout the various components

My goal is to implement a sticky sidebar that moves smoothly across specific components on my webpage. The challenge I am facing is that the CSS 'sticky' property only allows movement within the component it was created in. So, my question is - w ...

cssreactjs