Setting the height property for the second level list items within a nested unordered

I am having trouble setting the height for the Games menu like all the other menus. Can someone help me figure out what is wrong?

Here is the code I have:

<ul class="menu">
   <li class="item-474 current active"><a href="/">News</a></li>
   <li class="item-482 deeper parent">
      <span class="separator">Applications</span>
      <ul>
         <li class="item-483"><a href="games.html">Games</a></li>
      </ul>
   </li>
   <li class="item-484"><span class="separator">Appearence</span></li>
</ul>

 

#left-menu ul.menu {
  display: block;
  list-style-type: none;
  margin-left: -40px;
}

#left-menu ul.menu li {
  display: block;
  text-align: center; 
  background: url("img/menu1.png");
  width: 208px;
  height: 31px;
  text-align: center;
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

#left-menu ul.menu li ul li {
  display: block;
  text-align: center; 
  background: url("img/menu2.png");
  width: 208px;
  height: 31px;
  text-align: center;
  list-style-type: none;
}

This is the output I am seeing:

csshtml-lists

Answer №1

The issue here is that the list items have a set height, causing problems when adding a second level list due to lack of space.

By changing the height to min-height, everything will function properly.

Take a look at this example: http://jsfiddle.net/FJV8b/

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

Is there a method to exclude children objects from spring animations during application?

Is it possible to create a fading in and out effect for a div (for example, to cycle through different backgrounds) while keeping its children (such as text) visible at full opacity at all times? {transitions((style, <animated.div class={ bg[i] + ...

htmlcssreactjsreact-spring

Implementing a background image layered over a background color using CSS

Currently, I am in the process of converting a webpage from PSD format. The main content of the page is designed with a solid background color, but there is also a separate layer that features a glow effect on top of the background. However, when implement ...

htmlcssbackgroundpsd

Implementing multiline ellipsis without relying on -webkit-line-clamp

Content is dynamically loaded in this p tag. I am looking to implement text ellipsis after a specific line (for example, show text ellipsis on the 4th line if the content exceeds). p { width: 400px; height: 300px; text-align: justify; } <! ...

htmlcss

When implementing flex-grow 1 on a flex box, the remaining space is not being filled as expected

I am struggling to make the green div fill the remaining space of a flex box container. My goal is to have the top row (blue) adjust its height based on content, and then have the row below (green) take up the rest of the space. However, it seems like the ...

htmlcssflexbox

flot.js - vertically position ticks, with a centered cut-off effect

I am facing an issue with using flot.js for charts that have a timestamp on the x-axis. Due to having numerous ticks on these charts, I decided to rotate them vertically to prevent overlap. While this solution works well, the labels are centered on the tic ...

cssflot

Make sure that the two rows in my Bootstrap table are consistently positioned next to each other, regardless of the length of the text

When working with a Bootstrap panel containing text inside a table, I've encountered a challenge. One side features links while the other displays descriptions. At times, I find myself having to artificially lengthen the text to ensure it aligns corre ...

cssbootstrap-4

What is the best way to remove unnecessary scrollbars from a material dialog that includes a radio-group?

Check out this Stackblitz demo that showcases a dialog with a radio group inside the mat-dialog-content div. Notice how the dialog-content displays an unsightly scrollbar: https://i.sstatic.net/gvqlH.png This issue doesn't occur with other compon ...

cssangularangular-material

Ways to implement JavaScript and CSS to set a specific zoom level for a webpage

Looking for a solution using html/css/javascript to standardize the zoom level on a website page. Any suggestions on how to implement this with javascript? ...

javascripthtmlcsszooming

Automatic resizing for elements with the class "Div AutoResize."

I am facing an issue with a row of divs. While all the divs on the left automatically resize to fit their content, I want the leftmost div to adjust its size based on the content, but be influenced by the divs on the right. In other words, if the right div ...

htmlcssautosize

Tips on altering the quantity of columns in a ul list dynamically

I'm trying to create a list with 2 columns, and I want it to switch to 3 columns when the browser window is wide enough (for example, on a 23 inch monitor). Can this be achieved using CSS or any other method? Here is my current CSS: .search-results ...

htmlcss

Maintaining alignment between the site content and the navbar items is a key feature of Bootstrap

I am struggling to align the brand and dropdown menu on the right with the content of my page. My goal is to have a single column for the content, taking up col-8 on larger devices and col-12 on smaller devices. I want the navbar and footer to always be 10 ...

htmlcsstwitter-bootstrapresponsive-designbootstrap-5

"Encountering an index error while using PHP, CSS, and AJAX

I've been struggling with this issue for the past five days, but nothing seems to be working. I have scoured through numerous posts on this topic, yet none of the solutions provided have helped me. Currently, I am using an OpenCart CMS and my goal is ...

phpcssajaxcontent-management-systemjquery-post

Applying Adjusting Widths in Tailwind CSS for Large Screens without Sacrificing Full Width on Small Screens

I'm currently developing a React component in which I need to adjust the width of a modal dynamically on larger screens while maintaining full width on smaller ones using Tailwind CSS. Below is the code snippet I have implemented: import React, { use ...

cssreactjsnext.jstailwind-css

Ways to display Div contents based on selected options in an Angular 2/4 list

"Struggling with dynamically displaying div contents" Situation:- I have a list of 3 items: *Menu1 *Menu2 *Menu3 and I have separate div contents for each of these menu items. Requirement :- By default, Menu1 should be displayed. When Menu2 is clicked, ...

javascriptjqueryhtmlcssangular

Methods for animating .jpg images using CSS

I'm currently working on animating an image, specifically moving it from left to right and back. However, before I dive into implementing CSS animation keyframes, I noticed that I am having trouble getting the HTML element to follow the CSS styles I a ...

cssanimation

Conflicting CSS media queries causing style inconsistencies

Why does the order of media queries affect which style is applied? @media screen and (min-width:660px){ body{ background:darkgreen; } } @media screen and (min-width:480px){ body{ background:navy; } } When the code is written in this order, ...

htmlcssmedia-queries

Text gently appearing and disappearing within a block

I’m looking to create a smooth fade effect for the content inside a block that is being dynamically changed by script. Instead of an instant change, I want the old content to fade out and the new content to fade in gradually without using jQuery — just ...

javascripthtmlcssfade

Using jQuery and CSS to change to "loading" status

My current setup includes the following: <div class="click red"></div> <div class="click green"></div> <div class="click blue"></div> When the "click" is clicked, I want to add the class "load" to the div. I have succe ...

jquerycss

Interactive form design using Bootstrap - combining labels, input fields, and buttons in a streamlined inline

Looking for a clean HTML markup without the need for custom CSS like Bootstrap, my goal is to achieve a design similar to the demo I created on bootply - http://www.bootply.com/1Uy4UROiEz The only issue with the above demo is that I want the go button to ...

htmlcsstwitter-bootstrap

What is the method for writing to an HTML file with the use of expressjs?

Alright, I have an interesting idea here. I am looking for a way to allow users to push a button and have a new p element permanently added to the HTML file. This means that even after reloading the page, everyone should be able to see this new element. An ...

javascripthtmlcssnode.jsexpress