#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    4
    Rep Power
    0

    Exclamation CSS Navigation Submenu advice


    Hey guys,

    Hoping for a little help here. I'm fairly amateur when it comes to CSS but I managed to put a nice navigation menu onto my current website as you can see here:
    adamsinteriors.us/indextest.php

    The next step was to add sub menus to this navigation, so for example "Living Room" would have a vertical sub menu to the right side of it with links like "Sofas" "Chairs" etc....

    I can't seem to figure out how to add sub menus, hoping for some big help! If you guys need the CSS its located at:
    adamsinteriors.us/ourcss2test.css

    Need this navigation to be finished by Monday as my boss will be back in town, so feeling the pressure haha. Thanks a lot guys!
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    298
    Rep Power
    8
    I just looked at the website. You managed to get it working?

    Regards,

    NM.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    4
    Rep Power
    0
    Not yet unfortunately. I've been tinkering around with it, but I just can't get this navigation to have sub menus pop out on the side.

    Any advice is much appreciated Nanomech.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    4
    Rep Power
    0
    In case you need it here is the code for the menu itself:

    <nav>
    <div class="menu-item alpha">
    <h4><a href="#"><b>HOME</b></a></h4>

    </div>

    <div class="menu-item">
    <h4><a href="#"><b>MERCHANDISE</b></a></h4>
    <ul>
    <li><a href="#">Living Room</a>
    <!-- Start of the sub menu of living room-->
    <ul class="menu-item2">
    <li><a href="#" target="_blank">chair</a></li>
    <li><a href="#" target="_blank">setee</a></li>
    <li><a href="#" target="_blank">corner units</a></li>
    <li><a href="#" target="_blank">coffee table</a></li>
    <li><a href="#" target="_blank">storage</a></li>
    </ul>
    </li>
    <li><a href="#">Occasionals</a></li>
    <li><a href="#">Bedroom</a></li>
    <li><a href="#">Dining Room</a></li>
    <li><a href="#">Home Entertainment</a></li>
    <li><a href="#">Home Office</a></li>
    <li><a href="#">Bars & Stools</a></li>
    <li><a href="#">Accessories</a></li>
    <li><a href="#">Area Rugs</a></li>
    <li><a href="#">Outdoor Living</a></li>
    <li><a href="#">Lighting</a></li>
    <li><a href="#"><b><span style="color:red">Clearance Items</span></b></a></li>
    </ul>

    </div>

    <div class="menu-item">
    <h4><a href="#"><b>DESIGN STUDIO</b></a></h4>

    </div>

    <div class="menu-item">
    <h4><a href="#"><b>ABOUT US</b></a></h4>
    <ul>
    <li><a href="#">Phone</a></li>
    <li><a href="#">Email</a></li>
    <li><a href="#">Location</a></li>
    <li><a href="#">Phone</a></li>
    <li><a href="#">Email</a></li>
    <li><a href="#">Location</a></li>
    <li><a href="#">Phone</a></li>

    </ul>
    </div>

    <div class="menu-item">
    <h4><a href="#"><b>CONTACT US</b></a></h4>
    <ul>
    <li><a href="#">Phone</a></li>
    <li><a href="#">Email</a></li>
    <li><a href="#">Location</a></li>
    <li><a href="#">Phone</a></li>
    <li><a href="#">Email</a></li>
    <li><a href="#">Location</a></li>


    </ul>
    </div>
    </nav>





    And here is the CSS code: (sorry if its messy!)

    nav {

    font-family: Calibri;
    line-height: 2.5;
    margin: 0px auto; /*for display only*/
    width: 200px;
    -webkit-box-shadow: 2px 2px 1px rgba(0,0,0,0.2);
    -moz-box-shadow: 2px 2px 1px rgba(0,0,0,0.2);
    box-shadow: 2px 2px 1px rgba(0,0,0,0.2);
    }

    .menu-item {
    background: #fff;
    width: 200px;
    }



    /*Menu Header Styles*/
    .menu-item h4 {
    color: #fff;
    font-size: 11px;
    text-align:center;
    letter-spacing:1px;
    font-weight: 500;
    padding: 7px 12px;
    background: #ffffff;
    }

    .menu-item h4 a {
    color: white;
    letter-spacing:2px;
    background: linear-gradient(top, #ff002c 0%,#6d0019 100%); /* W3C */
    filter: progidXImageTransf display: block;
    text-decoration: none;
    width: 170px;
    }


    /*Menu Header Styles*/
    .menu-item h4 {
    border-bottom: 1px solid rgba(0,0,0,0.1);
    border-top: 1px solid rgba(255,255,255,0.2);
    color: #000;
    font-size: 11px;
    font-weight: 500;
    padding: 7px 12px;

    /*Gradient*/
    background: #a90329; /* Old browsers */
    background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
    background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
    filter: progidXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
    }

    .menu-item h4:hover {
    background: #cc002c; /* Old browsers */
    background: -moz-linear-gradient(top, #ff002c 0%, #6d0019 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff002c), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ff002c 0%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ff002c 0%,#6d0019 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ff002c 0%,#6d0019 100%); /* IE10+ */
    orm.Microsoft.gradient( startColorstr='#ff002c', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
    }

    /*First Item Styles*/
    .alpha p {
    font-size: 13px;
    padding: 8px 12px;
    color: #aaa;
    }

    /*ul Styles*/
    .menu-item ul {
    background: #fff;
    font-size: 13px;
    line-height: 23px;
    list-style-type: none;
    overflow: hidden;
    padding: 0px;
    }

    .menu-item ul a {
    margin-left: 20px;
    text-decoration: none;
    color: teal;
    display: block;
    width: 200px;
    }

    /*li Styles*/
    .menu-item li {
    border-bottom: 1px solid #eee;
    }

    .menu-item li:hover {
    background: #eee;
    }


    /*ul Styles*/
    .menu-item ul {
    background: #fff;
    font-size: 13px;
    line-height: 23px;
    height: 0px; /*Collapses the menu*/
    list-style-type: none;
    overflow: hidden;
    padding: 0px;
    }

    /*ul Styles*/
    .menu-item ul {
    background: #fff;
    font-size: 13px;
    line-height: 23px;
    height: 0px;
    list-style-type: none;
    overflow: hidden;
    padding: 0px;

    /*Animation*/
    -webkit-transition: height 1s ease;
    -moz-transition: height 1s ease;
    -o-transition: height 1s ease;
    -ms-transition: height 1s ease;
    transition: height 1s ease;
    }

    .menu-item:hover ul {
    height: 293px;
    }






    .menu-item ul {
    list-style-type: none;
    margin-top: 0;
    padding: 0;

    }


    .menu-item2 ul li {
    width: 400px;
    position: absolute;
    float:right;



    }
    .menu-item ul ul {
    position: absolute;
    left: 150px;
    width:200px;
    z-index: 9999;
    top: 0;
    }

    .menu-item ul ul {
    display: none;
    }
    .menu-item ul li:hover ul {
    display: block;
    }


    .menu-item a {
    display: inline-block; /* 'block' causes gaps in IE6 */
    width: 200px; /* for IE6 */

    }
  8. #5
  9. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    298
    Rep Power
    8
    Change the sub nav to position relative and then left: 200px; BUT BUT BUT -- because you have a declaration of 'overflow: hidden' on several elements, the sub level menu is disappearing.

    I didn't venture into fixing it but I hope this helps.

    Kind regards,

    NM.
  10. #6
  11. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    298
    Rep Power
    8
    To be more precise, it's this declaration: .menu-item ul.

    Download firebug as well if you haven't got it.

    Regards,

    NM.

IMN logo majestic logo threadwatch logo seochat tools logo