How to create this menu

HTML & CSS
1

How to make this expandable menu as like image.

Visit : acceptsms.000webhostapp.com/demo to view and view I am using this code for that menu but not work:

HTML

<div id="ulMenuList" class="urbangreymenu">
<h3 class="headerbar"><a title="About Us">About Us</a></h3>
<ul class="submenu">
<li><a href="#" title="Organization">Organization</a></li>
<li><a href="#" title="Management team">Management team</a></li>
</ul>
<h3 class="headerbar"><a title="Commercial Information">Commercial Information</a></h3>
<ul class="submenu">
<li><a href="#" title="Applicable Policies">Applicable Policies</a></li>
</ul>
<h3 class="headerbar"><a title="Tariff Regulations">Tariff Regulations</a></h3>
<ul class="submenu">
<li><a href="#" title="Tariff Regulations">Tariff Regulations</a></li>
</ul>
</div>

CSS

<style type="text/css">
        /* Some list and link styling */
        
        .urbangreymenu
        {
            font-family: Verdana;
            font-size: 11px;
            margin: 0;
            margin: 0 0 0 0px;
            width: 200px;
        }
        
        
        /* Some list and link styling */
        
        .urbangreymenu .headerbar
        {
            margin-bottom: 0px;
            margin-top: 3px; /* text-transform: uppercase; */
            padding: 0 0 0 0;
        }
        .urbangreymenu ul
        {
            padding: 0;
            margin: 0;
            list-style-type: none;
            margin-bottom: 0px;
            padding: 0px 0 0px 0;
        }
        .urbangreymenu ul li
        {
            width: 200px;
            margin: 0;
            padding: 0;
            border-bottom: 1px #d2dbea solid;
            padding: 2px 0 2px 0;
            font-weight: normal;
        }
        .urbangreymenu ul li a, ul li a:visited
        {
            display: block;
            text-decoration: none;
            height: 15px;
            font-size: 10px;
            padding: 3px 0 3px 8px;
        }
        .urbangreymenu ul li
        {
            border-left: 20px solid #69c;
            width: 150px;
            margin-bottom: 0;
        }
        .urbangreymenu ul li a
        {
            display: block;
            color: #369;
            display: block;
            text-decoration: none;
            height: 15px;
            font-size: 10px;
            padding: 3px 0 3px 8px;
            width: 170px;
        }
        .urbangreymenu ul li a:hover
        {
            display: block;
            color: #369;
            background-color: #eee;
            padding: 3px 0 3px 8px;
            font-size: 10px;
        }
        .urbangreymenu li
        {
            list-style-type: none;
        }
        .urbangreymenu h2
        {
            margin-top: 1.5em;
        }
        
        .urbangreymenu h3.headerbar
        {
            font-size: 10px;
        }
        /* Header links styling */
        .urbangreymenu h3.headerbar a
        {
            color: Navy;
            display: block; /*border-top: 1px solid #36a;
		border-right: 1px solid #36a;*/
            background: #ddd url('images/down.png') no-repeat 98% 50%;
            padding: 5px 6px;
            text-decoration: none;
        }
        .urbangreymenu h3.headerbar a:hover
        {
            color: #fff;
            background: #69c url('images/down.png') no-repeat 98% 50%;
            border-left: 20px solid #69c;
        }
        .urbangreymenu h3.selected a
        {
            background: #69c url('images/up.png') no-repeat 98% 50%;
            color: #fff;
            border-left: 20px solid #69c; /*padding: 3px 6px;*/
        }
        .urbangreymenu h3.selected a:hover
        {
            background: #69c url('images/up.png') no-repeat 98% 50%; /*color: #36a;*/
            color: #fff;
            border-left: 20px solid #69c;
        }
        .style1
        {
            text-align: right;
        }
    </style>

JavaScript

Don't having JavaScript 😢😢😢
2

I don’t see your HTML.

3

It’s there, but it’s all on one line, making it hard to read.

That page has multiple problems, including more than one <body></body> section, and <title> and <style> tags within the <body></body> sections. The first thing to do is to run the page through the Validator and fix the errors.

1 Like
4

Please correct it. Minimum you should understand what I want to saying you?

5

It’s your code. If you want it to work, then the first step is to correct the errors. Nobody is going to rewrite your code for you.

The Validator says there are 42 errors. I suggest you fix the first few, then validate again, as sometimes later errors are cleared when earlier ones are fixed. Continue like this until all the errors have been corrected. If you don’t understand a particular error message, then post here for more help. We are happy to help, but not to do your work for you.

1 Like
6

It has been explained to you multiple times that we will not do your work for you, but we will help when you get stuck.

7

Continued at Expandable Menu Issue