CSS: The hiding should only apply to specific sections of my menu

I'm having trouble hiding a portion of my menu. Whenever I use the display:none property, the entire menu disappears. I have assigned IDs to different elements to distinguish them, so I'm not sure why this is happening. Here's the code snippet:

HTML:

        <ul id="menu">
            <li><a href="#">Categories 1</a>
                <ul id="cat1">
                    <li><a href="#">temp1</a></li>
                    <li><a href="#">temp2</a></li>
                    <li><a href="#">temp3</a></li>
                </ul>
            </li>
        </ul>

CSS:

#menu {
  background-color: #0000FF;
  height: 20px;
  padding: 15px 0 10px;
  margin-bottom: 20px;
  font: 12px 'DroidSansBold', Tahoma,sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 3px 2px 3px #000;
  border-radius: 5px;
  text-align: center;
} 

#menu li{
  display: inline-block;
}

#menu li a {
  color: #fff;
  text-decoration: none;
  margin: 0 120px;
}

#cat1 li{
display: block;
padding: 10px;
}  

#cat1 li a{
background-color: #0000FF;
padding: 10px;
border-radius: 5px;
}

Check out a somewhat functioning demo here: http://jsfiddle.net/ZfN7t/

htmlcss

Answer №1

If you find yourself dealing with nested unordered lists, it can be beneficial to assign different classes for easier styling:

<ul id="menu">
        <li class="menu-item"><a href="#">Categories 1</a>
            <ul id="cat1">
                <li class="cat1-item"><a href="#">temp1</a></li>
                <li class="cat1-item"><a href="#">temp2</a></li>
                <li class="cat1-item"><a href="#">temp3</a></li>
            </ul>
        </li>
</ul>

To hide temp1, temp2, and temp3, use the following CSS:

.menu-item #cat1{
    display:none;
}

To make them appear on hover, use this CSS:

.menu-item:hover #cat1{
    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

Slick Slider isn't compatible with Bootstrap Tab functionality

I'm having an issue with using slick slider within a Bootstrap tab menu. The first tab displays the slick slider correctly, but when I switch to the second tab, only one image is shown. How can I resolve this problem? <!DOCTYPE html> <html ...

javascripthtmlcsstwitter-bootstrapbootstrap-5

What is the method for modifying the text color of P tags within a div element?

I'm having trouble changing the text color of the P tags in the card-header section for some reason dashboard.html <div class="container"> <div class="card"> <div class="card-header"> <p& ...

htmlcss

Modify the div's background color specifically with AngularJS

After creating a list using divs, my goal is to modify only the background color of the selected div when a user makes a choice from the list. I have accomplished this by defining two distinct CSS classes with the main difference being the background colo ...

htmlcssangularjs

Achieving Flexbox alignment in a responsive layout

Struggling with achieving a responsive layout using Flexbox. Picture a page filled with panels. The main objective is to display a certain number of panels per row, aligned both horizontally and vertically like the rest. The main issue I am encountering ...

htmlcssflexbox

Ensuring the width of a div matches the adjacent containers

I need assistance in creating a form that adjusts its width based on the form fields. The form contains both explanatory text and input fields, each enclosed in a div with inline-block set. The outer div (also using inline-block) should not expand beyond ...

htmlcss

Display logo when website has been scrolled

On my website, I want to display a logo in the header only when the site has been scrolled. I attempted to accomplish this with JavaScript: if(document.getElementById("div").scrollTop != 0){ document.write("<img src='logo.jpg'>"); } How ...

javascriptcss

Adjust the styling of selected elements when their values are changed

I am attempting to modify the background color based on the selected value that is returned. However, my current code doesn't seem to be working as expected: <script> $(document).ready(function() { $('#assessments').change(functi ...

javascriptjqueryhtml

Is there a way to reposition the delete action to the final column within an ng2 smart table?

Is there a way to move the delete action to the last column in an 'ng2' smart table? I am looking to have the delete action appear only in the last column of my table in the ng2 smart table. Can anyone provide assistance with this matter? Below ...

htmlcssangularangular-material2ng2-smart-table

Centered flex item with a flexbox grid underneath

Looking to create a layout with an intro section on the left side and a sidebar on the right within a container. Below the intro section, I want four divs evenly spaced like a grid. But I'm struggling with setting up this grid, possibly due to flexbo ...

htmlcssflexbox

The navigation bar seems to be missing in action

I am currently working on a project on Codepen, and I am trying to create a navbar with a dark background color and my name in a light color. However, I am facing issues as it is not displaying as expected. I followed the Bootstrap 4.0 guide available onli ...

htmlbootstrap-4

The alarm feature is malfunctioning

I have been struggling with a simple alarm application that I created using jQuery and Javascript. The issue lies in the alarm functionality not working as expected. Below is the relevant code snippet: var today = new Date(); var h = today.getHours(); var ...

javascriptjquerycss

Trying to display logo using 'content' property in CSS

I've been trying to display a logo on the header of my website, but I'm having trouble getting it to show up. I attempted to set the logo using HTML syntax as well as the following CSS code: .div { content: url (...jpg); } However, both metho ...

htmlcss

Enhance user experience with Google Optimize by conducting A/B testing on

I am seeking advice on Google Optimize CSS code. My goal is to perform A/B testing on button colors throughout my entire WordPress website at www.interica.si. When I make changes to the CSS code in the edit mode, it seems to affect all buttons, but when I ...

javascripthtmlcssoptimization

Is there a way to decrease the speed of a text when hovering over it?

Is there a way to create a button that displays text before another text only on hover, with a delay? I've managed to achieve the effect but can't figure out how to slow it down. For example, notice how quickly the word "let's" appears when ...

htmlcsscss-transitionspseudo-element

Positioning a dropdown menu on top of a Google Map in React with JavaScript: Best Practices

I've been attempting to place a dropdown menu at a specific location on my Google Map, specifically in the top right (or top left is also acceptable). Below is the current output I am seeing: Here is the expected result: Modifications After trying ...

javascripthtmlcssnode.jsreactjs

Changes to the className of a React component will trigger a re-render of

When the className of the parent changes, React children will re-render. import React from 'react'; import { useSelector } from 'react-redux'; import items from './ItemsList.js'; import Item from './Item'; import &ap ...

javascripthtmlreactjsrender

Swap out original source files in HTML with minified versions

I have successfully utilized a maven plugin to create a minified and compressed version of my CSS and JavaScript files. Now, I am looking to update the section in my main HTML page that currently loads all those individual files. Here is what it looks lik ...

javascriptcssmaven

What is the best way to ensure that every item on a list can be

Is there a way to make both the left and right sides of a list item clickable? Currently, only the right side is clickable in my case. Any suggestions? This is my HTML: <body> <aside id = "aside"> <div id="column"> ...

htmlcss

How to dynamically adjust column width based on maximum content length across multiple rows in CSS and Angular

I am attempting to ensure that the width of the label column in a horizontal form is consistent across all rows of the form based on the size of the largest label. Please refer to the following image for clarification: Screenshot Example All label column ...

cssangularformslayoutbootstrap-4

When jQuery updates the content, the div content disappears temporarily

I am currently using jQuery to generate HTML by fetching data from a JSON file. Below is the code snippet where I create the HTML: $(document).ready(function () { $('#searchForm').submit(function () { var entry= $("#searchFo ...

javascriptjqueryhtml