Expansive dropdown options in the navigation bar

Can someone help me create a menu similar to the one in this screenshot?

I am looking for a solution where hovering over a cursor will open a large submenu with two sections. Any examples or suggestions would be greatly appreciated. Thank you all in advance for your assistance!

htmlcssnavbar

Answer №1

Here is a simple example to help you kickstart your project. While it may need more design and content, this snippet will provide you with the necessary tools to implement a dropdown menu on hover.

HTML:

<header>
  <a href="/url">
    Hover over me for dropdown
  </a>
  <div>
    <section></section>
    <section></section>
  </div>
</header>

CSS:

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 50px;
}

header > a {
  padding: 0 2em;
  height: 50px;
  display: grid;
  place-content: center;
}

header > div {
  display: hidden;
  background-color: white;
}

a:hover + div {
  display: inherit;
}

Answer №2

If you're interested in improving your navbar, why not try incorporating the :hover attribute along with a 'Dropdown' tab to showcase additional content like links.

Check out this HTML example:

<div class="navbar">
    <div class="dropdown">
        <button class="dropbtn">Dropdown 
          <i class="fa fa-caret-down"></i>
        </button>
    <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
    </div>
  </div> 
</div>

Here is the corresponding CSS code:

.navbar {
  overflow: hidden;
  background-color: #333;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

...

For more detailed information on this topic, feel free to visit the <a href="https://www.w3schools.com/howto/default.asp" rel="nofollow noreferrer">W3School</a> website!</p>
    </div></answer2>
<exanswer2><div class="answer" i="62780765" l="4.0" c="1594132110" a="QWxleCBEb3VnbGFz" ai="13842261">
<p>This method can help you enhance your navbar by utilizing the <code>:hover feature in the dropdown section to unveil additional content, such as links.


HTML snippet:


<div class="navbar">
    <div class="dropdown">
        <button class="dropbtn">Dropdown 
          <i class="fa fa-caret-down"></i>
        </button>
    <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
    </div>
  </div> 
</div>



CSS style block:


.navbar {
  overflow: hidden;
  background-color: #333;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}



Learn more about this at the W3School site!

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

Partial view remains stagnant despite successful ajax post completion

I am currently in the process of developing a system that will showcase uploaded images from a file input into a specific div within my view. (with intentions to incorporate document support in the future) The challenge I am facing is that the partial vie ...

javascripthtmljqueryajaxasp.net-core-mvc

Changing my PHP contact form from method GET to POST is causing it to malfunction

Feel free to check out my contact form on benlevywebdesign.com, located at the bottom of the page. <form id="form1" action="<?php echo $_SERVER['PHP_SELF']; ?>" enctype="text/plain" method="get"> <fieldset> ...

phphtmlformspostmedia-queries

Combining Javascript and Django for a powerful web development solution

Having trouble setting up JS on my Django web app, despite reading through the documentation and previous queries. Using the Django dev server with the following file structure: mysite/ __init__.py MySiteDB manage.py settings.py ...

javascriptpythoncssdjango

Text that fades in and out based on scrolling past a specific point

There's a text containing <p> and <h1>. The text finishes with one <h1>. I'm looking to speed up the Y translation of the <p> twice when I reach the bottom of the document (where the last h1 is located in the middle of th ...

javascriptjquerycss

Creating a dynamic table using jQuery and XML content

Hello everyone, I am new to jQuery and JavaScript in general. My goal is to generate a table based on XML data, but I'm struggling to achieve the correct output. Here's what I have tried so far: Here is my HTML code: <table id="daily_fruit"& ...

javascriptjqueryhtmlxmlhtml-table

Using CSS alone, incorporate two images within a section in HTML5

Is there a way to add two images inside a section using CSS to make them look like this: https://i.sstatic.net/74JSK.png However, the only result I can achieve with CSS looks like this: https://i.sstatic.net/TWrSR.png I could use divs in HTML and add th ...

htmlcss

Tips for hiding a soft keyboard with jQuery

Here is a text button: <input type="text" class="field" id="something" name="something" placeholder="text" autofocus /> I want to prevent the android soft keyboard from popping up and keep the focus on this field. I only want to do this for this ...

javascriptandroidjqueryhtml

<Select> Placeholder customization

For my react project, I am utilizing material-Ui and I am looking to have a placeholder that stands out by having grey text instead of black when compared to the selected item. <Select name="answer" value={values.answer} onChange={handleChange} onBlur= ...

javascriptcssreactjsmaterial-ui

What is the best way to align my cards side by side using html/css/js?

Check out this piece of HTML code I have: <div class="container"> <div class="column"> <div class="post-module"> <!-- Inserting content here --> </div> <div class="post ...

htmljquerycsswebdesign-patterns

Ways to conceal one message within another

I am currently working on incorporating Facebook's comments box into my website. My goal is to have the comments that I retrieve through GET requests and display in the template remain invisible to users, but visible to search engines. As part of an ...

javascriptjqueryhtmlcss

What could be the reason for the lack of CSS being applied to elements sharing the same class?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=de ...

htmlcss

How can I make CSS text-overflow ellipsis trigger a pop-up to display lengthy text when clicked?

I'm encountering an issue with a lengthy sentence in a table cell which I've truncated using text-overflow to display ellipsis. Is there a way to enable users to click on the dots (...) and view the full text in a popup window? table { wi ...

htmlcssangular

Increase the value only when there is existing code present

I currently have a MySQL table with two columns. The first column stores IP addresses, while the second column holds integers that need to be incremented. Whenever a new IP address visits the website, the integer associated with that IP should increase by ...

phpmysqlhtml

HTML script tag failing to load

As a beginner in using scripts in HTML, I'm currently following a tutorial that suggests loading the script after the body for certain reasons. In my own code, I found that I need to place the script both in the head section and after the body. Remov ...

javascripthtmljquery

Utilizing the child element's attribute value in a list to dynamically modify the CSS styling of a div element

I'm struggling with designing a ranking bar that consists of 9 bars. I want the height of the bars to vary, with bar 0 and bar 8 being the longest. However, I am having difficulty manipulating my jQuery selector to change the CSS style of the bars bas ...

javascriptjquerycsshtml

The jQuery load() method may not load all elements

I've been struggling with a query issue for quite some time now. I have a Content Management System that I want to integrate into my website, but unfortunately, I am unable to use PHP includes. As an alternative, I decided to utilize jQuery instead. D ...

javascriptjqueryhtmlajax

jquery causing issues with content loading

Greetings everyone, I have been attempting to load content into a div using this tutorial with the help of jQuery. However, I am encountering an issue where when I click on the link <a href="about.html" class="panel">Profile</a> , it loads ...

jqueryajaxhtml

Position the icon to the left side of the button using Bootstrap

Need help with centering text on a bootstrap 3 button while aligning the font awesome icon to the left side. <button type="button" class="btn btn-default btn-lg btn-block"> <i class="fa fa-home pull-left"></i> Home </button> Usi ...

htmlcsstwitter-bootstrap-3

Building a Navigation Menu in Vue.JS Using Bootstrap Styles

Greetings! I had previously developed a Menu for my Vue 2 project. Upon creating a new Vue 2 project (with plans to migrate to Vue3), I proceeded to import my Menu, which consists of HTML and CSS. Unfortunately, it seems that the implementation is not wor ...

cssvue.jsmenuvue-component

Is the format of this HTML tag correct?

I was provided with a code from our design department to add to a page, and since I am relatively new to the design aspect of things, I'm seeking clarification. Is this a valid tag? Also, what does <--if subcontent add rel="test1"--> mean? The c ...

html