You must Sign In to post a response.
  • Category: HTML

    How to create horizontal menu with submenu in css html?

    Friends,

    how to create horizontal menu with submenu in css,html? i created horizontal menu but i can't create submenu.This is my html code

    <html>
    <title>Construction Management System</title>
    <head>
    <link rel="stylesheet" type="text/css" href="CSS_CMS.css">
    </head>
    <body>
    <div class="wrapper">
    <div class="banner">
    </div>

    <div id="menu">
    <ul>
    <li><a href='index.html'>Home</a></li>
    <li><a href='#'>Master Pages</a>
    <ul>
    <li><a href='#'>Customer Master</a></li>
    </ul>
    </li>
    <li><a href='#'>Transactions</a></li>
    <li><a href='#'>Utility</a></li>
    <li><a href='#'>Reports</a></li>
    <li><a href='#'>Contact Us</a></li>
    <li><a href='#'>Exit</a></li>
    </ul>
    </div>
    </div>
    </body>
    </html>


    this is my css file code

    .wrapper
    {
    width: 960px;
    height:640px;
    margin:0 auto;
    background-color:darkslategray;
    }
    .banner
    {

    height:150px;
    background-color:teal;
    }

    #menu
    {
    height: 30px;
    font-size: 12px;
    font-family: verdana, Geneva, sans-serif;
    font-weight: bold;
    text-align: center;
    background-color: #8AD9FF;
    border-radius: 0px;
    }
    #menu ul
    {
    height: auto;
    padding: 8px 0px;
    margin: 0px;
    }

    #menu li
    {
    display: inline;
    padding: 20px;
    }

    #menu a
    {
    text-decoration: none;
    color: #00F;
    padding: 8px 8px 8px 8px;
    }

    #menu a:hover
    {
    color: red;
    background-color: darkgreen;
    }
  • #747072
    Hi,
    try this css for your html file

    .wrapper
    {
    width: 960px;
    height:640px;
    margin:0 auto;
    background-color:darkslategray;
    }
    .banner
    {

    height:150px;
    background-color:teal;
    }
    #menu
    {
    height: 30px;
    font-size: 12px;
    font-family: verdana, Geneva, sans-serif;
    font-weight: bold;
    text-align: center;
    background-color: #8AD9FF;
    border-radius: 0px;
    }
    #menu ul
    {
    height: auto;
    padding: 8px 0px;
    margin: 0px;
    }

    #menu li
    {
    display: inline;
    padding: 20px;

    position:relative;
    padding:5px;
    text-align:center;
    border-right:1px solid white;
    display:block;
    float:left;
    }
    #menu li ul
    {
    list-style:none;
    visibility:hidden;
    margin:0px;
    position:absolute;
    left:0;
    }
    #menu li ul li
    {
    position:relative;
    float:none;
    height:auto;
    margin:0;
    text-align:left;
    text-align:center;
    }
    #menu li:hover ul
    {
    visibility:visible;
    }
    #menu a
    {
    text-decoration: none;
    color: #00F;
    padding: 8px 8px 8px 8px;
    }
    #menu ul li a:hover
    {
    color: red;
    background-color: darkgreen;
    }

    Hope it may help you.

    Regards
    Sekhar Babu,
    www.aspdotnet-sekhar.blogspot.in

  • #748572
    There are lots of Menu generators available online
    You should take a look.. :)

    http://cssmenumaker.com/

    http://css3menu.com/

    http://www.cssmenubuilder.com/home

    http://www.cssmenubuilder.com/build-horizontal-menu

    Regards,
    Nirav Prabtani (Senior Web Developer)
    Email : niravjprabtani@gmail.com
    blog : niravprabtani.blogspot.in


  • Sign In to post your comments