Create a customized navigation menu with both dropdown and dropup options

Is it feasible to create a hover effect that displays both an up and down menu simultaneously? I've tried positioning the up menu absolutely, but it doesn't seem sufficient to me. I want a dual menu setup where the up and down menus display next to each other.

I already have two submenus, but I want one of them to appear above my <nav> tag.

Below is my current menu CSS:


            @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
                // CSS code goes here...
            

            <xz xmlns="http://www.w3.org/1999/xhtml"><nav id="navbar" class="navigation">
                <!-- Navigation code here... -->
            </nav>
            

Answer №1

Thank you for your prompt response. I have successfully managed the menu.

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
body,
html {
  font-family: 'Open Sans';
}

.contentwrapper {
  margin-left: 0px!important;
  margin-right: 0px!important;
}
nav {
  position: relative;
  margin-top: 200px;
  padding: 0 2vw;
  background: rgba(232, 227, 227, 1.05);
}

nav ul {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline;
}

nav>ul:last-of-type {
  float: right;
}

nav ul > li > a, nav ul > li > a:focus {
  background-color:rgba(232, 227, 227, 1.05);
}

nav>ul>li {
  display: inline;
  position: relative;
  margin: 0;
  padding: 0;
  background-color: rgba(232, 227, 227, 1.05);
}

nav ul>li>a,
nav ul>li>a:focus {
  color: #000;
  font-weight: 600;
  font-size: 13px;
  display: table-cell;
  height: 100%;
  padding: 15px 20px;
  text-decoration: none;
  transition: all linear 0.1s;
  -webkit-transition: all linear 0.1s;
  -moz-transition: all linear 0.1s;
}

nav ul>li>a>span {
  margin-left: 10px;
  transition: all linear 0.1s;
  -webkit-transition: all linear 0.1s;
  -moz-transition: all linear 0.1s;
}

nav ul ul.submenu {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  list-style: none;
  top: 100%;
  background: rgba(232, 227, 227, 1.05);
  z-index: 99;
}

nav ul ul.upmenu {
  display: none;
  position: absolute;
  left: 0;
  top: -130px;
  background: rgba(232, 227, 227, 1.05);
  z-index: 100;
}

nav ul ul.upmenu li,
nav ul ul.upmenu li a {
  width: 140px;
}

nav ul ul.submenu li,
nav ul ul.submenu li a {
  width: 200px;
}

nav>ul>li:hover ul.submenu {
  display: inline-block;
}
nav>ul>li:hover ul.upmenu {
  display: inline-block;
}

nav ul>li:hover>a {
  color: #fff !important;
  background: #ce0000;
  text-decoration: none;
}

nav ul.submenu>li:hover>a,
nav ul.submenu>li>a.active {
  background: rgba(206, 0, 0, 0.8);
}
<xz xmlns="http://www.w3.org/1999/xhtml"><nav id="navbar" class="navigation">

  <!-- KEEP NAV MINIFIED - NEEDED FOR LAYOUT -->

  <ul>
    
    <li><a href="/personaldetails">Action Prospection</a>
      <ul class="submenu">
        <li><a href="https://genoway69.sharepoint.com/ssmteam/SitePages/testepage.aspx">Congress management<br /> - SSM / ADV</a></li>
        <li><a href="https://genoway69.sharepoint.com/ssmteam/_layouts/15/guestaccess.aspx?docid=0e5a745b5adb945d08c00368b3762fc9b&amp;authkey=ARiX_xa4YNZd2nI6DtCiX98">Prospection visit<br /><br /> - SSM / ADV</a></li><li>
        </li><li><a href="https://genoway69.sharepoint.com/ssmteam/ProcedureSSM/B-Data%20Bases%20Procedures/PU-SSM-BBDUse_FilesCreation-20170912.pdf">BDDUse - FilesCreation<br /> - ADV</a></li>
        <li><a href="https://genoway69.sharepoint.com/ssmteam/ProcedureSSM/A-Commercial%20Contact%20Procedures/PU-SSM-Website%20Live%20Chat_20161121.pdf">Website live chat<br /> - SSM / ADV</a></li>
      </ul>
    </li>
    <li><a href="/company">CR</a>
      <ul class="submenu">
        <li><a href="https://genoway69.sharepoint.com/ssmte...


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

Traversing through Object consisting of dual arrays within VueJS

Currently, I am working on a chat application built in VueJS and encountering an issue when attempting to display messages along with their respective timestamps. The challenge arises from the need to iterate through an object that contains two arrays: one ...

Utilizing Next.js Image Component to Apply CSS for Width and Height Settings

Currently, I am utilizing the Image component provided by Next.js, which requires setting specific width and height values. To address this, I am incorporating Tailwind CSS utility classes to establish the desired dimensions. https://i.sstatic.net/A28fB.j ...

Selenium is having trouble scrolling to the bottom of the page

Struggling to navigate to the bottom of the webpage, it seems to only scroll once before stopping, leaving a large portion of the page unseen. I'm currently using this code snippet: _inst.driver.execute_script("window.scrollTo(0, document.body.scroll ...

Move your cursor over an image within a div container

After not finding any helpful answers on this topic, I've decided to ask for help again. My issue involves having an image inside a div. <div id ="gratterlendis"> <a href ="?page_id=8"><img src="img/gratterlendis.png" align="right" wid ...

Looking to dynamically generate HTML tags using jQuery and JSON?

Looking for help with inserting HTML code into a div using jQuery. <div id="addme"></div> Here is some HTML with PHP: <div class="col-md-4 product secondproduct"> <div class="images1"> <a href="<?php echo base_u ...

Delete an entry from the list

I have a fully functional Ajax call and function that fills up a datalist. This datalist is utilized to choose from a limited list and add it to a UL element on the page. Once an option is added from the datalist to the actual list, I aim to eliminate that ...

Chrome is able to interpret Behat CSS selectors, whereas Firefox struggles with them

Recently I began working with Behat and Selenium for website test automation. One issue I've encountered is that some CSS selectors work in Chrome but not in Firefox. For instance, in my Behat code: Then I press ".topmember-resultList .resultListIte ...

Is there a way to showcase several items simultaneously on a bootstrap 5 carousel slide?

I currently have a bootstrap 5 carousel with controls that I want to modify. My goal is to create a slideshow where each slide displays 2 items, and I can scroll through one image at a time. Starting from here: https://i.sstatic.net/ROgoL.png And ending h ...

Webpage unable to scroll

Having trouble with scrolling on my webpage and I can't figure out why! The issue is happening when trying to view this page: Within the main file, I have included 2 other php files: <?php include '../../include/menu.php'; inclu ...

Error in Angular 2 component when loading background images using relative URLs from an external CSS skin

In my angular2 component, I am utilizing a third-party JavaScript library. The skin CSS of the component attempts to load images using relative URL paths. Since I am following a component-based architecture, I prefer to have all component dependencies enca ...

What is the best way to handle JSON data in JQuery when it is returned with a header type of "text/html"?

I'm attempting to utilize the jquery getJSON method in order to retrieve JSON data from a public API. However, I am consistently encountering errors when the callback of my getJSON request is executed. Warning: Resource interpreted as Script but trans ...

How to vertically align an image within a div that has a variable height

Is there a way to center an image vertically within a div that is 1/5 of the screen's height? I have managed to horizontally center the image, but vertical alignment seems tricky. Here's the code I've tried so far: http://jsfiddle.net/ws911 ...

Displaying the age figure in JSX code with a red and bold formatting

I have a webpage with a button labeled "Increase Age". Every time this button is clicked, the person's age increases. How can I ensure that once the age surpasses 10, it is displayed in bold text on a red background? This should be implemented below t ...

Customize your website with eye-catching full width colored blocks using Bootstrap 3

I am in need of colorful full-width blocks to differentiate the sections on my website. Currently, I am constructing my website with Bootstrap 3 within a standard container. However, I would like certain sections to be vibrant blocks that span across the ...

What is the best way to achieve concave borders in HTML/CSS, similar to the example provided?

Check out this unique graphic created with normal divs in a flexbox layout, courtesy of mode.com. https://i.sstatic.net/hWwhQ.png Ever wondered how this effect is achieved? Upon inspecting the page source, I discovered that there are four elements arrang ...

Using CSS grid can allow for paragraphs to overlap on top of each

https://i.sstatic.net/LVsgQ.jpgCurrently working on constructing a biography page filled with text content, and I aim to utilize CSS GRID instead of floats. I encountered an issue in getting the text to occupy all the available white space within the layou ...

The transform operation has no effect whatsoever

Just a quick intro, I created an animated clock using CSS and HTML for homework, but now I want to enhance it by adding JavaScript functionality. I tried to sync the clock hands with the current time using JS, but for some reason, the animation always star ...

Show image at 100 pixels wide after removing float classes (float-sm-start / float-sm-end) in Bootstrap 5 at a breakpoint

I am in the process of updating my HTML files to Bootstrap version 5.2.3. In the current version (4.6.2), I have been utilizing the float classes left and right to position images with text wrapped around them on their respective sides. Additionally, I ha ...

Issue with radio button not updating when selected

I am encountering a strange issue with a form I am currently developing. The code snippet below showcases the problem: <?php $show = ' checked '; $hide = ' '; /* Some logic to swap the checked here */ ?> <label cl ...

Rearrange divs from left to right on mobile display

I need help creating a header bar with three elements as shown below https://i.sstatic.net/4njuk.png When viewed on mobile, I want the menu (toggle-icon) to shift left and the logo to be centered. I attempted using push and pull with no success. Is there ...