Dropdownmenu without borders

I'm having an issue with the dropdown menu on my website - there are no borders showing. I've tried fixing it myself with no luck, so I could really use some help. As a beginner in web development, I don't have much knowledge about these things yet. It's holding me back from progressing with my website, so any assistance would be greatly appreciated!

{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  font-family: "Poppins", sans-serif;
}
.wrapper {
  background: #171c24;
  position: fixed;
  width: 100%;
}
.wrapper nav {
  position: relative;
  display: flex;
  max-width: calc(100% - 200px);
  margin: 0 auto;
  height: 70px;
  align-items: center;
  justify-content: space-between;
}
nav .content {
  display: flex;
  align-items: center;
}
nav .content .links {
  margin-left: 80px;
  display: flex;
}
.content .logo a {
  color: #fff;
  font-size: 30px;
  font-weight: 600;
}
content .links li {
  list-style: none;
  line-height: 70px;
}
content .links li a,
.content .links li label {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  padding: 9px 17px;
  border-radius: 5px;
  transition: all 0.3s ease;
}
.content .links li label {
  display: none;
}
content .links li a:hover,
content .links li label:hover {
  background: #323c4e;
}
...
<div class="wrapper">
  <nav role="navigation">
    <input type="checkbox" id="show-search">
    <input type="checkbox" id="show-menu">
    <label for="show-menu" class="menu-icon"><i class="fas fa-bars"></i></label>
	<div class="content">
	<div class="logo"><a href="Home.html">GameRelease</a></div>
	      <ul class="links">
	        <li><a href="Home.html">Home</a></li>
	        <li><a href="latest games.html">Latest games</a></li>
	          <li><a href="#"></a> </li>
     ...
      </form>
    </nav>  
  </div>

Answer №1

Check out the answer below to enhance your dropdown menu design

Please note: There seems to be some issues with your CSS code :). It is causing conflicts with my code. To make it work, make sure to save a backup copy of your current CSS and HTML files. Then clear out all the contents in both files and replace them with the code provided below.

If you find this solution helpful, kindly mark it as accepted by green ticking it and give it an upvote so that others facing similar problems can benefit from it as well.

ul {
    list-style: none;
}
  
li {
    box-shadow: 2px #cccccc;
    border: 1px ridge black;
    /*width: 300px;*/
}

#ul-outer li{
    width: 300px;
}

#ul-inner li{
    width: 259px;
}

After updating your CSS file, replace your existing HTML code with the following:

<div class="wrapper">
    <nav role="navigation">
      <input type="checkbox" id="show-search">
      <input type="checkbox" id="show-menu">
      <label for="show-menu" class="menu-icon"><i class="fas fa-bars"></i></label>
      <div class="content">
      <div class="logo"><a href="Home.html">GameRelease</a></div>
        <ul class="links" id="ul-outer">
          <li><a href="Home.html">Home</a></li>
          <li><a href="latest games.html">Latest games</a></li>
            <li><a href="#"></a> </li>
          <li>
            <a href="#" class="desktop-link">The recommended games</a>
            <input type="checkbox" id="show-features">
            <label for="show-features">Features</label>
            <ul id="ul-inner">
              <li><a href="Metal Gear V.Html">Metal Gear V</a></li>
              <li><a href="WRC9.html">WRC9</a></li>
              <li><a href="forzamotorsport7.html">Forza Motorsport 7</a></li>
              <li><a href="#">Drop Menu 4</a></li>
            </ul>
          </li>
      </form>
    </nav>  
    </div>

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

Adjust the CSS of a dynamically generated jQuery checkbox button in real-time

I am working on a project where I am creating a series of jQuery checkboxes dynamically within a loop. Here is how I am doing it: var checkbox = $('<input>').attr({type: 'checkbox', id: checkbox_id); panel.append(checkbox); panel ...

Tips on how to showcase it to cover a wide area

I'm having trouble figuring out how to display the output in a span element. Every time I try, I just get a blank result, and when I alert the txtNumber variable, I see "object html span element" in the alert message. <span id="displayQty"> num ...

Having trouble uploading a file with sendkeys to a button element inside an iframe using Selenium in Python

[Technology]: Python + Selenium I am currently attempting to upload a local file using the upload file button. Initially, I tried to locate the element and click on the button, which was successful with the following code: driver.switch_to_frame("upload ...

Spread out a div across a container's width

Currently, I am struggling to modify my css and html in order to have a div expand horizontally into a scrollable div. However, all I seem to get is the content stacking once the width limit is reached. Take a look at this fiddle for reference. The absol ...

Enhance website for Facebook tab using jQuery

I'm currently working on adapting a webpage for a Facebook tab. I've created a new page for the tab and successfully loaded the content from the targeted webpage. Everything is going smoothly, but I'm facing an issue with resizing this conte ...

Trouble encountered when attempting to override styles in Material UI's TableRow

I am attempting to customize Material UI's default styles in order to create a margin between each TableRow. Despite my efforts, it appears that the override is not being reflected in the user interface. ...

Employing delegate for switching roles between classes

I'm having trouble using the jQuery delegate function to toggle classes. What I want to achieve is toggling the class of <li class="unselected-values"> to <li class="<li class="unselected-values"> when the client clicks on the label ...

Combining several btn-group and btn-group-vertical elements within each other

I am looking to create a button grid resembling a numpad for my project. I am utilizing angular and bootstrap 5 and thought of using btn-group and btn-group-vertical for this purpose. While this setup would work for a regular button grid, I need to have t ...

Tips for removing a previous file from an 'input type' in HTML5 FileReader

Here is a file input with an associated function: <img id="uploadPreview"> <div id="changeImage">Change</div> <div id="customImage"> <input type="file" id="myfile" multiple style="display:none" onchange="PreviewImage();" / ...

CSS and HTML modal not closing

I've been working on creating a custom popup using HTML, CSS, and some jQuery functions. My idea was that when I click on the main div, it should expand in size and display a cancel button, which it does successfully. However, the issue arises when tr ...

Looking for assistance with implementing a jQuery function for an onClick event on

I've been diving into learning jquery and managed to create a basic checkbox feature with a function that allows you to set all options as read-only by checking the "None of the above" button. <html> <body> <form id="diagnos ...

Execute the function when the control becomes visible

Currently, I possess an input control: <input id="someID" class="form-control" type="text" name="SomeData" data-ng-model="vm.SomeData"> I have a requirement to set the initial value of vm.SomeData upon user scrolling down to this control. As a begi ...

What is the best way to show the logged-in user's name with PHP?

After a successful login, I want to display a personalized greeting message to the user in PHP (e.g. "Hey User!"). However, the code $username = $_SESSION['username']; is not retrieving the username properly and displays nothing (Hey !). Here ...

What is the best way to split a Bootstrap navbar into two separate rows?

I'm struggling with breaking the navbar to have the navbar-brand in one row and the collapse menu in another. <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="72101d1d0601060013 ...

The CSS does not display properly on iPad or mobile devices

Recently, I had the opportunity to design a website for a local music school. This project was a great learning experience that has shown me the importance of continuous improvement and practice. Check out the site here Initially, I wanted to make the w ...

Save the user input to a dedicated text file

I am working with a couple of select tags that generate an array. Previously, I was only logging the array to the console upon pressing the SUBMIT button, but now I want to save it to a separate text file. Here is my main.html code: <form method="POS ...

Tips for collapsing a child accordion when the parent accordion is collapsed?

Here is the code I have for a functional parent/child accordion div setup: <div class="accordion"> <h3>Part 1</h3> <div class="accordion"> <h3>Sub-Div1</h3> <div> <p>This ...

Binding event listeners to dynamically created elements poses a challenge

I am facing difficulty in adding an event listener to dynamically created elements. The issue lies in my code where I am unable to detect the insertion of <p> element resulting in the lack of console message Bar Inserted. Could you point out if there ...

What could be causing the uneven application of CSS padding when it is applied to a div that serves as the parent of an HTML form?

Padding has been added only to the top and bottom of a div. The padding attribute is displaying consistently for the form element, however, it is not behaving uniformly for the parent div of the form as illustrated in the image provided below. Output:- h ...

Harnessing the power of external Javascript functions within an Angular 2 template

Within the component, I have a template containing 4 div tags. The goal is to use a JavaScript function named changeValue() to update the content of the first div from 1 to Yes!. Since I am new to TypeScript and Angular 2, I am unsure how to establish comm ...