I am in the process of making an existing website designed in 2005 to be able to work well with wide-screen monitors, tablets and phones.

On the existing site, http://pettitslawnscapes.com/html/design___build.html, the menu selection Design & Build has six submenus that drop down when your mouse hovers over it. I need to do the same in the new site, http://pettitslawnscapes.com/pettitsnew/design.htm. Any ideas as to how to easily make this happen or a good website that can help me? I will be using the existing graphics for the drop-down menu.

Also notice that each menu item changes from normal to bold when your mouse hovers over them. This is done by swapping out a bold graphic for the normal one.

Thanks in advanced.

2 Years
Discussion Span
Last Post by zelrick

I am interested to this topic so gonna up this one.

I am using simple javascript in my web, I hope someone will do this in simple javascript too.

I'm not that good in coding I hope it would be understandable.

Just a share to the simple dropdown (just to have a dropdown here)

        <script type="text/javascript">
            function goToPage763(mySelect)
                            if ( mySelect.options[PageIndex2].value != "none" )
                                //this is the key code in the JavaScript to open the new page in
                                //the iframe:-
                                    frames['iframe2'].location.href = mySelect.options[PageIndex2].value;


Hello Mike,

Sorry I misunderstood this, I was looking for a javascript that connect with HTML.

But what you want can be done by HTML and CSS

So here is an example of what you want.

This is in your HTML:

<!-- dropdown container -->
<div class="dropdown">

    <!-- trigger button -->

    <!-- dropdown menu -->
    <ul class="dropdown-menu">
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>

and this in your CSS file:

.dropdown {
    position: relative;
    display: inline-block;

.dropdown .dropdown-menu {
    position: absolute;
    top: 100%;
    display: none;
    margin: 0;

     ** NEW STYLES **

    list-style: none; /** Remove list bullets */
    width: 100%; /** Set the width to 100% of it's parent */
    padding: 0;

.dropdown:hover .dropdown-menu {
    display: block;

/** Button Styles **/
.dropdown button {
    background: #FF6223;
    color: #FFFFFF;
    border: none;
    margin: 0;
    padding: 0.4em 0.8em;
    font-size: 1em;

/** List Item Styles **/
.dropdown a {
    display: block;
    padding: 0.2em 0.8em;
    text-decoration: none;
    background: #CCCCCC;
    color: #333333;

/** List Item Hover Styles **/
.dropdown a:hover {
    background: #BBBBBB;

Don't forget this code inside the <head> </head>

<link rel="stylesheet" href="MenuStyle.css">

I hope this help you, It is hover on a drop down list and show the list

If someone can do it in Javascript it will add me knowledge.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.