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

The scrollbar CSS appears to be missing on iPhone browsers Chrome and Safari

After spending the entire day searching for a solution to override the irritating scrollbar issue on my iPhone, I came across this simple example: .scroller { background: lightblue; height: 1000px; max-width: 400px; margin: 90px auto; padding: ...

htmlcss

Applying class to target specific screen size in Bootstrap

I've been utilizing bootstrap for my project. My objective is to assign multiple classes based on screen size, such as sm-col and xs.col. For example, let's say I have a text id <div id="text" class="xs-format lg-format ..."></div> ...

csstwitter-bootstrapbootstrap-4column-count

Using JavaScript to grab an entire div containing an SVG element

I am looking to capture an entire div as an image and save it locally as proof. Despite reading numerous articles on converting SVG to image or div to image, I have encountered challenges in achieving the desired result. Several attempts with JavaScript l ...

javascriptjqueryhtmlsvg

repeating the identical content in the same setting

I am encountering an issue with jquery as I have 2 different sets of icons, each of which I want to do the same thing: My primary codes are <ul> <li> <a href=""> <i class="fa fa-facebook"></i> ...

javascriptjqueryhtmlcss

Interactive input field designed for modifying, adding, and removing data in MySQL

I am working on a project where I have a simple form. However, I need to dynamically change the form action from insert to update within the same page. Additionally, I also want to display the values on the same page. Within my code, I have set up the up ...

phpjavascriptjqueryhtmlajax

Creating personalized styles for my React components with the help of styled-components

Exploring the power of styled-components for custom styling on child components has been an interesting journey for me. For instance, I recently crafted a unique card component named myCard. Take a look at how it's structured: import React from "rea ...

cssreactjsmaterial-uistyled-components

Are HTML entities ineffective in innerHTML in javascript?

Take this example: <script type="text/javascript> function showText() { var text = document.getElementById("text-input").value; document.getElementById("display").innerHTML = text; } </script> <?php $text = "<html>some ...

javascripthtml

PHP script to populate a table with images based on certain conditions

I have a table in HTML that displays results from a SQL database on the right hand side. The code snippet for populating each cell is as shown below: <tr> <td>House</td> <td><?php echo $row_buyerdetails['tod_hous ...

phphtmlsql

Creating a HTML5 canvas animation of an emoticon winking to add a fun touch to your

Currently, I am facing a challenge in animating an emoticon that was initially sketched on canvas. While following a tutorial to implement draw and clear animations using frames, I haven't been able to achieve the desired outcome. With 6 frames of the ...

javascriptjqueryhtmlanimationcanvas

JavaScript document string separation

Hi there, I'm a newbie here and could really use some assistance. I am struggling with creating a function and would appreciate any ideas... To give you an idea of what I need help with, I have a String and I want to check if it contains a specific w ...

javascripthtmlstring

Tips for resizing images to fit different screen sizes on your website

I have a website with an image that is currently responsive thanks to bootstrap. The width adjusts properly on different devices, but I want the image to crop to the left and right when it's enlarged in this specific case. I've tried various tec ...

htmlcssresponsive

Using percentages to position Div elements

Currently, I am working on an HTML page that requires a div element spanning the full width of the page. My goal is to arrange other divs within this full-width div using percentages rather than pixels. The class associated with this div is .question. Thi ...

javascriptcss

"Implementing responsive design with Bootstrap's carousel through media queries

I'm having some trouble creating a basic carousel using bootstrap because the images are not displaying full screen. Do I need to use media queries to achieve this and if so, how can I implement them? <div id="myCarousel" class="carousel slide" da ...

htmlcssbootstrap-4media-queries

The picture is not visible outside the parent container - why is it hidden?

Currently, I am working on project cards and using materialize css's image card to style them. One of the features that I particularly like is how it resizes the picture when included inside a container. This allows me to set a fixed height without wo ...

htmlcsstwitter-bootstrapmaterialize

Creating a design utilizing HTML columns with a set height and the ability to scroll horizontally

For my android project, I have a requirement to display a view (WebView) that dynamically loads content. The content will consist of <div class="content-item"> tags that are added by JavaScript to <div class="content-holder"> after the page has ...

javascripthtmlcsshorizontal-scrollingfixed-width

Gliding over the problem with the Azure line

https://i.sstatic.net/7N3hO.jpg Is there a way to hide the opacity and font on hover? I have tried using outline: 0; in my CSS but there is still a blue line lingering. Any ideas on how to remove it? If you need to see the code and the issue I'm des ...

htmlcss

Creating an interactive HTML form that updates in real-time based on user input can be achieved using vanilla JavaScript. This allows for a

I am working on a form that dynamically generates more form fields based on a user input value. <form> <input type="Number" name="delivery"> </form> For example, if the user enters '3', it should automat ...

javascripthtmlnode.jsformsinput

What is the best method to modify and access imported .css files within the WordPress style.css file?

I could use some assistance with a project involving minor edits to a WordPress website. I've hit a roadblock and need some help. The style.css file in WordPress doesn't have much CSS code, but instead imports files like this: /*Animate*/ @impo ...

csswordpresstwitter-bootstrap

What is the best way to display a unique image in a div based on the size of the

Being new to web design, I have a question about creating a webpage with a large image in the center like on GitHub's Windows page. How can I work with the image inside that particular div or area based on different screen sizes? Is it possible to mak ...

javascripthtmlcssimagejquery-plugins

Is there a way to embed HTML code within a JavaScript variable?

Embedding HTML code within Java Flow can be quite interesting For instance: Check out this JSFiddle link And here's how you can incorporate it into your script: widget.value += ""; Generating a Pro Roseic Facebook POP-UP Box through Widg ...

javascripthtml