How to add drop-down menu?

Question

1.00/5 (1 vote)

See more:

Hi,
I have below horizontal menu and I need to add drop-down for Report menu item.
please help me how to do this. Thanks.

HTML

<div id="talltabs-maroon">
	<ul>
		<li class="first"><a href="#">Home <span>Page</span></a></li>
		<li class="active"><a href="#"><span>About us</span></a></li>
		<li class="dropdown"><a class="dropbtn" href="#"> <span> Report				</span></a>
        <ul  class="dropdown-content" style="left:0">
            <li>
                <a  href="">
                <p>Valve Report</p>
                </a>
            </li>
            <li>
                 <a href="">
                 <p>Cylinder Report</p>
                 </a>
            </li>
        </ul>
        </li>
		<li class="last"><a href="#">Contact <span>Us</span></a></li>
	</ul>
</div>

css for horizontal menu

CSS

#talltabs-maroon {
    clear:left;
    float:left;
    padding:0;
    border-top:6px solid #CD324F;
    width:100%;
    overflow:hidden;
    font-family:Georgia, serif;
}
#talltabs-maroon ul {
    float:left;
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
    left:50%;
    text-align:center;
}
#talltabs-maroon ul li {
    display:block;
    float:left;
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    right:50%;
}
#talltabs-maroon ul li a {
    display:block;
    float:left;
    margin:0 1px 0 0;
    padding:30px 10px 6px 10px;
    background:#CD324F;
    text-decoration:none;
    color:#fff;
}
#talltabs-maroon ul li a:hover {
    padding:35px 10px 6px 10px;
}
#talltabs-maroon ul li.active a,
#talltabs-maroon ul li.active a:hover {
    padding:40px 10px 6px 10px;
}

What I have tried:

CSS

.dropbtn {
    list-style-type: none;
    color: white;
    font-size: 14px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: block;
}

.dropdown-content {
    list-style-type: none;
    display: none;
    position: relative;
    right: 0;
    background-color: black;
    /*background-image: url('../../Images/black-olive.jpg'); dropdowm popup*/
    min-width: 160px;
    box-shadow: 0px 8px 16px 5px rgba(0,0,0,0.2);
    z-index: 0;
    padding-right: 2px;
    margin-right: 2px;
}

    .dropdown-content a {
        color: white;
        padding: 10px 14px;
        text-decoration: none;
        display: block;
    }

        .dropdown-content a:hover {
            /*background-color: gray;*/
            color: black;
        }

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    /*background-color: #3e8e41;*/
}

Posted 11-Jul-17 18:58pm

Member 11859517

Updated 12-Jul-17 3:04am

Add a Solution

Comments

Richard Deeming 12-Jul-17 10:33am

REPOST
This is the same question you posted yesterday:
https://www.codeproject.com/Questions/1195930/Droup-down-menu-appending-to-the-main-menu-in-css[^]

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Member 11859517 · Answer 1 · 2017-07-12T03:04:00

HTML

<div style="height: 77px; width:100%; margin-top:65px;text-align:center; border-top:solid; border-top-color:#CD324F">
 <ul><li>Home</li>
  <li>About</li>
  <li>
    Portfolio
    <ul>
      <li>Web Design</li>
      <li>Web Development</li>
      <li>Illustrations</li>
    </ul>
  </li>
  <li>Blog</li>
  <li>Contact</li>
</ul>
</div>

css

CSS

body {
    font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

ul {
    text-align: left;
    display: inline;
    margin: 0;
    padding: 15px 4px 17px 0;
    list-style: none;
}

    ul li {
        display: inline-block;
        margin-right: -1px;
        position: relative;
        padding: 15px 20px;
        background: #CD324F;
        cursor: pointer;
        color: black;
        height: 40px;
        width: auto;
        text-align:center;
    }
    ul li a{
        color:black;
    }

        ul li:hover {
            background: #CD324F;
            color: #fff;
            height: 45px;
        }

        ul li a:hover {
            color: #fff;
        }

        ul li ul {
            padding: 0;
            position: absolute;
            top: 68px;
            left: 0;
            width: 160px;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
            display: none;
            opacity: 0;
            visibility: hidden;
        }

            ul li ul li {
                background: #ce5068;
                display: block;
                color: #CD324F;
                height: 35px;
            }

                ul li ul li:hover {
                    background: #CD324F;
                    height: 35px;
                }

        ul li:hover ul {
            display: block;
            opacity: 1;
            visibility: visible;
        }

Example on JSFiddle

https://jsfiddle.net/qtbcpnp2/

Member 13049972 · Answer 2 · 2017-07-11T20:52:00

<tr>
<td>
RELIGION :</td>
<td>
<select name="rel">
<option selected="" value="Default">(Please select your Religion)</option>
<option value="Buddhist">Buddhist</option>
<option value="Catholic">Catholic</option>
<option value="Christian">Christian</option>
<option value="Hindu">Hindu</option>
<option value="Muslim">Muslim</option>
<option value="Others">Others</option>
</select>
</td>
</tr>

How to add drop-down menu?

2 solutions

Solution 2

Solution 1

Add your solution here

Preview 0