Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 1 of 1
  1. #1
    Junior Member
    Join Date
    Feb 2015
    Posts
    7
    Member #
    45559

    formatting a submenu : needing some guidance

    It was necessary to add submenus to an already existing menu , as it can be seen below I nested it but the original .css was not written to accomodate submenus.
    The submenu is not formatted as the menu so that it hurts the layout.
    Can someone please help me out ? Thanks.



    ............
    <div class="navigation">
    <nav>
    <ul class="sf-menu">
    <li><a href="index.html">Home</a></li>

    <li >

    <a href="index-1.html">Séries</a>

    <ul>
    <li><a href="olhar.html">Olhar</a></li>
    <li><a href="intemperies.html">Intempéries</a></li>
    <li><a href="pensamento.html">Pensamento</a></li>
    </ul>

    </li>



    <li><a href="index-3.html">Agenda</a></li>
    <li><a href="index-2.html">Betto</a></li>
    <li><a href="index-4.html">Contato</a></li>
    </ul>
    </nav>



    ........................
    menu.css
    ..........................

    .navigation {
    z-index: 999;
    position: relative;
    }

    .select-menu {
    display: none !important;
    }

    .navigation .sf-menu {
    z-index: 990;
    text-align: left;
    position: relative;
    }

    nav {
    position:relative;
    padding: 0;
    }

    .sf-menu ul {
    position:absolute;
    top:-999px;
    display:none;
    }

    .sf-menu>li {
    display: block;
    position: relative;
    float: left;
    padding: 2px 0 1px;
    font: 30px/40px 'Economica', sans-serif;;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #34393d;
    }

    .sf-menu>li+li {
    }

    .sf-menu>li>ul>li {
    float: none;
    position: static;
    }

    .sf-menu>li>a{
    position: relative;
    color: #fff;
    border-left: 1px solid #fff;
    display: block;
    padding: 27px 48px 31px 49px;
    }

    .sf-menu>li.sfHover>a, .sf-menu>li.current>a, .sf-menu>li>a:hover {
    color: #d9593f;
    }

    .sf-menu>li>ul>li>a.sf-with-ul:after {
    content: '';
    font-family: 'FontAwesome';
    position: absolute;
    width: 5px;
    font-size: 13px;
    line-height: 13px;
    font-weight: normal;
    right: 20px;
    left: 50%;
    ;
    color: #fff;
    bottom: -6px;
    pointer-events: none;
    z-index: 999;
    }

    .sf-menu>li>a.sf-with-ul:after {
    content: '';
    font-family: 'FontAwesome';
    position: absolute;
    width: 5px;
    left: 50%;
    ;
    font-size: 15px;
    line-height: 13px;
    font-weight: normal;
    color: #fff;
    bottom: 10px;
    pointer-events: none;
    z-index: 999;
    }


    /*================================>> 2 Level <<========================================*/
    .sf-menu>li ul {
    left: 50%;
    ;
    z-index: 999;
    width: 109px;
    background-color: #222;
    top: 83px;
    padding-bottom: 9px;
    }



    .sf-menu li ul li {
    position: relative;
    text-align: center;
    float: none !important;
    }

    .sf-menu li ul li+li {
    }



    .sf-menu li ul li a{
    position: static;
    font-size: 13px;
    line-height: 30px;
    z-index: 999;
    color: #fff;
    font-weight: normal;
    }


    .sf-menu li li a:hover,
    .sf-menu li.sfHover li.sfHover>a {
    color: #9b3334;
    }

    /*================================>> 3 Level <<========================================*/
    .sf-menu>li ul li ul{
    position: absolute;
    left: 109px;
    margin-left: 0;
    top: -9px;
    padding-top: 13px;
    padding-bottom: 15px;
    }

    .sf-menu li ul ul li+li {
    margin-top: 5px;
    }

    .sf-menu li ul ul li a {
    display: block;
    line-height: 20px;
    padding: 3px 0 2px;
    }

    .sf-menu li ul ul li a:hover {
    color: #fff;
    background-color: #9b3334;
    }

  2.  


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:42 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com