develop a secondary menu using cascading style sheets

Seeking assistance to design submenus with CSS. As a newcomer, I am struggling with this HTML code and need guidance.

<div class="nav-collapse collapse">
            <ul id="nav-list" class="nav pull-right">
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#updates">Updates</a></li>
                <li><a href="#screenshots">Screenshots</a></li>
                <li><a href="#howto">How to</a></li>
                    <ul>
                    <li><a href="#">Sub Item 1.1</a></li>
                    <li><a href="#">Sub Item 1.2</a></li>
                    </ul>
                <li><a href="#permissions">Permissions</a></li>
                <li><a href="#download">Download</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div>

Desiring dropdown functionality for the current horizontal menu setup for submenus.

csssubmenu

Answer №1

Just for you to begin...

.nav li ul { display: none; }

.nav li:hover ul { display: block;}

A small change is needed in your HTML as well... Make sure to nest the sub-menu <ul> inside the parent <li>. Like this:

<li><a href="#howto">How to</a>
    <ul>
        <li><a href="#">Sub Item 1.1</a></li>
        <li><a href="#">Sub Item 1.2</a></li>
    </ul>
</li>

Check out this jsfiddle to see it in action, although it may not be horizontal like your existing styles, the functionality remains intact when hovering over "How To":

http://jsfiddle.net/Zuvdf/

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

Can someone guide me on how to align text to the bottom border of a page?

Is there a way to adjust the position of the header text ("bottom text") so that it appears just above the bottom border of the page? I have attempted modifying styles and classes within the footer, style, and h3 tags but have not had any success. Below ...

htmlcsstextborder

Elements shifting positions based on the size of the window

I am facing an issue with positioning the register form on my website. I want it to be fixed at the bottom-right corner of the window, without reaching the top. Although I managed to achieve this, the problem arises when the screen resolution changes. For ...

htmlcss

What is the best way to rearrange images within a grid container?

I apologize for asking numerous questions, but could someone please guide me on how to position an image slightly to the right of center or just 1 inch to the left of center? http://jsfiddle.net/96d7udd7/ Below is the HTML code snippet: <figure class ...

htmlcssimagealignment

Tips for positioning a div at the bottom using Bootstrap

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3d5f5252494e494f5c4d7d08130c130e">[email protected]</a>/dist/css/bootstrap.min.css"> <div class="co ...

htmlcssbootstrap-5

After converting my HTML elements to JSX in Next.js, I am experiencing issues with my CSS files not being applied

Hey there, I'm currently working on a website using Next.js. I've converted the HTML elements of a page to JSX elements but for some reason, the CSS of the template isn't showing up. I've double-checked all the paths and even updated th ...

javascripthtmlcssreactjsnext.js

Placing an item from a "stack" onto a separate line on smaller screens

My goal in Bootstrap is to achieve the design shown in this image: https://i.stack.imgur.com/9Eoen.png The first layout can be achieved by placing B and C within the same div container. The second layout can be accomplished by defining C on a new row ind ...

htmlcsstwitter-bootstrap

The text color and image size remain unchanged when I press the buttons. Perhaps there is an issue with the way I linked my JavaScript?

I'm currently working on debugging for a prework assignment at a coding school. I'm having trouble getting the buttons to function properly. Despite my limited experience, I suspect that my javascript file is not linked correctly. The javascript ...

javascripthtmlcssfrontend

What is the method for adding a before pseudo-element to my button element?

HTML & CSS Issue <button>Get Postion</button> Below is the CSS code for styling a button: button { padding: 1rem; background-color: red; color: wheat; border: 4px solid yellowgreen; position: relative; cursor: pointer; ...

htmlcssz-index

The website is not displaying correctly

I've been working on building a website using the CakePHP framework, but I've encountered an issue where the site is sometimes not rendering properly. This results in either the CSS not being applied correctly or only partially applied. It's ...

htmlcsscakephp

Improving the Performance of HTML/CSS Animations - Enhanced Animation Speed

I have created an HTML page with CSS animation and transitions. <div class="container-fluid" id="team"> <div class="row first"> <div class="wrapper"></div> </div> <div class="row second"> <div class="wrapper" ...

htmlcsscss-transitionscss-animations

The :after pseudo-element is not being shown beneath its relative parent

Encountering a puzzling CSS challenge... I am trying to enhance the appearance of an element by adding visual thickness. This task is usually straightforward, using an :after pseudo-element with absolute positioning within a parent that has relative positi ...

csscss-position

There is a slight misalignment when trying to horizontally center a character within a div

I've experimented with various methods like using a px width or em widths. I've attempted nesting a span and trying different styles such as text-align:center or margin:0 auto. I can manage to center either the R or the S, but struggling to get ...

css

Integrating Twitter bootstrap into Django version 1.5

I have been attempting to incorporate Twitter bootstrap into my django application. Within settings.py, I have set up the following: STATIC_URL = '/static/' # Additional locations of static files STATICFILES_DIRS = ( # Add paths for static ...

pythonhtmlcssdjangotwitter-bootstrap

What is the best way to activate a scrollbar exclusively for the final section in fullpage.js?

Is there a way to enable a scrollbar for the last section only in fullpage.js? This is what I attempted: $("#section3").fullpage({ scrollBar: true, fitToSection: false, }); Unfortunately, it didn't work as expected. ...

jqueryhtmlcssfullpage.js

Create a text container that adjusts its size based on the content within

My goal is to create a unique display using CSS: I want to add various texts and lines to fill in the white space on the left and right sides. I have made some progress with this http://jsfiddle.net/g5jtm/, but I am facing a few issues: The text width ...

cssalignment

How can the color of glyphicons be adjusted within an AngularJS ng-class that is constantly changing?

I am currently facing an issue with my function called lessThan(a,b) that checks if "a" is less than "b" and returns a boolean value. I have added a glyphicon to a form to display a check mark when true and an X when false, but I can't get the colors ...

javascripthtmlcssangularjs

Achieve seamless transitions between animations when hovering with CSS3

I am facing an issue with an element that has a CSS3 animation. When the element is hovered over, the animation changes to another infinite one. While everything is functioning correctly, the transition between animations sometimes feels too abrupt and b ...

cssanimationcss-transitionscss-animations

The design of emails varies when viewed on mobile devices versus desktop computers

While creating an html email, I encountered a little issue. I have designed two layouts - one for desktop (and tablet) and one for mobile. These layouts differ in multiple ways, from images to text. To address this, I created two tables and assigned a clas ...

cssemailmobilegmailhtml-email

Is there a way to ensure that the cards remain securely within the confines of the background image at

Struggling to keep the cards neatly contained within the background image regardless of screen size. Here's my code snippet: {% block content %} <style> .custom-skills-section { background: url('{{ background_image ...

htmlcssdjangobootstrap-5

When the mouse hovers over, include a fade-in effect for the image

I am working with two overlapping images and have successfully implemented a function to display the second image on mouse hover. However, I am struggling to incorporate a CSS transition property for a smoother image transition effect. Currently, when the ...

htmlcssreactjsanimationhover