1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

Need Help to Create Sub menu

Discussion in 'Web Development' started by monikathegreat, Jan 15, 2015.

  1. monikathegreat

    monikathegreat New Member

    Hi,

    Please help me to create sub-menu in this page,please help.

    ------------------------------
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Vintage </title>
    <meta charset="utf-8">
    <meta name="description" content="Your description">
    <meta name="keywords" content="Your keywords">
    <meta name="author" content="Your name">
    <link rel="stylesheet" href="css/style.css">
    <link rel="icon" href="images/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
    <script src="js/jquery.js"></script>
    <script src="js/jquery-migrate-1.1.1.js"></script>
    <script src="js/bgstretcher.js"></script>
    <script>
    $(function(){
    // Initialize Backgound Stretcher
    $('BODY').bgStretcher({
    images: ['product/banner/1.jpg','product/banner/2.jpg','product/banner/3.jpg','product/banner/4.jpg','product/banner/5.jpg'],
    imageWidth:800,
    imageHeight: 600,
    resizeProportionally:true,
    slideDirection: 'N',
    slideShowSpeed: 1000,
    transitionEffect: 'fade',
    sequenceMode: 'normal',
    pagination: '#nav'

    });
    });
    </script>
    <!--[if lt IE 8]>
    <div style='text-align:center'><a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://www.theie6countdown.com/img/upgrade.jpg"border="0"alt=""/></a></div>
    <![endif]-->
    <!--[if lt IE 9]>
    <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">
    <script src="js/html5shiv.js"></script>
    <link href='//fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'>
    <link href='//fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
    <link href='//fonts.googleapis.com/css?family=Open+Sans:600' rel='stylesheet' type='text/css'>
    <link href='//fonts.googleapis.com/css?family=Open+Sans:700' rel='stylesheet' type='text/css'>
    <![endif]-->
    </head>
    <body>
    <div class="extra-block1">
    <!--==============================row-top=================================-->
    <div class="row-top">
    <div class="main">
    <ul class="list-soc">
    <li><a href=""><img alt="" src="images/soc-icon1.png"></a></li>
    <li></li>
    </ul>
    </div>
    </div>

    <!--==============================header=================================-->

    <header>
    <div class="row-nav">
    <div class="main">
    <h1 class="logo"><a href="index.html"><img alt="Vintage" src="images/logo.png"></a></h1>
    <nav>
    <ul class="menu">
    <li class="current"><a href="index.html">Home</a></li>
    <li><a href="about-us.html">About Us</a></li>
    <li><a href="sunglass.html">Sunglasses</a></li>
    <li><a href="frames.html">Frames</a></li>
    <li><a href="contact-us.html">Contacts</a></li>
    </ul>
    </nav>
    <div class="clear"></div>
    </div>
    </div>
    </header>
    </div>
    <div class="block">
    <div class="nav-buttons">
    <div id="nav">&nbsp;</div>
    </div>
    <div class="row-1">
    <div class="container_12">
    <div class="wrapper">
    <article class="grid_4">
    <figure class="box-1"><img src="images/page1-img1.jpg" alt="" />
    <figcaption>About us <a href="about-us.html"></a></figcaption>
    </figure>
    </article>
    <article class="grid_4">
    <figure class="box-1"><img src="images/page1-img2.jpg" alt="" />
    <figcaption>Sunglasses <a href="sunglasses.html"></a></figcaption>
    </figure>
    </article>
    <article class="grid_4">
    <figure class="box-1"><img src="images/page1-img3.jpg" alt="" />
    <figcaption>Frames <a href="frames.html"></a></figcaption>
    </figure>
    </article>
    </div>
    </div>
    </div>

    <!--==============================footer================================-->
    <footer>
    <div class="main aligncenter">
    <div class="privacy"> 2014 <span>|</span> <strong>Website designed by <a href=""></a></strong> </div>
    </div>
    </footer>
    </div>
    </body>
    </html>

    ----------------------css file code.......
    @import"reset.css";
    @import"grid.css";
    @import url(http://fonts.googleapis.com/css?family=Noto+Sans);
    body {
    font:12px/19px Arial, Helvetica, sans-serif;

    color:#848383;
    position:relative;
    min-width:1036px;
    background:#000
    }
    html, body {
    height:100%;
    }
    html {
    min-width:100%
    }
    /* Global Structure---------------------------------------- */
    .main {
    margin:0 auto;
    width:940px;
    position:relative;
    }
    .container_12 {
    position:relative;
    }
    /*----- txt,links,lines,titles -----*/

    .box-1{
    border-radius:13px;
    -moz-border-radius:13px;
    -webkit-border-radius:13px;
    position:relative;
    padding-bottom:12px
    }
    .box-1 img{
    width:100%;
    border-radius:13px 13px 0 0;
    -moz-border-radius:13px 13px 0 0;
    -webkit-border-radius:13px 13px 0 0;
    }

    .box-1 figcaption{
    background:#cd96c9;
    position:absolute;
    display:block;
    bottom:0;
    left:0;
    right:0;
    font-size:20px;
    line-height:22px;
    color:#fff;
    padding:12px 70px;
    text-align:center;
    border-radius:0 0 13px 13px;
    -moz-border-radius:0 0 13px 13px;
    -webkit-border-radius:0 0 13px 13px;
    }
    .box-1 figcaption a{
    background:url(../images/marker-1.png) no-repeat 0 0;
    width:31px;
    height:31px;
    display:block;
    position:absolute;
    top:8px;
    right:39px}
    .box-1 figcaption a:hover{background-position:0 bottom}
    h1, h2, h3, h4, h5, h6 {
    color:#fff;
    position:relative;
    line-height:1em;
    font-weight:normal
    }
    h1 {
    font-size:32px;
    line-height:34px;
    }
    h2 {
    font-size:30px;
    line-height:32px;
    padding-bottom:28px
    }
    h3 {
    font-size:36px;
    font-family: 'Noto Sans', sans-serif;
    text-decoration:underline;
    padding-bottom:46px}
    h4 {
    font-size:20px;
    line-height:24px;
    color:#ef97cc;
    font-family:Georgia, "Times New Roman", Times, serif;
    padding:14px 0 10px;

    }
    h4 a{color:#ef97cc;}

    h5 {
    font-size:20px;
    line-height:22px;
    color:#7c7c7c;
    padding-bottom:30px
    }
    h6 {
    font-size:16px;
    line-height:18px;
    }
    a {
    text-decoration:none;
    cursor:pointer
    }
    a:focus {
    outline:none;
    }
    a:hover {
    text-decoration:underline
    }
    .clear {
    clear:both;
    line-height:0;
    font-size:0;
    overflow:hidden;
    height:0;
    width:100%;
    margin:0;
    padding:0;
    display:block;
    }
    .wrapper {
    width:100%;
    overflow:hidden;
    position:relative;
    }
    .extra-wrap {
    overflow:hidden;
    display:block;
    }
    p {color:#fff;
    padding-bottom:19px;
    }

    .fleft {
    float:left
    }
    .fright {
    float:right
    }
    .alignright {
    text-align:right
    }
    .aligncenter {
    text-align:center
    }
    .overflow {
    overflow:hidden
    }
    .relative {
    position:relative;
    }
    .img-indent {
    float:left;
    margin:8px 20px 0 0;
    }

    .block {
    position:relative;
    z-index:100}
    .extra-block,
    .extra-block1 {
    min-height:100%;
    margin: 0 auto -38px;
    position:relative;
    }
    .extra-block{background:url(../images/tail-bg-cont.png) repeat-x 0 bottom}
    .extra-block1{ margin: 0 auto -5%;}

    /**********row-top*************/
    .row-top{overflow:hidden;background:url(../images/tail-bg-top.png);
    padding:28px 0 17px;
    position:relative;
    z-index:10}
    .list-soc{float:right;margin-right:6px}
    .list-soc li{float:left;margin-left:8px;}
    .list-soc li a{display:block;
    opacity: 1;
    filter: alpha(opacity=100);}
    .list-soc li a:hover{
    opacity: 0.7;
    filter: alpha(opacity=70);}
    /**********bgstretcher*************/
    .bgstretcher {
    background: black;
    overflow: hidden;
    width: 100%;
    position: fixed !important;
    z-index: 1;
    top: 0;
    left: 0;
    }
    .bgstretcher UL,
    .bgstretcher UL LI {
    position: absolute;
    top: 0;
    left: 0;
    z-index:1;
    }
    .bgstretcher UL,
    .bgstretcher UL LI {
    margin: 0;
    padding: 0;
    list-style: none;
    }
    .bgstretcher-area,.bgstretcher-page{height:100%}
    .nav-buttons{text-align:center;padding-bottom:17px;}
    #nav{overflow:hidden;display:inline-block}
    #nav li{float:left;overflow:hidden;margin:0 10px}
    #nav li a{display:block;background:url(../images/pags.png) no-repeat 0 0;
    width:19px;height:19px;
    line-height:0;font-size:0;
    }
    #nav li a:hover,#nav li.showPage a{background-position: 0 bottom}
    /*********************************header*************************************/

    header {
    position:relative;
    z-index:20;
    }
    header h1 {
    z-index:10;
    display:block;
    float:left;
    padding:0}

    .row-nav {
    background:url(../images/tail-bg-nav.png);
    padding:6px 0 11px
    }
    nav{float:right;padding:12px 0 0 0}
    .menu {
    font-size:0;
    line-height:0;
    padding:0;
    z-index:99;
    position:relative;
    margin-right:21px;
    }
    .menu > li {
    position:relative;
    float:left;
    margin-left:11px;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    background:url(../images/point.png)}
    .menu li a{
    color:#b3adad;
    font-size:18px;
    line-height:20px;
    display:block;
    position:relative;
    text-decoration:none !important;
    padding:7px 12px 9px;
    font-family: 'Noto Sans', sans-serif;
    }
    .menu li.current,
    .menu li:hover {
    background:#cd97c9;
    }
    .menu li.current a,
    .menu li:hover a{
    color:#fff
    }
    /********************** Content style ************************/
    section#content {
    position:relative;
    z-index:10;
    padding:92px 0;

    }
    .border-vert{background:url(../images/border-vert.png) repeat-y 477px 0}
    .img-rounded img{
    border-radius:13px;
    -moz-border-radius:13px;
    -webkit-border-radius:13px;}
    .img-rounded1 img{
    border-radius:8px;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;}
    .img-indent{margin:39px 0 35px}
    .row-1{background:url(../images/tail-bg-top.png);padding:21px 0 23px}
    .main-block{width:1036px;
    margin:0 auto;background:url(../images/tail-cont.png);
    padding:38px 0;
    border-radius:13px;
    -moz-border-radius:13px;
    -webkit-border-radius:13px;
    min-height: 565px;
    }

    /********************** links & buttons ************************/
    .link-1 {
    display:inline-block;
    color:#f4bfdf;
    }
    .button {
    display:inline-block;
    font-family: 'Noto Sans', sans-serif;
    color:#fff;
    font-size:17px;
    line-height:1.2em;
    background:#ae81aa;
    padding:6px 12px 7px;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    margin-top:2px
    }
    .button:hover {
    background:#000;
    text-decoration:none;
    }
    /* Lists */
    .list-services{}
    .list-services > li{padding-top:6px}
    .list-services > li:first-child{padding:0;}
    /* Lists */
    .list {
    padding:0 0 27px
    }
    .list li {
    margin-bottom:2px;
    line-height:16px;
    }
    .list li a {
    color:#fff;
    font-size:14px;
    background:url(../images/marker-2.png) no-repeat 1px 5px;
    padding:0 0 0 18px;
    }
    /*----- es-carousel -----*/
    .es-carousel-wrapper {
    position: relative;
    z-index: 99;
    }
    .es-carousel {
    overflow: hidden;
    }
    .es-carousel ul {
    display: none;
    overflow:hidden
    }
    .es-carousel ul li {
    height: 100%;
    float: left;
    display: block;
    width:300px
    }
    .es-carousel ul li figure{margin-bottom:26px}
    .es-nav {
    right: 0;
    bottom: -30px;
    position: absolute;
    }
    .es-nav span {
    display: block;
    line-height: 0;
    font-size: 0;
    width: 32px;
    height: 33px;
    text-indent: -5000px;
    z-index: 99;
    cursor: pointer;
    display:inline-block !important;

    }
    .es-nav span.es-nav-next {
    background: url(../images/next.png) no-repeat 50% 50% #a97ca5;
    border-radius:0 6px 6px 0;
    -moz-border-radius:0 6px 6px 0;
    -webkit-border-radius:0 6px 6px 0;
    border-left:1px solid #cbadc8
    }
    .es-nav span.es-nav-prev {
    background: url(../images/prev.png) no-repeat 50% 50% #a97ca5;
    border-radius:6px 0 0 6px ;
    -moz-border-radius:6px 0 0 6px ;
    -webkit-border-radius:6px 0 0 6px ;
    border-right:1px solid #735470

    }
    .es-nav span:hover {background-color:#92538d}
    /* Lightbox image */
    .magnifier {
    position:relative;
    overflow:hidden;
    display:inline-block;
    }
    .magnifier img {
    position:relative;
    z-index:2;
    opacity: 1;
    filter: alpha(opacity=100);

    }
    .magnifier span {
    display:block;
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:url(../images/fancybox/magnify.png) center center no-repeat;
    z-index:1;
    }

    /*----- map -----*/
    .map {
    margin:0 0 31px;

    }
    .map iframe {
    height:259px;
    overflow: hidden;
    width:100%;
    border-radius:20px;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    }
    /*----- address -----*/
    .mail-1 {
    color:#fff;
    display:inline-block;
    text-decoration:underline;
    }
    .mail-1:hover {
    text-decoration:none
    }
    dl.address dt{padding-bottom:18px}
    dl.address dt span {
    display:block;
    }
    dl.address dt,dl.address dd {
    font-size:14px;
    line-height:18px;
    color:#848383;}
    dl.address dd span {
    display:inline-block;
    width:100px;
    }
    /***** contact form *****/
    #contact-form {
    position: relative;
    vertical-align: top;
    z-index: 1;
    margin: -2px 0 0;
    }
    #contact-form div {
    overflow: hidden;
    }
    #contact-form fieldset {
    border: none;
    padding: 0;
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 10;
    }
    #contact-form label {
    display: block;
    min-height: 45px;
    position: relative;
    margin: 0;
    padding: 0;
    float: left;
    width: 100%;
    }
    #contact-form .message {
    min-height: 313px;
    display: block !important;
    width: 100%;
    }
    #contact-form input,
    #contact-form textarea {
    font-family:Arial, Helvetica, sans-serif;
    font-weight:normal;
    border: 1px solid #49413d;
    background: url(../images/tail-input.png);
    padding: 5px 15px;
    margin: 0;
    font-size: 16px;
    line-height: 20px !important;
    color: #b0adac;
    outline: none;
    width: 220px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    float: left;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }
    #contact-form input {
    height: 30px;
    }
    #contact-form input:focus,
    #contact-form textarea:focus {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    }
    #contact-form .area .error {
    float: none;
    }
    #contact-form textarea {
    width: 100%;
    height: 273px;
    resize: none;
    overflow: auto;
    }
    #contact-form .success {
    border: 1px solid #49413d;
    background: #000;
    display: none;
    position: absolute;
    left: 0;
    font-family:Arial, Helvetica, sans-serif;
    top: 0;
    color: #fff;
    font-size: 18px;
    line-height: 22px;
    text-align: center;
    text-transform: none;
    width: 100%;
    z-index: 20;
    padding: 12px 0;
    }
    #contact-form .success span {
    display: block;
    text-align: center;
    padding: 26px 10px;
    }
    #contact-form .success strong {
    font-weight: normal;
    display: block;
    color: #807c79;
    }
    #contact-form .error,
    #contact-form .empty {
    color: #f00;
    font-size: 11px;
    line-height: 1.27em;
    display: none;
    overflow: hidden;
    padding: 2px 4px 0px 0;
    text-transform: none;
    position: absolute;
    bottom: 28px;
    left: 223px;
    }
    #contact-form .message .error,
    #contact-form .message .empty {
    bottom: 22px;
    left:0;
    }
    .buttons-wrapper {
    position: relative;
    }
    .buttons-wrapper a {
    margin-right: 48px;
    cursor: pointer;
    }

    /******************** Footer ******************/
    footer {
    padding:9px 0;
    background:#000
    }
    .privacy {
    color:#fcf9f9;
    font-size:12px;
    line-height:20px;
    }
    .privacy span{color:#747373;margin:0 4px}
    .privacy strong{color:#747373;font-weight:normal;}
    .privacy strong a{color:#747373}
    .privacy a {
    font-size:12px;
    color:#fcf9f9;
    display:inline-block;
    }

    -------
    Regards
    Monika Verma
     
    monikathegreat, Jan 15, 2015
    #1