Height CSS does not conceal side bar hyperlinks

CSS 

.nested-menu {
        .list-group-item {
            cursor: pointer;
        }
        .nested {
            list-style-type: none;
        }
        ul.submenu {
            height: 0;
        }
        & .expand {
            ul.submenu {
                list-style-type: none;
                height: auto;
                li {
                    a {
                        color: #FFF;
                        padding: 10px;
                        display: block;
                    }
                }
            }
        }
    }

HTML

<div class="nested-menu">
                <a class="list-group-item" (click)="addExpandClass('pages')">
                    <span>
                        <i class="fa fa-universal-access"></i>
                        &nbsp;Account
                    </span>
                </a>
                <div class="nested" [class.expand]="showMenu === 'pages'">
                    <ul class="submenu">
                        <li>
                            <a [routerLink]="['account/password']" (click)="eventCalled()">
                                <span>Password reset</span>
                            </a>
                        </li>
                        <li>
                            <a [routerLink]="['account/user']" (click)="eventCalled()">
                                <span>User</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

When not clicked, the child links are not hidden even though height: 0 is set. How can I hide them before clicking?

css

Answer №1

To solve the issue, make sure to include overflow:hidden; in your submenu class.

ul.submenu {
    height: 0;
    overflow: hidden;
}

Answer №2

In order to adjust the height of inline elements, you must change them to either a block or inline-block element.

To achieve this, apply either display: inline-block; or display: block;

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

Border extends across two separate rows

Let me illustrate my issue with a specific example where I am utilizing a single column with a rowspan: <table border="1" style="width:300px"> <tr> <td rowspan="2">Family</td> <td id="jill">Jill</td> <td>Smi ...

htmlcss

The Boostrap background is failing to display as expected in CSS, and the `position: fixed` property is

I am struggling to add an extra class within the div class= "container-fluid" in order to set a background with a fixed position, but it doesn't seem to work. The only way I can add a background-image is directly in the HTML. Why is that? Another is ...

htmlcss

What steps can be taken to prevent a "Flash of Unstyled Content" when using fixed-width cells in CSS Tables?

My website's design is heavily influenced by CSS tables. This decision was made to ensure consistent cell heights regardless of the content, making alignment easier. Overall, this method has been quite effective. However, there is an issue where the ...

htmlcssfouc

Tips for disabling default browser input validation in React

https://i.stack.imgur.com/834LB.png Is there a way to remove the message "Please fill out this field" while still keeping the "required" attribute intact? I have my own validation system in place, so I need to use the "required" attribute to determine whe ...

javascripthtmlcssattributes

The image is taking up the entire div instead of just filling the area below the header

I'm currently facing an issue with positioning an image within a container below a header. The problem lies in the fact that the image extends beyond the header's position, filling up the entire container. Below is the code snippet I'm work ...

htmlcss

Guidelines for placing an HTML element in relation to another HTML element using CSS or JavaScript

Is there a way to position an HTML element in relation to another using CSS or JavaScript? I have attempted to copy the inner HTML of the "second-element" and append it inside the "first-element", but this approach is causing issues with other functional ...

javascripthtmlcsspositioncss-position

Incorporating fontawesome icons ABOVE custom menu items in WordPress

In the process of customizing a menu in WordPress, I am looking to add fontawesome icons above each list item. In the past, I achieved this using the following code: <ul> <li> <a href="#"> <i class="fa fa-home"></i&g ...

phpcsswordpresslistmenu

Tips for activating this effect even when the window is resized during page scrolling

There's a code snippet that enables the header to become unfixed when a specific div reaches the top of the screen and then scrolls with the rest of the content. While this solution works perfectly, I encountered a problem where the calculations for ...

javascripthtmlcsscss-position

Does text alignment apply to one tag but not the other?

Hello, I am in the process of creating a basic webpage and encountering some formatting issues. When I apply the style format to one element, it aligns perfectly, but for another element it doesn't seem to be working. I'm certain it's a simp ...

htmlcss

Struggling to center an image within a CSS border

I'm attempting to include a subtle border around an icon. The issue I am facing is that the image is positioned at the top of the bordered area, whereas I want it centered. Here's how it currently appears: This is my current border CSS style: ...

css

Modifying the color of the tooltip arrow in Bootstrap 4: A step-by-step guide

How can I change the arrow color of the tooltip using Bootstrap 4? Here is my current code: HTML: <div class="tooltip-main" data-toggle="tooltip" data-placement="top" data-original-title="Service fee helps Driveoo run the platform and provide dedicate ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Creating a Vertical Stack of Divs Using HTML and CSS

I've attempted various methods to align the links vertically in the left-most column, but without success. Any suggestions or advice would be greatly appreciated! http://jsfiddle.net/adRuz/112/ .box { background: #E8E8E8; border-radius: 8px ...

htmlcssstack

Reducing image size using CSS can result in blurry images on multiple web browsers

Encountering challenges with downscaled images in multiple browsers... The images must be downscaled to adapt to the browser size. Here is the code snippet: #pic-holder img { -moz-transform: rotate(0deg); /*image-rendering:-webkit-optimize-contras ...

cssimagefirefoxsafari

What is the most efficient way to display a dynamic alphabetical order list?

sample code: <table width="100%" cellspacing="0" cellpadding="0" border="0" style="line-height: 1.7;"> <tbody> <?php $this->db->select('*'); $this->db->from('cm_options'); ...

phpcssmysqlcodeigniter

Focused Filtering in DataGrid Pagination

Seeking to adjust the font size of numerical values (10, 25, and 50 as shown in the screenshot below) within rows per page selection within a pagination section of a DataGrid component. After inspecting each number, it was revealed that .MuiMenuItem-root ...

javascriptcssreactjsdatagridmaterial-ui

What is causing the spinner with CSS rotation transform to bounce rhythmically?

In my design, I have created a simple Spinner icon in Figma. It's meant to be perfectly aligned at the center of an enclosing frame that has dimensions of 64x64. To achieve the rotating effect, I applied CSS rotation as shown below: let rotation = ...

cssanimationsvgrotationcss-transforms

What could be causing the last LI to drop onto a new line when floating UL to the right?

I'm currently working on creating a horizontal navigation that needs to align to the right side of the page. However, when I float the navigation to the right and then float all the list items to the left, the last item in the list breaks onto a new l ...

htmlcsscss-floathtml-lists

Can you provide tips on leveraging CSS as a prop for a Vuetify v-tab component?

Currently, I am in the process of updating my website to simplify color palette swapping. We are still experimenting with different colors that work well together. Our stack includes Vue and Vuetify, with SCSS generating our primary CSS file. Most of our c ...

cssvue.jssassvuetify.js

What is the best way to manage these interconnected Flexboxes when using align-items: stretch?

Trying to put this into words is quite challenging, so I created a simple diagram for better understanding: https://i.stack.imgur.com/TMXDr.png The outer parent uses flex with align-items:stretch to ensure that both col 1 and col 2 have the same height. ...

htmlcssflexbox

Issue with MUI data grid not resizing properly within a grid container: The dimensions of the MUI data grid are not adjusting as anticipated

In my setup, I have a main grid <div> container that contains two child elements. One is the MUI <DataGrid />, and the other is a simple <div>: Here's how it looks in JSX (React): <div className="container"> <Da ...

cssreactjsmaterial-uimui-x-data-grid