Horizontal Menu With Vertical Submenu (html/css Only)

Question

I'm having a difficult time trying to make my submenu vertical instead of horizontal. Any help would be much appreciated. HTML:

Solution 1:

ul#menuul
{
    display:none;
    position:absolute;
    left:0;
    top:20px;
}
ul#menuli
{
    display:block;   
}

Most important changes. JSFIDDLE> http://jsfiddle.net/LSbvJ/ (You will have to tweak paddings, margins, text-align... but this is good start, I hope.)

Solution 2:

#menu {
      background-color: #206676;
      float: left;
      width: 100%;
      height: 60px;
    }
    ul#menu {
      font-size: 1.3em;
      font-weight: 600;
      margin: 005px;
      padding: 0;
      text-align: left;
    }
    ul#menuli {
      display: inline;
      list-style: none;
      padding-left: 15px;
      float: left;
    }
    ul#menulia {
      background: none;
      color: #FFF;
      text-decoration: none;
    }
    ul#menulia:hover {
      color: #FFF;
      text-decoration: none;
    }
    ul#menuul {
      display: none;
    }
    ul#menuli {
      display: block;
    }
    ul#menuli:hoverul {
      display: block;
      position: absolute;
      width: 50px;
    }
    ul#menuli:hoverullia {
      display: block;
      color: red;
    }

<ulid="menu"><li><ahref="/"title="HOME">HOME</a></li><li><ahref="/"title="ECO ENERGY">ECO ENERGY</a><ul><li><ahref="/Evaluations"title="Evaluations">Evaluations</a></li><li><ahref="/Incentives"title="Incentives">Incentives</a></li><li><ahref="/HouseFiles"title="House Files">House Files</a></li><li><ahref="/UpdateSubmissions"title="Update Submissions">Update Submissions</a>/li>

    </ul></li><li><ahref="/"title="NEW HOMES">NEW HOMES</a><ul><li><ahref="/NH"title="Evaluations">Evaluations</a></li></ul></li></ul>

Solution 3:

Just try this updated CSS.

ul#menuli:hoverul {
    display: block;
    position: absolute;
    top: 10x;
    width: 200px;
}

ul#menu {
    font-size: 1.3em;
    font-weight: 600;
    margin: 005px;
    padding: 0;
    text-align: left;
    position: relative
}

Below is a working Demo. http://jsbin.com/buculimi/1/edit

Solution 4:

<html><head><styletype="text/css"media="screen">#menu{
    width:100%;
    display:block;
    position:relative;
    height:60px;
    color:#fff;
    text-decoration:none;
    border-style:inset;
}
#menua{
    text-decoration:none;
    color:#fff;
}
#menuul {
    padding:1; margin:1; list-style:none;font-size: 1.3em;
    font-weight: 600;
}
#menuli {
    float:left; position:relative; padding-right:100; display:block;
    border:none;
}
#menuliul {
    display:none;
    position:absolute;
}
#menuli:hoverul{
    display:block;
    background:red;
    height:auto; width:8em;
}
#menuliulli{
    clear:both;
    border-style:none;
}
</style></head><body><divstyle="background-color:#206676;;width:100%;"><divid="menu"><ul><li><ahref="#"title="HOME">HOME</a></li><li><ahref="#"title="ECO ENERGY">ECO ENERGY</a><ul><li><ahref="/Evaluations"title="Evaluations">Evaluations</a></li><li><ahref="/Incentives"title="Incentives">Incentives</a></li><li><ahref="/HouseFiles"title="House Files">House Files</a></li><li><ahref="/UpdateSubmissions"title="Update Submissions">Update Submissions</a></li></ul></li><li><ahref="/"title="NEW HOMES">NEW HOMES</a><ul><li><ahref="/NH"title="Evaluations">Evaluations</a></li></ul></li></ul></div></div></body></html>

This page might help you as well: http://mrbool.com/how-to-create-menu-with-submenu-using-csshtml/26146

Html5 Playground

Horizontal Menu With Vertical Submenu (html/css Only)

Solution 1:

Solution 2:

Solution 3:

Solution 4:

Post a Comment for "Horizontal Menu With Vertical Submenu (html/css Only)"