Is there a way to adjust my menu so that there is enough space for the dropdown elements, particularly the one with a white background?

I am facing an issue with adjusting the spacing in my menu list and its elements:

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

I want the space to display with a white background and I want the list to occupy all available space.

This is the effect I am aiming for:

enter image description here

Here is the HTML code:

<nav role="navigation" class="nav-menu w-nav-menu" id="primary_nav_wrap">
      <ul>
        <li>
          <a href="index.html" class="nav-link w-nav-link w--current">Home</a>
          <ul>
            <li><a href="#">About Us</a></li>
          </ul>
        </li>
        <li>
          <a href="#" class="nav-link w-nav-link">Services</a>
          <ul>
            <li><a href="#">Mobile Services</a></li>
            <li><a href="#">Window Tinting</a></li>
            <li><a href="#">Wrapping</a></li>
          </ul>
        </li>
        <li>
          <a href="benefits.html" class="nav-link w-nav-link">Benefits for You</a>
        </li>
        <li>
          <a href="#" class="nav-link w-nav-link">Gallery</a>
          <ul>
            <li><a href="#">Mobile Repair</a></li>
            <li><a href="#">Window Tinting</a></li>
            <li><a href="#">Wrapping</a></li>
          </ul>
        </li>
        <li>
          <a href="contact.html" class="nav-link w-nav-link">Contact Us</a>
        </li>
      </ul>
    </nav>

The lists under each link are the submenus.

And here is the CSS code being used:

#primary_nav_wrap ul {

list-style: none;
  position: relative;
  float: left;
  margin: 0;
  padding: 0
}

#primary_nav_wrap ul a {
  display: block;
  text-decoration: none;
  line-height: 32px;
  padding: 0 15px;
}

#primary_nav_wrap ul li {
  position: relative;
  float: left;
  margin: 0;
  padding: 0
}

#primary_nav_wrap ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  padding: 0
}

#primary_nav_wrap ul ul li {
  float: none;
  width: 200px;
  background: #fff;
}

#primary_nav_wrap ul ul a {
  line-height: 120%;
  padding: 10px 15px;
  color: #000;
}

#primary_nav_wrap ul ul li:hover {
  background: #ffed00;
}

#primary_nav_wrap ul ul a:hover {
  color: #fff;
}

#primary_nav_wrap ul ul ul {
  top: 0;
  left: 100%
}

#primary_nav_wrap ul li:hover>ul {
  display: block
}

This code specifically pertains to the "nav" tag on my HTML page.

Thank you for your assistance.

htmlcss

Answer №1

HTML:

Make sure to include the necessary tags within the <head> section of your HTML file.

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">

<!-- jQuery -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- MenuMaker Plugin -->
<script src="https://s3.amazonaws.com/menumaker/menumaker.min.js"></script>

<!-- Icon Library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<title>Test</title>
</head>

<body>
<div id="cssmenu">
  <ul>
     <li><a href="#" target="_blank"><i class="fa fa-fw fa-home"></i> Home</a></li>
     <li><a href="#"><i class="fa fa-fw fa-bars"></i> Menus</a>
        <ul>
           <li><a href="#">Menu 1</a>
              <ul>
                 <li><a href="#">Menu 1.1</a></li>
                 <li><a href="#">Menu 1.2</a></li>
                 <li><a href="#">Menu 1.3</a></li>
              </ul>
           </li>
           <li><a href="#">Menu 2</a>
              <ul>
                 <li><a href="#">Menu 2.1</a></li>
                 <li><a href="#">Menu 2.2</a></li>
                 <li><a href="#">Menu 2.3</a></li>
                 <li><a href="#">Menu 2.4</a></li>
              </ul>
           </li>
        </ul>
     </li>
     <li><a href="#"><i class="fa fa-fw fa-cog"></i> Settings</a></li>
     <li><a href="#"><i class="fa fa-fw fa-phone"></i> Contact</a></li>
  </ul>
</div>
</body>

</html>

CSS:

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
} 
(remaining CSS code remains the same)

<p><strong>JavaScript:</strong></p>

<pre><code>$("#cssmenu").menumaker({
    title: "Menu",
    breakpoint: 768,
    format: "multitoggle"
});

The results on Desktop:

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

The result on smartphone:

https://i.sstatic.net/wxn7R.jpg

Answer №2

After thoroughly understanding your queries, I have created a sample using flexbox and introduced some classes to enhance the readability of the CSS.

#primary_nav_wrap ul {
  display: flex;
  list-style: none;
  position: relative;
  margin: 0;
  padding: 0;
  justify-content: space-between;
}

#primary_nav_wrap .nav-link {
  padding: 0 20px 0 0;
}

#primary_nav_wrap ul li a {
  display: block;
}

#primary_nav_wrap a {
  color: black;
  text-decoration: none;
}

 #primary_nav_wrap .secondary-list {
   opacity: 0;
   pointer-events: none;
   display: flex;
   flex-direction: column;
   background: #ffed00;
 }
 
 #primary_nav_wrap .secondary-list li a {
   padding: 5px;
 }
  
 #primary_nav_wrap .secondary-list li:hover {
   background: blue;
 }
   
 #primary_nav_wrap .secondary-list li:hover a {
   color: white;
 }
 
 #primary_nav_wrap .primary-list > li:hover .secondary-list  {
    opacity: 1;
    cursor: pointer;
    pointer-events: auto;
  }
  .nav-drop-true::after{
    content: " \25bc";
  }
<nav role="navigation" class="nav-menu w-nav-menu" id="primary_nav_wrap">
  <ul class="primary-list">
    <li>
      <a href="index.html" class="nav-link w-nav-link w--current nav-drop-true">Home</a>
      <ul class="secondary-list">
        <li><a href="#">About Us</a></li>
      </ul>
    </li>
    <li>
      <a href="#" class="nav-link w-nav-link nav-drop-true">Services</a>
      <ul class="secondary-list">
        <li><a href="#">Mobile Services</a></li>
        <li><a href="#">Window Tinting</a></li>
        <li><a href="#">Wrapping</a></li>
      </ul>
    </li>
    <li>
      <a href="benefits.html" class="nav-link w-nav-link">Benefits for You</a>
    </li>
    <li>
      <a href="#" class="nav-link w-nav-link nav-drop-true">Gallery</a>
      <ul class="secondary-list">
        <li><a href="#">Mobile Repairs</a></li>
        <li><a href="#">Window Tinting</a></li>
        <li><a href="#">Wrapping</a></li>
      </ul>
    </li>
    <li>
      <a href="contacts.html" class="nav-link w-nav-link">Contact Us</a>
    </li>
  </ul>
</nav>

Answer №3

give this a shot and create your own unique style

nav{
  display:block;
}
a{
  color:#fff;
  text-decoration: none;
}
ul{
  padding:0;
  list-style: none;
}
#primary_nav_wrap>ul {
  list-style: none;
  position: relative;
  display:block;
  margin: 0;
  background-color:teal;
}
#primary_nav_wrap>ul>li {
  display: inline-block;
  position: relative;
  padding: 10px 0;
}
#primary_nav_wrap>ul>li>a {
  display: block;
  text-decoration: none;
  padding: 0 15px;
}
#primary_nav_wrap>ul>li>div {
  display: none;
  position:absolute;
  top:100%;
  left:0;
  background-color:#999;
  padding:10px;
}
#primary_nav_wrap>ul>li>div>ul>li {
  display:block;
}
#primary_nav_wrap>ul>li>div>ul>li a {
  display:block;
  white-space: nowrap;
  padding:5px 2px;
}
#primary_nav_wrap>ul>li:hover>div {
  display: block
}
.nav-drop-true::after{
  content: " \25bc";
}
/*
#primary_nav_wrap ul li {
  position: relative;
  display:inline-block;
  margin: 0;
  padding: 0
}

#primary_nav_wrap>ul ul {
  display:inline-block;
  position: absolute;
  top: 100%;
  left: 0;
  background-color:#fff;
  padding: 0
}

#primary_nav_wrap ul ul li {
  background: teal;
}

#primary_nav_wrap ul ul a {
  line-height: 120%;
  padding: 10px 15px;
  color: #000;
}

#primary_nav_wrap ul ul li:hover {
  background: #ffed00;
}

#primary_nav_wrap ul ul a:hover {
  color: #fff;
}

#primary_nav_wrap ul ul ul {
  top: 0;
  left: 100%;
}
*/
<nav role="navigation" class="nav-menu w-nav-menu" id="primary_nav_wrap">
      <ul>
        <li>
          <a href="index.html" class="nav-link w-nav-link w--current nav-drop-true">Home</a>
          <div>
  <ul>
<li><a href="#">About Us</a></li>
  </ul>
  </div>
        </li>
        <li>
          <a href="#" class="nav-link w-nav-link nav-drop-true">Services</a>
  <div>
  <ul>
<li><a href="#">Mobile Services</a></li>
<li><a href="#">Window Tinting</a></li>
<li><a href="#">Wrapping</a></li>
  </ul>
  </div>
        </li>
        <li>
          <a href="advantages.html" class="nav-link w-nav-link">Benefits for You</a>
        </li>
        <li>
          <a href="#" class="nav-link w-nav-link nav-drop-true">Gallery</a>
          <div>
  <ul>
<li><a href="#">Mobile Repair</a></li>
<li><a href="#">Window Tinting</a></li>
<li><a href="#">Wrapping</a></li>
  </ul>
  </div>
        </li>
        <li>
          <a href="contact.html" class="nav-link w-nav-link">Contact</a>
        </li>
      </ul>
    </nav>

Answer №4

Exploring a different design:

$('#menu li.active').addClass('open').children('ul').show();
$('#menu li.sub>a').on('click', function(){
  $(this).removeAttr('href');
  var item = $(this).parent('li');
  if (item.hasClass('open')) {
    item.removeClass('open');
    item.find('li').removeClass('open');
    item.find('ul').slideUp();
  } else {
    item.addClass('open');
    item.children('ul').slideDown();
    item.siblings('li').children('ul').slideUp();
    item.siblings('li').removeClass('open');
    item.siblings('li').find('li').removeClass('open');
    item.siblings('li').find('ul').slideUp();
  }
});
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400');
#menu {
  margin: 0;
  position: relative;
  font-family: 'Roboto';
  line-height: 1;
  width: 250px;
}
.align-right {
  float: right;
}
#menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: block;
}
#menu ul li {
  position: relative;
  margin: 0;
  padding: 0;
}
#menu ul li a {
  text-decoration: none;
  cursor: pointer;
}
#menu > ul > li > a {
  color: #ddd;
  text-transform: uppercase;
  display: block;
  padding: 20px;
  border-top: 1px solid #000;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  background: #222;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  letter-spacing: 1px;
  font-size: 16px;
  font-weight: 300;
  -webkit-transition: all 0.25s ease-in;
  -moz-transition: all 0.25s ease-in;
  -ms-transition: all 0.25s ease-in;
  -o-transition: all 0.25s ease-in;
  transition: all 0.25s ease-in;
  position: relative;
} 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<!-- jQuery -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- Icon Library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<title>Test</title>
</head>

<body>

<div id="menu">
  <ul>
     <li class="active"><a href="#" target="_blank"><i class="fa fa-fw fa-home"></i> Home</a></li>
     <li class="sub"><a href="#"><i class="fa fa-fw fa-bars"></i> Menus</a>
        <ul>
           <li class="sub"><a href="#">Menu 1</a>
              <ul>
                 <li><a href="#">Menu 1.1</a></li>
                 <li><a href="#">Menu 1.2</a></li>
                 <li><a href="#">Menu 1.3</a></li>
              </ul>
           </li>
           <li class="sub"><a href="#">Menu 2</a>
              <ul>
                 <li><a href="#">Menu 2.1</a></li>
                 <li><a href="#">Menu 2.2</a></li>
                 <li><a href="#">Menu 2.3</a></li>
                 <li><a href="#">Menu 2.4</a></li>
              </ul>
           </li>
        </ul>
     </li>
     <li><a href="#"><i class="fa fa-fw fa-cog"></i> Settings</a></li>
     <li><a href="#"><i class="fa fa-fw fa-phone"></i> Contact</a></li>
  </ul>
</div>

</body>

</html>

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

Top tips for accessing a file that has been uploaded using the $http service and the HTML5

I've encountered an issue while trying to upload an image within an Angular application. Here's the code snippet in question: var f = document.getElementById('product-image').files[0], r = new FileReader(); r.onload ...

javascripthtmlnode.jsangularjs

Tips for refreshing the <img> tag using a user image

I am currently designing a bootstrap webpage and trying to implement a feature where the user can input an image, which will then be displayed in a preview modal along with some text provided by the user. The modal is functioning correctly. Here is the co ...

javascriptjqueryhtmlcsstwitter-bootstrap

Setting a custom background image in HTML using the designated file PATH

My current issue involves the inability to set my background photo using a CSS file. I am utilizing NetBeans for this project. Inside a folder named css, there is a file called global.css which contains the following code: body{ background-image: url ...

htmlcssimage

The page.php file in the Scratch WordPress theme is failing to display the page content as expected

I am currently building a Wordpress theme from scratch, but I am facing an issue with my page.php file not displaying the content for the Lorem page. //page.php get_header(); ?> <div id="primary" class="content-area"> <main id="m ...

phpcsswordpresswordpress-theming

Emphasize user-entered text using HTML and CSS

Here's a scenario: a text paragraph is displayed alongside an input box. The user must type the same text into the input box as shown in the paragraph. I'm aiming to highlight the paragraph text in color as the user types, to demonstrate progres ...

htmlcss

Duplicate the canvas onto a new canvas

One of the functions I am using involves copying an old canvas to a new canvas. Here is the code snippet for this functionality: function cloneCanvas(oldCanvas) { //create a new canvas var newCanvas = document.createElement('canvas&a ...

javascriptjqueryhtmlcanvas

The CSS design morphs as I adjust the browser size. Despite my limited coding experience of just a few weeks, I've encountered a challenging obstacle

Hi there, I've been searching on W3 and various other sources but haven't found a solution to my problem. I have managed to create the layout I want, however, it starts falling apart when I resize the browser window. I'm relatively new to co ...

htmlcss

Manipulating the dimensions of table cells in HTML using PHP

//Apologies for the messy code and the mix of French, I am a beginner. All I want is to allow the user to choose the width and height of the cells. Please keep it as simple as possible. <form method="POST"> Number of Rows: <input ...

phphtml

Transferring class titles between div elements

I would like to implement a feature where class names on div elements shift after a brief delay, perhaps 10 seconds. My goal is for the 3 classes listed below to cycle through the div elements and start over once it reaches the last one. For instance: & ...

javascriptjqueryhtmlcss

Remove any HTML tags or formatting from the body of an email using PHP in Laravel

Currently, while using an IMAP package in Laravel to extract email bodies, I am still encountering HTML artifacts despite attempting some stripping. The functions being utilized are as follows: $styles_removed = preg_replace('/(<(script|st ...

phphtmllaravel

Ways to display a background image on top of a foreground image with CSS

My goal is to have the background image display in front of the foreground image. Despite my attempts with the following code, it did not yield the expected result: .background-image { border :0px; background-image: url(/images/icon.png); ...

css

When the FLASK button is triggered, retrieve data from the FLASK and display it

This is a unique test where I will create a button to retrieve information from a MySQL database. However, it's important to first understand this concept. So here is my custom text within the Flask framework: @app.route('/pythonlogin/home', ...

pythonhtmlflaskpost

Elevate the opacity with a hover effect

I am currently in the process of building my own website using siteorigin page builder on wordpress. One issue I have encountered is that they do not offer a hover option, so I had to create a custom CSS to add a hover effect on the background color. When ...

csswordpresshoverwidgetsiteorigin

CSS inline blocks creating additional gap between two vertical divisions

I am facing an issue with extra space between two div elements of class "badge" when displayed vertically in Firefox and IE, while it works fine in Chrome. I want to ensure that there is either no space or equal space between the div elements in all brows ...

css

Having trouble with multiple slideshows not functioning correctly. Any ideas on how to fix this

My current challenge involves setting up multiple slideshows on a single page with navigation dots to switch between each slideshow. The issue arises when I try to incorporate more than one slideshow, as the navigation dots either stop working or begin con ...

javascripthtmlcss

Navigate through HTML checkboxes using jQuery

I am attempting to use jQuery to create a script that performs the following task. Upon clicking on a paragraph, it will check if a checkbox is selected. If it is, it will wait for a specified amount of time before selecting the next checkbox, and so on. ...

jqueryhtmlloopscheckbox

What is the best way to implement an object literal method for making an HTTP GET request to retrieve JSON data?

I'm facing an issue with the HTTP GET method when trying to retrieve JSON data. Although the HTTP GET method is successfully fetching the JSON data, I'm struggling to connect it with the object literal. For better clarity, here's the specif ...

htmljsonangularjsget

The Vue component should trigger the display of data in a Bootstrap modal based on the row of the button that was

Here is a sample code snippet demonstrating how data is fetched from the database: <table class="table table-bordered"> <thead> <tr><th>User ID</th><th>Account Number</th><th>Accou ...

javascriptjqueryhtmlvue.jsvue-component

Styling with CSS and Bootstrap: Looking to position two divs next to each other within another div

Here is my current code snippet: <!-- Masthead--> <header class="masthead"> <div class="container"> <div class="masthead-subheading" style="color: black;">Welcome</div> <div clas ...

htmlcssbootstrap-4

Whenever I try to execute watir-webdriver, I notice that the CSS file is

Currently, I am in the process of learning how to utilize watir-webdriver in ruby for my QA tasks. However, a recurring issue arises when running my watir-webdriver scripts on certain sites - some pages have missing CSS Files. This particular problem seems ...

cssrubyseleniumwatir