Creating a CSS hover effect for a menu popup

Need help with creating a sidebar on the site, positioned on the left, containing specific menu items and sub-items. The goal is to have a pop-up block appear when hovering over the main menu item that displays the sub-items. The main sidebar has its position set as sticky. The popup block should be displayed within the main_menu_content_list_submenu tag. Any assistance on how to achieve this would be greatly appreciated. Thank you!

.main {
  font-family: PT Sans;
  position: relative;
  display: flex;
  flex-direction: row;
  min-height: 100%;
}

.main_menu {
  display: flex;
  flex-direction: column;
  width: auto;
  background-color: #38618C;
  padding: 50px 50px 0 50px;
}

.main_menu_content {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 50px;
  width: 100%;
}
.main_menu_content_list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  height: 700px;
}

.main_menu_content_list li {
  list-style-type: none;
}

.main_menu_content_list a {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 23px;
  color: #D7DFE8;
  text-decoration: none;
}

.main_content {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  height: 100%;
}
<div class="main">
<div class="main_menu">
            <div class="main_menu_content">
                <ul class="main_menu_content_list">
                    <li><a href="">
                            <div class="main_menu_content_list_int"></div>Text1
                        </a></li>

                        <ul class="main_menu_content_list_submenu">
                            <li><a href="">Text1.1</a></li>
                            <li><a href="">Text1.2</a></li>
                        </ul>

                    <li><a href="">
                            <div class="main_menu_content_list_tv"></div>Text2
                        </a></li>
                    <li><a href="">
                            <div class="main_menu_content_list_video"></div>Text3
                        </a></li>
                </ul>
            </div>
</div>
<div class="main_content">
</div>
</div>

htmlcsspopup

Answer №1

Here is a solution that might be useful

.container {
  font-family: Roboto;
  position: relative;
  display: flex;
  flex-direction: row;
  min-height: 100%;
}

.sidebar {
  display: flex;
  flex-direction: column;
  width: auto;
  background-color: #38618C;
}

.sidebar_content {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 50px;
  width: 100%;
}

.sidebar_content_list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  height: 700px;
  padding: 0;
  margin: 0;
}

.sidebar_content_list li {
  list-style-type: none;
}

.sidebar_content_list>li>a {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 23px;
  color: #D7DFE8;
  text-decoration: none;
  padding: 10px 15px
}

.content {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  height: 100%;
}

.sidebar_content_list_submenu {
  position: absolute;
  padding: 0;
  margin: 0;
  left: 90%;
  height: 100vh;
  background: #f1f1f1;
  top: 0;
  pointer-events: none;
  opacity: 0;
  transition: all linear 0.1s 0s;
  width: 200px;
  padding: 10px 0;
}

.sidebar_content_list li:hover .sidebar_content_list_submenu {
  opacity: 1;
  pointer-events: auto;
  left: 100%;
}

.sidebar_content_list_submenu li {}

.sidebar_content_list_submenu li a {
  padding: 0 10px;
  font-size: 18px;
  line-height: 23px;
  color: #ddd;
}
<div class="container">
  <div class="sidebar">
    <div class="sidebar_content">
      <ul class="sidebar_content_list">
        <li>
          <a href="">
            <div class="sidebar_content_list_int"></div>Text1
          </a>
          <ul class="sidebar_content_list_submenu">
            <li><a href="">Text1.1</a></li>
            <li><a href="">Text1.2</a></li>
          </ul>
        </li>



        <li>
          <a href="">
            <div class="sidebar_content_list_tv"></div>Text2
          </a>
        </li>
        <li>
          <a href="">
            <div class="sidebar_content_list_video"></div>Text3
          </a>
        </li>
      </ul>
    </div>
  </div>
  <div class="content">
  </div>
</div>

Answer №2

  * {
            padding: 0;
            margin: 0;
        }

        .main {
            font-family: Roboto;
            position: relative;
            display: flex;
            flex-direction: row;
            min-height: 100%;
        }

        .main_menu {
            display: flex;
            flex-direction: column;
            width: auto;
            background-color: #38618C;
            /* padding: 50px 50px 0 50px; */
        }

        .main_menu_content {
            display: flex;
            flex-direction: column;
            position: sticky;
            top: 50px;
            width: 100%;
        }

        .main_menu_content_list {
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: space-between;
            text-align: center;
            height: 700px;
        }

        .main_menu_content_list li {
            padding: 50px;

            list-style-type: none;
        }

        .main_menu_content_list li a {
            position: relative;
        }

        .main_menu_content_list li a:hover .main_menu_content_list_int {
            display: block;
        }

        .main_menu_content_list li a:hover~.main_menu_content_list_submenu {
            display: block;
        }

        .main_menu_content_list_int {
            display: none;
            position: absolute;
            right: -135%;
            bottom: 40%;
            width: 10px;
            height: 10px;
            background-color: violet;
            transform: rotate(45deg)
        }

        .main_menu_content_list a {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-style: normal;
            font-weight: normal;
            font-size: 18px;
            line-height: 23px;
            color: #D7DFE8;
            text-decoration: none;
        }

        .main_content {
            display: flex;
            align-items: center;
            flex-direction: column;
            width: 100%;
            max-width: 100%;
            height: 100%;
        }

        .main_menu_content_list_submenu {
            display: none;
            position: absolute;
            left: 100%;
            top: -50px;
            width: 200px;
            height: 700px;
            padding: 50px 50px 0 50px;
            background-color: violet;

<div class="main">
        <div class="main_menu">
            <div class="main_menu_content">
                <ul class="main_menu_content_list">
                    <li><a href="">
                            <div class="main_menu_content_list_int"></div>Text1
                        </a>
                        <ul class="main_menu_content_list_submenu">
                            <li><a href="">Text1.1</a></li>
                            <li><a href="">Text1.2</a></li>
                        </ul>
                    </li>



                    <li><a href="">
                            <div class="main_menu_content_list_int"></div>Text2
                        </a>
                        <ul class="main_menu_content_list_submenu">
                            <li><a href="">Text2.1</a></li>
                            <li><a href="">Text2.2</a></li>
                        </ul>
                    </li>
                    <li><a href="">
                            <div class="main_menu_content_list_video"></div>Text3
                        </a></li>
                </ul>
            </div>
        </div>
        <div class="main_content">
        </div>
    </div>

Updated the CSS for improved visual impact.

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

Display fewer search results initially and have the option to view more when hovering

I am working with a PHP function that generates a ul element. <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> I am looking to display the list in a li ...

phpjquerycsshtml-lists

The outcome of the Python web crawling did not meet our expectations

After using Selenium to scrape web data, I encountered an issue where it only displayed 96 out of 346 products instead of the expected 346. Does anyone have suggestions on how to fix this problem? The crawling code is placed right after the loop for clicki ...

pythonhtmlselenium

When attempting to assign a variable in my ngModel, what issue could be causing a problem?

I am facing an issue while trying to implement ngModel in my code. The code is not executing properly and an error is being displayed. Below is the code snippet: contact-form.component.html: <div class="container"> <form> <div class ...

htmlangular

Horizontal Panning Feature for D3 Horizontal Bar Charts

I am working on a D3 Bar Chart and I would like it to have horizontal panning functionality similar to this example: https://jsfiddle.net/Cayman/vpn8mz4g/1/. However, I am facing an overflow issue on the left side that I need to resolve. Below is the CSV ...

javascripthtmld3.jsdata-visualizationvisualization

Excessive CSS Padding on Tablets and Mobile Devices

I recently completed this website based on a PSD design, using basic CSS techniques. However, I am encountering an issue with unwanted padding on the sides of the site when viewed on mobile devices and tablets. I would like the left and right edges of the ...

csswordpresswordpress-thesis-theme

The JQuery sidebar smoothly transitions in after the menu button is pressed

I have been attempting to utilize the animate function in JQuery to make a sidebar menu slide in from the left after clicking a menu button. Despite searching through various resources, such as Stack Overflow, I am still unable to get it to work properly ...

jqueryhtml

A pair of div containers arranged in rows

I currently have 9 different div containers, each with unique styling for spacing and padding. My goal is to arrange these div cards into 2 rows with sufficient spacing between them for easy readability. As of now, I have all the div containers stacked in ...

htmlcssbootstrap-4

JS Concealing all categories on the page

Working on a webpage, I have created a new view to display categories and devised a solution for categorizing all the data in the app. However, I am facing some unresolved issues. The problem lies in the fact that when I first open my webpage, all the ca ...

javascriptjqueryhtmlcss

Unwanted extra border and padding are showing up at the bottom of my HTML

Recently, I decided to experiment with the jquery superslide plugin on a website of mine. To my surprise, there was an unexpected padding at the bottom of the page. My suspicion is that the display area is not being calculated correctly or that a margin is ...

jquerycsshtml

Is it possible for me to identify the original state of a checkbox when the page first loaded, or the value it was reset to when `reset()` was

When a webpage is loaded, various input elements can be initialized as they are declared in the HTML. If the user modifies some of the input values and then resets the form using reset(), the form goes back to its initially loaded state. I'm curious, ...

javascripthtmldom

Is there a way to adjust the height of a DIV based on the background image and keep the text centered at the same time?

Currently in the process of designing a landing page for my website, and I am interested in incorporating a Jumbotron to provide a more modern and tech-savvy touch. Successfully managed to center my text both horizontally and vertically, now looking into s ...

htmlcss

Restrict the number of rows in a CSS grid

Hello there, I am in the process of creating an image gallery using CSS grid. Specifically, my goal is to initially show just one row of images and then allow users to click a "Show more" button to reveal additional images. You can see my progress here: ...

javascriptangularcsscss-grid

What is the best way to bring a closing </div> tag closer to its opening <div> tag in React, Angular, or Vue

Introduction Experienced JavaScript developers may cringe at the sight of a lengthy 200-line function. Their goal is to break it down into smaller, more manageable functions, each around 20 lines long. The idea is for a function to fit on one screen witho ...

htmlangularreactjsvue.jscode-organization

Inline CSS for altering the appearance of text within a DIV container

Within the confines of this DIV element... <div name="layer1" style="background-color:lightblue;"> <hr>Site:Downtown DataCenter Device: 2KBS</hr> </div> Hello there, I am utilizing Inline CSS Styling. Is it possible to make the t ...

javascriptcss

Steps for selecting a radio button based on a MySQL table value:

My table has two fields, name and gender. When I retrieve the data and attempt to display it in input fields, everything works fine for the Name field. However, I am curious if there is a way to automatically select the radio button based on the gender d ...

phpjqueryhtmlmysqlget

Is the Wordpress search bar a clickable link?

Whenever I attempt to click on the search box, it redirects me to the comments section of a post as if it were a link. It's difficult to provide more information about this issue, but the problem occurs on the website lbk.newcoastmedia.com/wordpress w ...

htmlwordpresswordpress-theming

Creating One Comprehensive Object by Merging Multiple Character Objects

I am attempting to extract text from a news article using the code snippet below: library(rvest) url <- "https://www.bbc.com/future/article/20220823-how-auckland-worlds-most-spongy-city-tackles-floods" final = url %>% read_html() %>% ...

htmlrtext

How can I achieve a smooth background-image transition in Firefox?

Currently, I'm on the hunt for a substitute for this specific code snippet: "transition:background-image 1s whatever" This particular transition only seems to function on webkit browsers, leaving Firefox users out of luck. I experimented with utili ...

htmlcssfirefox

Create a responsive design for a webpage that adjusts font size based on the dynamic type settings in iOS

Is there a way to ensure that my website's font size dynamically adjusts for iOS users? For example, if a user changes the font size in their iPhone settings (Settings > General > Accessibility > Larger Text), I want the webpage font size to ...

htmlcssfontswebkitaccessibility

"Font Awesome appears to be malfunctioning on all versions of Internet Explorer and Microsoft Edge

Having trouble with Font Awesome icons and their compatibility with Internet Explorer. The icons display correctly on all other browsers, but on IE or Edge, there is a blank space where the icon should be. I noticed differences in styling when comparing ...

htmlcssiconsfont-facefont-awesome