Tips for creating a sub-menu within a dropdown menu

I need some help adding a sub-menu to my drop-down function. I'm not very familiar with CSS, so I'm struggling to figure out how to do it. Ideally, I want the sub-menu to open to the right when the cursor hovers over it. Below is the CSS and HTML code related to this issue.

CSS

ul.dark_menu {
    list-style: none;
    padding: 5px 1px;
    font-family:'Segoe UI Light', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
    font-weight: 200;
    font-size: 16px;
    letter-spacing: 0.01em;
    font-smooth: always;
    color: #000000;
    line-height: 15px;
    margin: auto;
    width: 1018px;
    position: relative;
    background: #2B5797;
}
/* Rest of the CSS rules omitted for brevity */

HTML

<div class='menujohanes'>
        <ul class='dark_menu'>
         /* HTML code here */
        </ul>
         
        /* Form section included in the HTML */
      </div>

If anyone could provide guidance on how to properly include a sub-menu in this structure, I would greatly appreciate it. I tried searching Google for solutions but couldn't find clear instructions on how to achieve this.

Thank you!

htmlcsstemplatesdrop-down-menusubmenu

Answer №1

Give this a shot

 <li class='sub'>
     <a href='#'>Lorem ipsum </a>
        <ul>
           <li>
             <a href='#'>
                sub-item 1
               </a>
            </li>
        </ul>
 </li>

Also, make sure to include the following CSS:

 li.sub ul {
display:none;
position: absolute; left: 100%; top:0;}

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

To add new sub menus, simply assign class='sub' to the parent <li> and insert a new <ul> below it as a child element. Here is an example: http://jsfiddle.net/6kDG8/2/

Answer №2

Give this a shot:

ul.dark_menu li ul li ul li { display: none; }
ul.dark_menu li ul li:hover ul li { display: block;}
ul.dark_menu li ul li:hover ul { left: 100%; top: 0; }

Check it out here

Answer №3

/*Custom styling for a horizontal navigation menu*/
ul {
    list-style-type:none;
    margin:0;
    padding:0;
    position: absolute; /* Position the menu */
}
li {
    display:inline-block;
    float: left;
    margin-right: 1px;
}
ul {
    list-style-type:none;
    margin:0;
    padding:0;
    position: absolute;
}
li {
    display:inline-block;
    float: left;
    margin-right: 1px;
}
li a {
    display:block;
    min-width:140px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #fff;
    background: #2f3036;
    text-decoration: none;
}
li:hover a {
    background: #19c589;
}
li:hover ul a {
    background: #f3f3f3;
    color: #2f3036;
    height: 40px;
    line-height: 40px;
}
li:hover ul a:hover {
    background: #19c589;
    color: #fff;
}
li ul {
    display: none;
}
li ul li {
    display: block;
    float: none;
}
li ul li a {
    width: auto;
    min-width: 100px;
    padding: 0 20px;
}
ul li a:hover + .hidden, .hidden:hover {
    display: block;
}
.show-menu {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-decoration: none;
    color: #fff;
    background: #19c589;
    text-align: center;
    padding: 10px 0;
    display: none;
}
input[type=checkbox]{
    display: none;
}
input[type=checkbox]:checked ~ #menu{
    display: block;
}
@media screen and (max-width : 760px){
    ul {
        position: static;
        display: none;
    }
    li {
        margin-bottom: 1px;
    }
    ul li, li a {
        width: 100%;
    }
    .show-menu {
        display:block;
    }
}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <title>CSS Only Navigation Menu</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css>
</head>
<body>
    <ul id="menu">
        <li><a href="#">Home</a></li>
        <li>
            <a href="#">About ￬</a>
            <ul class="hidden">
                <li><a href="#">Who We Are</a></li>
                <li><a href="#">What We Do</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Portfolio ￬</a>
            <ul class="hidden">
                <li><a href="#">Photography</a></li>
                <li><a href="#">Web & User Interface Design</a></li>
                <li><a href="#">Illustration</a></li>
            </ul>
        </li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</body>
</html

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

Enable only a single radio button to be selected in HTML

I am facing an issue with my radio buttons where I only want one to be selected at a time. Despite giving them the same name, all four can still be selected simultaneously. <h1>Portion</h1> <input type="radio" name="portion_n ...

html

Checking if the group of radio buttons has been selected using JQUERY

Need help with validating a group of radio buttons. If none are checked, display an error message in the span element to prompt users to select an option. The strange issue I am facing is that the validation code works only when placed below the radio butt ...

javascriptjqueryhtml

How to eliminate the space between text and list-style-image in CSS

My ul list items have an image added using the list-style-image property. Here is an example of what I have done: JSFiddle ul { list-style-image: url('http://placehold.it/50x40'); } <ul> <li>Coffee</li&g ...

htmlcss

Getting an input value dynamically in a React variable when there is a change in the input field

I am having an issue with my search text box. I need to extract the value onchange and send a request to an API, but when I try using the normal event.target method, it shows an error. How can I fix this? The problem is that onchange, I need to call a func ...

javascripthtmlreactjs

By utilizing the body element as the container instead of a div, the content shifts to the left by eight pixels

When the body is used as the wrapper instead of a div, the content shifts eight pixels to the left (on a 1920×1080 display) when it extends below the fold. The examples below illustrate this difference in code snippets. Please note that the variance is on ...

htmlcss

What's the best way to adjust text color to black or white for maximum contrast when the background changes?

Currently, I am attempting to replicate the email element found on this website: .custom-blend-mode { mix-blend-mode: difference; } Although I have managed to make it work, it results in a change to the opposite color. Ideally, I would like it to remai ...

javascripthtmlcss

The sidebar stays fixed in place and doesn't adapt to varying screen resolutions

Check out my website at . I have a fixed, blue sidebar on the left side of the page to ensure its content is always visible. However, I'm facing an issue with smaller resolutions like 1024x768 where some bottom content is cut off. How can I adjust the ...

javascriptjqueryhtmlcss

Clicking on a checkbox within an HTML table that incorporates handlebar and Express.js

My situation involves a HTML table within a form that is being populated with Handlebars. I need to be able to select certain rows in the table using checkboxes, and upon form submission through a POST request in an Express.js framework, I require the JSON ...

javascriptjqueryhtmlexpresshandlebars.js

Tips for utilizing an array within React and transforming it into a component

I've developed a website that pulls data from a SQL database I created, containing details such as name, address, and occupation of individuals. I successfully managed to showcase this information on the webpage by structuring an array and inserting t ...

javascriptcssreactjs

The dropdown div does not activate when the image is clicked

When the image in the simple dropdown is clicked, it fails to activate the dropdown feature. This issue was encountered while working on a Shopify project, making it challenging to troubleshoot. To demonstrate the problem, I have re-created the scenario i ...

javascripthtmlcssdrop-down-menuonclick

Having trouble resolving 'primeng/components/utils/ObjectUtils'?

I recently upgraded my project from Angular 4 to Angular 6 and everything was running smoothly on localhost. However, during the AOT-build process, I encountered the following error: ERROR in ./aot/app/home/accountant/customercost-form.component.ngfactory. ...

htmlangulartypescriptmigrationangular-aot

Executing the SQL query more than once is not permitted

I seem to be facing a challenge in executing SQL queries multiple times. In the given code snippet, the first SQL query 【SELECT h.title, h.place, h.introduction ~】works fine. However, the second one 【SELECT name ~】fails to execute. If I comment ...

phphtmlcss

Using div tags may cause rendering issues

I am trying to use multiple div tags with webkit borders, but for some reason only the one called 'Wrapper' is displaying properly. Here is my code: .wrapper { margin: 20px auto 20px auto; width: 800px; background: url('images/background_1. ...

csshtmltags

Having an issue with my code in angular 12 where I am unable to successfully call an API to retrieve a token, and then pass that token to another API for further processing

Here is the code snippet containing two methods: getToken and validateuser. I am fetching the token from getToken and passing it as a parameter to validateuser. However, before retrieving the token, my second API call is being executed. ...

javascripthtmlangulartypescriptrxjs

Strange behavior in Internet Explorer when using jQuery to simulate a click on an input=file element

My customized jQuery and HTML code achieves the following purpose: There is a placeholder image that can be clicked by the user, triggering a file selection dialog to open. Once a file is chosen, the corresponding multipart form is sent to the server. To ...

htmljqueryajaxfile-uploadjquery-events

Bizarre Drop-down Peculiarities

Having a perplexing issue where the 'search' list item is oddly shifted below the dropdown box only when it is displayed. The other list items remain in their correct positions. Any advice on how to resolve this? The appearance and functionality ...

jqueryhtmlcssmenu

Tips for opening a new browser tab

I'm having trouble getting my code to open in a new browser tab. Can someone help me figure out what's wrong? function getWaterMeterList() { // alert("ON"); var BillingPeriod = $('#BillingPeriod').val(); $.ajax({ ur ...

htmlasp.net-mvc

The HTML table fails to refresh after an Ajax request has been made

I am currently utilizing Ajax to delete a row from the Roles table. The functionality allows the user to add and delete roles using a link for each row. While the deletion process works properly and removes the row from the database, the table does not get ...

javascriptjqueryhtmlasp.net-mvc

Embed a video clip into an HTML webpage

I attempted to embed a video using HTML. I followed the player script instructions and added the necessary paths and scripts, but unfortunately, the video is not visible on the webpage. Instead, when clicking on the area where the video should be, it opens ...

htmlcssvideo

Improving the layout of text by adjusting the width within a flex-box styled card

I have a card with the style property "display: flex;" applied to it along with other stylings, all of which are checked in the snippet below. My goal is for the text within the card to move to a new line once its width reaches either 120px or 7 ...

htmlcssflexbox