Seeking assistance with a basic script for a side menu

Link to customize the submenu.

I am having trouble adjusting the width of the main menu to 300px and the sub-menus to 150px. Currently, both have the same width and I can't seem to change it. Can someone assist me?

Below is the code I am currently using: HTML:

<div id='cssmenu'>
<ul>
   <li class='active'><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

CSS:

/* Reset some stylesheet properties */
#cssmenu > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    line-height: 1;
}

/* Container settings */
#cssmenu > ul {
    display: block;
    position: relative;
    width: 150px;
}

    /* Styling for the list elements containing links */
    #cssmenu > ul li {
        display: block;
        position: relative;
        margin: 0;
        padding: 0;
        width: 150px;   
    }

        /* General link styling */
        #cssmenu > ul li a {
            /* Layout */
            display: block;
            position: relative;
            margin: 0;
            border-top: 1px dotted #3a3a3a;
            border-bottom: 1px dotted #1b1b1b;
            padding: 11px 20px;
            width: 110px;

            /* Typography */
            font-family:  Helvetica, Arial, sans-serif;
            color: #d8d8d8;
            text-decoration: none;
            text-transform: uppercase;
            text-shadow: 0 1px 1px #000;
            font-size: 13px;
            font-weight: 300;

            /* Background & effects */
            background: #282828;
        }

        /* Rounded corners for first link in menus/submenus */
        #cssmenu > ul li:first-child>a {
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            border-top: 0;
        }

        /* Rounded corners for last link in menus/submenus */
        #cssmenu > ul li:last-child>a {
            border-bottom-left-radius: 4px;
            border-bottom-right-radius: 4px;
            border-bottom: 0;
        }


        /* Hover state for menu/submenu links */
        #cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a {
            color: #3cc4e6;
            text-shadow: 0 1px 0 #fff;
            background: #e6e6e6;
            background: -webkit-linear-gradient(bottom, #e6e6e6, #fff);
            background: -ms-linear-gradient(bottom, #e6e6e6, #fff); 
            background: -moz-linear-gradient(bottom, #e6e6e6, #fff);
            background: -o-linear-gradient(bottom, #e6e6e6, #fff);
            border-color: transparent;
        }

        /* Arrow indicating a submenu */
        #cssmenu > ul .has-sub>a::after {
            content: '';
            position: absolute;
            top: 16px;
            right: 10px;
            width: 0px;
            height: 0px;

            /* Creating arrow using borders */
            border: 4px solid transparent;
            border-left: 4px solid #d8d8d8; 
        }

        /* Same arrow with darker color for shadow effect */
        #cssmenu > ul .has-sub>a::before {
            content: '';
            position: absolute;
            top: 17px;
            right: 10px;
            width: 0px;
            height: 0px;

            /* Creating arrow using borders */
            border: 4px solid transparent;
            border-left: 4px solid #000;
        }

        /* Changing arrow color on hover */
        #cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {
            border-left: 4px solid #3cc4e6;
        }

        #cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {
            border-left: 4px solid #fff;
        }


        /* STYLING FOR SUBMENUS */
        #cssmenu > ul ul {
            position: absolute;
            left: 150px;
            top: -9999px;
            padding-left: 5px;
            opacity: 0;
            /* Fade effect via opacity transition */
            -webkit-transition: opacity .3s ease-in;
            -moz-transition: opacity .3s ease-in;
            -o-transition: opacity .3s ease-in;
            -ms-transition: opacity .3s ease-in;
        }

        /* Showing submenu on parent link hover */
        #cssmenu > ul li:hover>ul {
            top: 0px;
            opacity: 1;
        }
htmlcsshtml-listssubmenu

Answer №1

Check out the updated CSS:

/* Resetting styles */
#cssmenu > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    line-height: 1;
}

/* Container styling */
#cssmenu > ul {
    display: block;
    position: relative;
    width: 150px;
}

/* Styling for list elements with links */
#cssmenu > ul li {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    width: 300px;   
}
    
    /* Link styling */
    #cssmenu > ul li a {
        /* Layout */
        display: block;
        position: relative;
        margin: 0;
        border-top: 1px dotted #3a3a3a;
        border-bottom: 1px dotted #1b1b1b;
        padding: 11px 20px;
        width: 260px;

        /* Typography */
        font-family:  Helvetica, Arial, sans-serif;
        color: #d8d8d8;
        text-decoration: none;
        text-transform: uppercase;
        text-shadow: 0 1px 1px #000;
        font-size: 13px;
        font-weight: 300;

        /* Background and effects */
        background: #282828;
    }

    /* Rounded corners for first link of menu/submenus */
    #cssmenu > ul li:first-child>a {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        border-top: 0;
    }

    /* Rounded corners for last link of menu/submenus */
    #cssmenu > ul li:last-child>a {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        border-bottom: 0;
    }


    /* Hover state of menu/submenu links */
    #cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a {
        color: #3cc4e6;
        text-shadow: 0 1px 0 #fff;
        background: #e6e6e6;
        background: -webkit-linear-gradient(bottom, #e6e6e6, #fff);
        background: -ms-linear-gradient(bottom, #e6e6e6, #fff); 
        background: -moz-linear-gradient(bottom, #e6e6e6, #fff);
        background: -o-linear-gradient(bottom, #e6e6e6, #fff);
        border-color: transparent;
    }

    /* Arrow indicating submenu */
    #cssmenu > ul .has-sub>a::after {
        content: '';
        position: absolute;
        top: 16px;
        right: 10px;
        width: 0px;
        height: 0px;

        /* Creating arrow using borders */
        border: 4px solid transparent;
        border-left: 4px solid #d8d8d8; 
    }

    /* Shadow effect on arrow */
    #cssmenu > ul .has-sub>a::before {
        content: '';
        position: absolute;
        top: 17px;
        right: 10px;
        width: 0px;
        height: 0px;

        /* Creating arrow using borders */
        border: 4px solid transparent;
        border-left: 4px solid #000;
    }

    /* Change arrow color on hover */
    #cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {
        border-left: 4px solid #3cc4e6;
    }

    #cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {
        border-left: 4px solid #fff;
    }


    /* SUBMENUS */
    #cssmenu > ul ul {
        position: absolute;
        left: 300px;
        top: -9999px;
        padding-left: 5px;
        opacity: 0;
        /* Fade effect with opacity transition */
        -webkit-transition: opacity .3s ease-in;
        -moz-transition: opacity .3s ease-in;
        -o-transition: opacity .3s ease-in;
        -ms-transition: opacity .3s ease-in;
    }
    #cssmenu > ul ul a {
        width:110px;
    }
    #cssmenu > ul ul ul {
        left:150px;
    }
    /* Show submenu on parent link hover */
    #cssmenu > ul li:hover>ul {
        top: 0px;
        opacity: 1;
    }

Answer №2

I have made updates to the CSS styling

#cssmenu > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    line-height: 1;
}

/* Styling for the container */
#cssmenu > ul {
    display: block;
    position: relative;
}

    /* Styling for the list elements containing links */
    #cssmenu > ul li {
        display: block;
        position: relative;
        margin: 0;
        padding: 0; 
    }

        /* General link styling */
        #cssmenu > ul li a {
            /* Layout */
            display: block;
            position: relative;
            margin: 0;
            border-top: 1px dotted #3a3a3a;
            border-bottom: 1px dotted #1b1b1b;
            padding: 11px 20px;
            width: 300px;

            /* Typography */
            font-family:  Helvetica, Arial, sans-serif;
            color: #d8d8d8;
            text-decoration: none;
            text-transform: uppercase;
            text-shadow: 0 1px 1px #000;
            font-size: 13px;
            font-weight: 300;

            /* Background & effects */
            background: #282828;
        }

        /* Applying rounded corners to first and last links */
        #cssmenu > ul li:first-child>a {
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            border-top: 0;
        }
        
        #cssmenu > ul li:last-child>a {
           border-bottom-left-radius: 4px;
           border-bottom-right-radius: 4px;
           border-bottom: 0;
        }

        /* Hover effect for menu/submenu links */
        #cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a {
            color: #3cc4e6;
            text-shadow: 0 1px 0 #fff;
            background: #e6e6e6;
            background: -webkit-linear-gradient(bottom, #e6e6e6, #fff);
            background: -ms-linear-gradient(bottom, #e6e6e6, #fff); 
            background: -moz-linear-gradient(bottom, #e6e6e6, #fff);
            background: -o-linear-gradient(bottom, #e6e6e6, #fff);
            border-color: transparent;
        }

        /* Styling the arrow for submenus */
        #cssmenu > ul .has-sub>a::after {
            content: '';
            position: absolute;
            top: 16px;
            right: 10px;
            width: 0px;
            height: 0px;
            
            /* Creating arrow using borders */
            border: 4px solid transparent;
            border-left: 4px solid #d8d8d8; 
        }
        

        #cssmenu > ul .has-sub>a::before {
            content: '';
            position: absolute;
            top: 17px;
            right: 10px;
            width: 0px;
            height: 0px;

            /* Creating secondary arrow with darker color */
            border: 4px solid transparent;
            border-left: 4px solid #000;
        }

        /* Changing arrow color on hover */
        #cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {
            border-left: 4px solid #3cc4e6;
        }

        #cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {
            border-left: 4px solid #fff;
        }


        /* STYLING SUBMENUS */
        #cssmenu > ul ul {
            position: absolute;
            left: 340px;
            top: -9999px;
            padding-left: 5px;
            opacity: 0;
            /* Opacity transition for fade effect */
            -webkit-transition: opacity .3s ease-in;
            -moz-transition: opacity .3s ease-in;
            -o-transition: opacity .3s ease-in;
            -ms-transition: opacity .3s ease-in;
         }

        #cssmenu > ul ul ul{
            left:190px; 
        }

        /* Displaying submenu on parent link hover */
        #cssmenu > ul li:hover>ul {
             top: 0px;
             opacity: 1;
         }
         
        #cssmenu > ul li ul a {
              width:150px;
         }

Here is the live demonstration.

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

Arrange data into columns on a website

In my project, I'm exploring the challenge of creating a square 2 x 2 grid alongside a rectangular column on the right-hand side. While attempting to implement a grid system for the 2 x 2 layout, I encountered issues with the alignment of the rectang ...

htmlcsscss-grid

What is the most efficient way to display a dynamic alphabetical order list?

sample code: <table width="100%" cellspacing="0" cellpadding="0" border="0" style="line-height: 1.7;"> <tbody> <?php $this->db->select('*'); $this->db->from('cm_options'); ...

phpcssmysqlcodeigniter

Is it feasible to customize the icon for the expand/collapse button in the header of jqGrid?

To begin, let me provide some context. In my view, I have 2 or more grids (jqgrid) and I aim to insert an "X" into the expand/collapse button. After several attempts, I successfully added the "X" icon to all grids using this code: .ui-icon-circle-trian ...

asp.netcssjqgrid

employing animation and iterating through each one for dynamic effect

Javascript $(document).ready(function() { $(".container").animate({left:'120px'}, 6000).queue(function(next){ $(".child").css('display', 'none'); }); }); The provided code snippet demonstrates animating a single box and t ...

javascriptjquerycssanimation

New ways to style Links in NextJs 13

I am relatively new to Next.js and I am attempting to create a menu with a hover effect using the following code: import Link from 'next/link'; const MenuItem = ({ href, label }) => ( <Link href={href} className="menu-item"> ...

cssreactjsnext.js

Visit a webpage on my site

Is it feasible to embed a website within another website? Suppose I have my index.html file. What if in the center of that file, we include an iFrame or similar element that loads , allowing users to explore Google directly on my website? ...

javascriptphphtmliframe

Selenium and PhantomJS are having trouble interpreting JavaScript code

Currently experimenting with Selenium and PhantomJS for Java search tasks, I'm facing an issue where PhantomJS fails to activate javascript. My goal is to access a webpage that utilizes javascript. Previously, this method worked well for me, but now I ...

javascriptjavahtmlseleniumphantomjs

Having difficulty adjusting the margin-top for the menu div

Why am I unable to apply margin to my a links within the div identified by id="menu". I can successfully implement margin-left, but when attempting to use margin-top or margin-bottom, it does not work as expected. I wish to adjust the position o ...

csshtmlalignmentmargin

MailJet experienced a template language issue while trying to send a message with Template [ID]

While running a test on a MailJet email template that includes a basic custom HTML code block, an error occurs in the received test email. (The live preview in the browser functions correctly) From [email protected]: An issue with the template lang ...

htmljsonfor-loopobjectmailjet

summoning the iframe from a separate window

In my current setup, I have a link that passes a source to an iframe: <a href='new.mp4' target='showVideo'></a> <iframe src='sample.jpg' name='showVideo' ></iframe> However, what I would lik ...

javascriptphphtmliframe

Is there a white outline on the Cordova Text Font?

Currently working on a Cordova app where I have encountered an issue with the text display. The problem lies in the white outline surrounding the text, which is not visually appealing. In my code, I have a div with the style attribute background-color: ye ...

csshtmlcordova

Adjusting the size of a React element containing an SVG (d3)

In my simple react app, I have the following component structure: <div id='app'> <Navbar /> <Graph /> <Footer /> </div> The Navbar has a fixed height of 80px. The Footer has a fixed height of 40px. The Graph i ...

cssreactjsd3.jssvgresize

Leveraging CSS classes for enhancing the bootstrap grid system

Forgive me for the seemingly simple question, but here is my dilemma. Presented below is the current html code: <div class="col-xs-12 col-md-6 col-lg-4"> ...stuff </div> I am wondering how to achieve the following transformation: index ...

htmlcssbootstrap-4

Integrating node.js into my HTML page

Forgive me for sounding like a newbie, but is there a simple way to integrate node.js into my HTML or perhaps include a Google API library? For example: <script>google.load(xxxx)</script> **or** <script src="xxxx"></script> ...

javascripthtmlnode.jsgoogle-api

immutable chrome sqlite data objects

I have been utilizing a sqlite DB as the storage system for a web application. I have been directly using the objects returned from queries in my application. For instance: function get_book_by_id(id,successCallback,errorCallback) { function _successC ...

javascriptsqlitehtmlgoogle-chrome

"Enhancing the aesthetics: Stylish blue borders around Bootstrap

After successfully setting up bootstrap-select, I have noticed that blue borders are showing in two specific instances: 1) within the dropdown menu 2) when a new value is selected I have made some adjustments but the issue persists. Can someone please p ...

csstwitter-bootstrapbootstrap-select

How can I incorporate dynamic data to draw and showcase graphs on my website using PHP?

I am currently working on a project that requires displaying a graph showing the profit of users per day. Currently, I have implemented code to display a static graph on my page. <script type="text/javascript" src="https://www.google.com/jsapi">< ...

javascriptphpmysqlhtmlgoogle-visualization

What other function can I combine with the foreach function?

I am working on populating the empty array named $Errors with specific items to enforce restrictions on my file upload form. My approach involves adding a <div> element as an item within the array, containing certain strings. I aim to concatenate t ...

phphtml

What is the best way to make a div stick to the inside of another div with Bootstrap?

As a newcomer to Bootstrap 4, I am curious if there is a way to affix a div to the bottom of its parent div. My structure involves using the classes .container within a .row, along with several child divs: <div class='container'> <d ...

csstwitter-bootstrapbootstrap-4

Utilizing Node and Electron to dynamically adjust CSS style properties

Having a dilemma here: I need to access the CSS properties from styles.css within Electron. Trying to use document.getElementsByClassName() won't work because Node doesn't have document. The goal is to change the color of a specific div when the ...

javascriptcssnode.jselectron