Sunday 14 December 2014

Get Querystring values in jquery

 GetQueryStringParams = function (sParam) {
            var sPageURL = window.location.search.substring(1);
            var sURLVariables = sPageURL.split('&');
            for (var i = 0; i < sURLVariables.length; i++) {
                var sParameterName = sURLVariables[i].split('=');
                if (sParameterName[0] == sParam) {
                    return sParameterName[1];
                }
            }
        }
        var sID = GetQueryStringParams("id");

Wednesday 10 December 2014

Form Validation jquery

<!DOCTYPE html>
<html lang="en">
  <head>
  <title> Smart Forms - Form validation </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
    <link rel="stylesheet" type="text/css"  href="css/smart-forms.css">
    <link rel="stylesheet" type="text/css"  href="css/font-awesome.min.css">
   
   
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    <script type="text/javascript" src="js/additional-methods.min.js"></script>
   
    <!--[if lte IE 9]>  
        <script type="text/javascript" src="js/jquery.placeholder.min.js"></script>
    <![endif]-->  
   
    <!--[if lte IE 8]>
        <link type="text/css" rel="stylesheet" href="css/smart-forms-ie8.css">
    <![endif]-->
   
    <script type="text/javascript">

$(function() {

/* @custom validation method (smartCaptcha)
------------------------------------------------------------------ */

$.validator.methods.smartCaptcha = function(value, element, param) {
return value == param;
};

$( "#smart-form" ).validate({

/* @validation states + elements
------------------------------------------- */

errorClass: "state-error",
validClass: "state-success",
errorElement: "em",

/* @validation rules
------------------------------------------ */

rules: {
firstname: {
required: true
},
lastname: {
required: true
},
useremail: {
required: true,
email: true
},
website: {
required: true,
url: true
},
language: {
required: true
},
upload1:  {
required: true,
extension:"jpg|png|gif|jpeg|doc|docx|pdf|xls|rar|zip"
},
mobileos:  {
required: true
},
comment:  {
required: true,
minlength: 30
},
mobile_phone: {
require_from_group: [1, ".phone-group"]
},
home_phone: {
require_from_group: [1, ".phone-group"]
},
password:{
required: true,
minlength: 6,
maxlength: 16
},
repeatPassword:{
required: true,
minlength: 6,
maxlength: 16,
equalTo: '#password'
},
gender:{
required: true
},
languages:{
required: true
},
verification:{
required:true,
smartCaptcha:19
},
applicant_age: {
required: true,
min: 16
},
licence_no: {
required: function(element) {
return $("#applicant_age").val() > 19;
}
},
child_name: {
required: "#parents:checked"
}

},

/* @validation error messages
---------------------------------------------- */

messages:{
firstname: {
required: 'Enter first name'
},
lastname: {
required: 'Enter last name'
},
useremail: {
required: 'Enter email address',
email: 'Enter a VALID email address'
},
website: {
required: 'Enter your website URL',
url: 'URL should start with - http://www'
},
language: {
required: 'Choose a language'
},
upload1:  {
required: 'Please browse a file',
extension: 'File format not supported'
},
mobileos:  {
required: 'Please select a mobile platform'
},
comment:  {
required: 'Oops you forgot to comment',
minlength: 'Enter at least 30 characters or more'
},
mobile_phone: {
require_from_group: 'Fill at least a mobile contact'
},
home_phone: {
require_from_group: 'Fill at least a home contact'
},
password:{
required: 'Please enter a password'
},
repeatPassword:{
required: 'Please repeat the above password',
equalTo: 'Password mismatch detected'
},
gender:{
required: 'Please choose specie'
},
languages:{
required: 'Select laguages spoken'
},
verification:{
required: 'Please enter verification code',
smartCaptcha: 'Oops - enter a correct verification code'
},
applicant_age: {
required: 'Enter applicant age',
min: 'Must be 16 years and above'
},
licence_no: {
required: 'Enter licence number'
},
child_name: {
required: 'Please enter your childs name'
}

},

/* @validation highlighting + error placement
---------------------------------------------------- */

highlight: function(element, errorClass, validClass) {
$(element).closest('.field').addClass(errorClass).removeClass(validClass);
},
unhighlight: function(element, errorClass, validClass) {
$(element).closest('.field').removeClass(errorClass).addClass(validClass);
},
errorPlacement: function(error, element) {
  if (element.is(":radio") || element.is(":checkbox")) {
element.closest('.option-group').after(error);
  } else {
error.insertAfter(element.parent());
  }
}

});

});
   
    </script>
   
   
     
</head>

<body class="woodbg">

<div class="smart-wrap">
    <div class="smart-forms smart-container wrap-3">
       
        <div class="form-header header-primary">
            <h4><i class="fa fa-pencil-square"></i>Form validation</h4>
            </div><!-- end .form-header section -->
           
            <form method="post" action="/" id="smart-form">
            <div class="form-body">
               
                    <div class="spacer-b30">
                    <div class="tagline"><span> Normal validation rules </span></div><!-- .tagline -->
                    </div>
                   
                    <div class="frm-row">
                        <div class="section colm colm6">
                            <label for="firstname" class="field prepend-icon">
                                <input type="text" name="firstname" id="firstname" class="gui-input" placeholder="First name...">
                                <label for="firstname" class="field-icon"><i class="fa fa-user"></i></label>
                            </label>
                        </div><!-- end section -->
                       
                        <div class="section colm colm6">
                            <label for="lastname" class="field prepend-icon">
                                <input type="text" name="lastname" id="lastname" class="gui-input" placeholder="Last name...">
                                <label for="lastname" class="field-icon"><i class="fa fa-user"></i></label>
                            </label>
                        </div><!-- end section -->
                    </div><!-- end .frm-row section -->                                  
               
                <div class="section">
                    <label for="useremail" class="field prepend-icon">
                        <input type="email" name="useremail" id="useremail" class="gui-input" placeholder="Email address">
                            <label for="useremail" class="field-icon"><i class="fa fa-envelope"></i></label>
                        </label>
                    </div><!-- end section -->
                   
                <div class="section">
                    <label for="website" class="field prepend-icon">
                        <input type="url" name="website" id="website" class="gui-input" placeholder="Current website url">
                            <label for="website" class="field-icon"><i class="fa fa-globe"></i></label>
                        </label>
                    </div><!-- end section -->                  
                   
                    <div class="section">
                        <label class="field select">
                            <select id="language" name="language">
                                <option value="">Select language...</option>
                                <option value="EN">English</option>
                                <option value="FR">French</option>
                                <option value="SP">Spanish</option>
                                <option value="CH">Chinese</option>
                                <option value="JP">Japanese</option>
                            </select>
                            <i class="arrow double"></i>                  
                        </label>
                    </div><!-- end section -->                    
                   
                    <div class="section">
                        <label for="file1" class="field file">
                            <span class="button btn-primary"> Choose File </span>
                            <input type="file" class="gui-file" name="upload1" id="file1" onChange="document.getElementById('uploader1').value = this.value;">
                            <input type="text" class="gui-input" id="uploader1" placeholder="no file selected" readonly>
                        </label>
                    </div><!-- end  section -->
                   
                    <div class="section">
                        <label class="field select-multiple">
                          <select name="mobileos" id="mobileos" multiple>
                              <option value="0">Apple iOS </option>
                              <option value="1">Windows Mobile </option>
                              <option value="2">Google Android</option>
                              <option value="3">Tizen mobile OS</option>
                              <option value="5">Firefox OS</option>
                              <option value="6">Blackberry OS</option>
                              <option value="6">Symbian</option>
                          </select>      
                        </label>      
                    </div><!-- end  section -->                    
                   
                <div class="section">
                    <label for="comment" class="field prepend-icon">
                        <textarea class="gui-textarea" id="comment" name="comment" placeholder="Your comment"></textarea>
                            <label for="comment" class="field-icon"><i class="fa fa-comments"></i></label>
                            <span class="input-hint">
                            <strong>DO NOT:</strong> Be negative or off topic, we expect a great comment...
                            </span>  
                        </label>
                    </div><!-- end section -->
                   
                    <div class="spacer-t40 spacer-b40">
                    <div class="tagline"><span> Fill at least one  </span></div><!-- .tagline -->
                    </div>                                        

                   
                    <div class="frm-row">
                   
                        <div class="section colm colm6">
                            <label for="mobile_phone" class="field prepend-icon">
                                <input type="tel" name="mobile_phone" id="mobile_phone" class="gui-input phone-group" placeholder="Mobile number">
                                <label for="mobile_phone" class="field-icon"><i class="fa fa-mobile-phone"></i></label>
                            </label>
                        </div><!-- end section -->
                       
                        <div class="section colm colm6">
                            <label for="home_phone" class="field prepend-icon">
                                <input type="tel" name="home_phone" id="home_phone" class="gui-input phone-group" placeholder="Home number">
                                <label for="home_phone" class="field-icon"><i class="fa fa-phone"></i></label>
                            </label>
                        </div><!-- end section -->
                   
                    </div><!-- end .frm-row section -->
                                       
                    <div class="spacer-t20 spacer-b40">
                    <div class="tagline"><span> Equal -  Matching elements </span></div><!-- .tagline -->
                    </div>                  
                   
                <div class="section">
                    <label for="password" class="field prepend-icon">
                        <input type="password" name="password" id="password" class="gui-input" placeholder="Create a password">
                            <label for="password" class="field-icon"><i class="fa fa-lock"></i></label>
                        </label>
                    </div><!-- end section -->
                   
                <div class="section">
                    <label for="repeatPassword" class="field prepend-icon">
                        <input type="password" name="repeatPassword" id="repeatPassword" class="gui-input" placeholder="Repeat password">
                            <label for="repeatPassword" class="field-icon"><i class="fa fa-unlock-alt"></i></label>
                        </label>
                    </div><!-- end section -->
                   
                    <div class="spacer-t40 spacer-b40">
                    <div class="tagline"><span>  Checkboxes + Radios Group </span></div><!-- .tagline -->
                    </div>
                   
                    <div class="frm-row">
                   
                        <div class="section colm colm6 pad-r40 bdr">
                            <div class="option-group field">
                                <label for="female" class="option block">
                                    <input type="radio" name="gender" id="female" value="female">
                                    <span class="radio"></span> Female specie
                                </label>
                               
                                <label for="male" class="option block spacer-t10">
                                    <input type="radio" name="gender" id="male" value="male">
                                    <span class="radio"></span> Male specie                
                                </label>                          
                               
                                <label for="other" class="option block spacer-t10">
                                    <input type="radio" name="gender" id="other" value="other">
                                    <span class="radio"></span> Other specie                
                                </label>
                               
                            </div>
                                               
                        </div><!-- end .section section -->                              
   
                       
                        <div class="section colm colm6 pad-l40">
                            <div class="option-group field">
                           
                                <label class="option block">
                                    <input type="checkbox" name="languages" value="FR">
                                    <span class="checkbox"></span> Fluent french          
                                </label>
                         
                                <label class="option block spacer-t10">
                                    <input type="checkbox" name="languages" value="EN">
                                    <span class="checkbox"></span> Fluent english            
                                </label>
                               
                                <label class="option block spacer-t10">
                                    <input type="checkbox" name="languages" value="CH">
                                    <span class="checkbox"></span> Fluent chinese          
                                </label>                              
                               
                            </div>                      
                        </div><!-- end section -->
                       
                    </div> <!-- end .frm-row section -->
                   
                    <div class="spacer-t20 spacer-b30">
                    <div class="tagline"><span> Custom Methods </span></div><!-- .tagline -->
                    </div>
                   
                    <div class="section">
                        <div class="smart-widget sm-left sml-120">
                            <label for="verification" class="field prepend-icon">
                                <input type="text" name="verification" id="verification" class="gui-input" placeholder="Solve verification">
                                <label for="verification" class="field-icon"><i class="fa fa-shield"></i></label>
                            </label>
                            <label for="verification" class="button">15 + 4 = </label>
                        </div><!-- end .smart-widget section -->
                    </div><!-- end section -->
                   
                    <div class="spacer-t40 spacer-b30">
                    <div class="tagline"><span> Conditional validation </span></div><!-- .tagline -->
                    </div>
                   
                    <div class="section">
                    <p class="small-text fine-grey"> 1 - The applicant age must be 16 years and above </p>
                        <p class="small-text fine-grey"> 2 - For applicants above 19 years, a licence number will be required </p>
                    </div><!-- end section -->                  
                   
                    <div class="frm-row">
                   
                        <div class="section colm colm6">
                            <label for="applicant_age" class="field prepend-icon">
                                <input type="text" name="applicant_age" id="applicant_age" class="gui-input" placeholder="Applicant age">
                                <label for="applicant_age" class="field-icon"><i class="fa fa-male"></i></label>
                            </label>
                        </div><!-- end section -->
                       
                        <div class="section colm colm6">
                            <label for="licence_no" class="field prepend-icon">
                                <input type="text" name="licence_no" id="licence_no" class="gui-input" placeholder="Licence number">
                                <label for="licence_no" class="field-icon"><i class="fa fa-credit-card"></i></label>
                            </label>
                        </div><!-- end section -->
                   
                    </div><!-- end .frm-row section -->
                   
                    <div class="spacer spacer-t10 spacer-b20"> </div>
                   
                    <div class="section">
                    <p class="small-text fine-grey"> Child name will be required when you agree / tick / check that you are a parent </p>
                    </div><!-- end section -->                  
                   
                   
                  <div class="section">
                    <div class="option-group field">
                       
                            <label class="option block">
                                <input type="checkbox" name="parents" id="parents" value="parents">
                                <span class="checkbox"></span> Yes i am a parent      
                            </label>
                           
                    </div><!-- end .option-group section -->            
                    </div><!-- end section -->
                                       
                  <div class="section">
                    <label for="child_name" class="field prepend-icon">
                        <input type="text" name="child_name" id="child_name" class="gui-input" placeholder="Enter childs name">
                            <label for="child_name" class="field-icon"><i class="fa fa-female"></i></label>
                        </label>
                    </div><!-- end section -->                  
                   
                </div><!-- end .form-body section -->
                <div class="form-footer">
                <button type="submit" class="button btn-primary"> Validate Form </button>
                    <button type="reset" class="button"> Cancel </button>
                </div><!-- end .form-footer section -->
            </form>
           
        </div><!-- end .smart-forms section -->
    </div><!-- end .smart-wrap section -->
   
    <div></div><!-- end section -->

</body>
</html>

Phone number masked

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
 <script src="js/plugins/input-mask/jquery.maskedinput.js"></script>



  $("#txtPhoneNo").mask("999-999-9999");

Return First Letter Capital

 function initCap(str) {
            if (str) {
                return str.toLowerCase().replace(/(?:^|\s)[a-z]/g, function (m) {
                    return m.toUpperCase();
                });
            }
            return "";
        };

Jquery Login Validation

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login" %>

<!DOCTYPE html>
<html lang="en">
  <head>
  <title> Login </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
    <link rel="stylesheet" type="text/css"  href="css/smart-forms.css">  
    <link rel="stylesheet" type="text/css"  href="css/font-awesome.min.css">
   
      <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    <script type="text/javascript" src="js/additional-methods.min.js"></script>
    <!--[if lte IE 9]>
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>  
        <script type="text/javascript" src="js/jquery.placeholder.min.js"></script>
    <![endif]-->  
   
    <!--[if lte IE 8]>
        <link type="text/css" rel="stylesheet" href="css/smart-forms-ie8.css">
    <![endif]-->
     
</head>
     
    <script type="text/javascript">

        $(function () {

            /* @custom validation method (smartCaptcha)
            ------------------------------------------------------------------ */

            $.validator.methods.smartCaptcha = function (value, element, param) {
                return value == param;
            };

            $("#smartform").validate({

                /* @validation states + elements
                ------------------------------------------- */

                errorClass: "state-error",
                validClass: "state-success",
                errorElement: "em",

                /* @validation rules
                ------------------------------------------ */

                rules: {
                    username: {
                        required: true
                    },
                    password: {
                        required: true
                    },
                    Site: {
                        required: true,
                       
                    },                  

                },

                /* @validation error messages
                ---------------------------------------------- */

                messages: {
                    username: {
                        required: 'Enter user name'
                    },
                    password: {
                        required: 'Enter Password'
                    },
                    Site: {
                        required: 'Enter WebSite',
                     
                    },
                   

                },

                /* @validation highlighting + error placement
                ---------------------------------------------------- */

                highlight: function (element, errorClass, validClass) {
                    $(element).closest('.field').addClass(errorClass).removeClass(validClass);
                },
                unhighlight: function (element, errorClass, validClass) {
                    $(element).closest('.field').removeClass(errorClass).addClass(validClass);
                },
                errorPlacement: function (error, element) {
                    if (element.is(":radio") || element.is(":checkbox")) {
                        element.closest('.option-group').after(error);
                    } else {
                        error.insertAfter(element.parent());
                    }
                }

            });

        });

    </script>
<body class="woodbg">

<div class="smart-wrap">
    <div class="smart-forms smart-container wrap-3">
       
        <div class="form-header header-primary">
            <h4><i class="fa fa-sign-in"></i>Login</h4>
          </div><!-- end .form-header section -->
           
            <form  id="smartform" runat="server">
            <div class="form-body">            
                 
             
                    <div class="section">
                        <label for="username" class="field prepend-icon">
                            <input type="text" name="username" id="username" class="gui-input" placeholder="Enter username" runat="server">
                            <label for="username" class="field-icon"><i class="fa fa-user"></i></label>
                        </label>
                    </div><!-- end section -->                  
                   
                <div class="section">
                    <label for="password" class="field prepend-icon">
                        <input type="password" name="password" id="password" class="gui-input" placeholder="Enter password" runat="server">
                            <label for="password" class="field-icon"><i class="fa fa-lock"></i></label>
                        </label>
                    </div><!-- end section -->
                     
                        <div class="section ">
                            <label class="field select">
                                <select id="Site" name="Site" runat="server">
                                    <option value="">Select Website</option>
                                    <option value="1">OPT</option>
                                    <option value="2">Portal</option>                                  
                                </select>

                                <i class="arrow double"></i>
                            </label>
                        </div>
                <div class="section">
                        <label class="switch block">
                            <input type="checkbox" name="remember" id="remember" checked runat="server">
                            <label for="remember" data-on="YES" data-off="NO"></label>
                            <span> Keep me logged in ?</span>
                        </label>
                    </div><!-- end section -->                                                          
                   
                </div><!-- end .form-body section -->
                <div class="form-footer">
                    <asp:Button runat="server" class="button btn-primary" id="btnSubmit" OnClick="btnSubmit_Click" Text="Sign in" />
                <asp:Label ID="lblStatus" ForeColor="Red" runat="server" Text="Invalid Credentials" Visible="false"></asp:Label>
                </div><!-- end .form-footer section -->
            </form>
           
        </div><!-- end .smart-forms section -->
    </div><!-- end .smart-wrap section -->
   
    <div></div><!-- end section -->

</body>
</html>

Monday 8 December 2014

Jquery Menu

<!DOCTYPE html>
<html lang="en">
<head>

    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <style>
        body
        {
            margin: 0px;
            padding: 0px;
            background: #e74c3c;
            font-family: 'Lato', sans-serif;
        }

        h1
        {
            margin: 2em 0px;
            padding: 0px;
            color: #fff;
            text-align: center;
            font-weight: 100;
            font-size: 50px;
        }

        nav
        {
            width: 750px;
            margin: 1em auto;
        }

        ul
        {
            margin: 0px;
            padding: 0px;
            list-style: none;
        }

            ul.dropdown
            {
                position: relative;
                width: 100%;
            }

                ul.dropdown li
                {
                    font-weight: bold;
                    float: left;
                    width: 180px;
                    position: relative;
                    background: #ecf0f1;
                }

                ul.dropdown a:hover
                {
                    color: #000;
                }

                ul.dropdown li a
                {
                    display: block;
                    padding: 20px 8px;
                    color: #34495e;
                    position: relative;
                    z-index: 2000;
                    text-align: center;
                    text-decoration: none;
                    font-weight: 300;
                }

                    ul.dropdown li a:hover,
                    ul.dropdown li a.hover
                    {
                        background: #3498db;
                        position: relative;
                        color: #fff;
                    }


                ul.dropdown ul
                {
                    display: none;
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 180px;
                    z-index: 1000;
                }

                    ul.dropdown ul li
                    {
                        font-weight: normal;
                        background: #f6f6f6;
                        color: #000;
                        border-bottom: 1px solid #ccc;
                    }

                        ul.dropdown ul li a
                        {
                            display: block;
                            color: #34495e !important;
                            background: #eee !important;
                        }

                            ul.dropdown ul li a:hover
                            {
                                display: block;
                                background: #3498db !important;
                                color: #fff !important;
                            }

        .drop > a
        {
            position: relative;
        }

            .drop > a:after
            {
                content: "";
                position: absolute;
                right: 10px;
                top: 40%;
                border-left: 5px solid transparent;
                border-top: 5px solid #333;
                border-right: 5px solid transparent;
                z-index: 999;
            }

            .drop > a:hover:after
            {
                content: "";
                border-left: 5px solid transparent;
                border-top: 5px solid #fff;
                border-right: 5px solid transparent;
            }
    </style>
    <script>
        var maxHeight = 400;

        $(function () {

            $(".dropdown > li").hover(function () {

                var $container = $(this),
                    $list = $container.find("ul"),
                    $anchor = $container.find("a"),
                    height = $list.height() * 1.1,       // make sure there is enough room at the bottom
                    multiplier = height / maxHeight;     // needs to move faster if list is taller

                // need to save height here so it can revert on mouseout          
                $container.data("origHeight", $container.height());

                // so it can retain it's rollover color all the while the dropdown is open
                $anchor.addClass("hover");

                // make sure dropdown appears directly below parent list item  
                $list
                    .show()
                    .css({
                        paddingTop: $container.data("origHeight")
                    });

                // don't do any animation if list shorter than max
                if (multiplier > 1) {
                    $container
                        .css({
                            height: maxHeight,
                            overflow: "hidden"
                        })
                        .mousemove(function (e) {
                            var offset = $container.offset();
                            var relativeY = ((e.pageY - offset.top) * multiplier) - ($container.data("origHeight") * multiplier);
                            if (relativeY > $container.data("origHeight")) {
                                $list.css("top", -relativeY + $container.data("origHeight"));
                            };
                        });
                }

            }, function () {

                var $el = $(this);

                // put things back to normal
                $el
                    .height($(this).data("origHeight"))
                    .find("ul")
                    .css({ top: 0 })
                    .hide()
                    .end()
                    .find("a")
                    .removeClass("hover");

            });

        });



    </script>
</head>
<body>
    <!--Made with Love by Larry Geams-->

    <h1>Solution for Long Drop Down Items</h1>

    <nav>
        <ul class="dropdown">
            <li class="drop"><a href="#">Really Tall Menu</a>
                <ul class="sub_menu">
                    <li><a href="#">Lorem</a></li>
                    <li><a href="#">Ipsum</a></li>
                    <li><a href="#">Dolor</a></li>
                    <li><a href="#">Lipsum</a></li>
                    <li><a href="#">Consectetur </a></li>
                    <li><a href="#">Duis</a></li>
                    <li><a href="#">Sed</a></li>
                    <li><a href="#">Natus</a></li>
                    <li><a href="#">Excepteur</a></li>
                    <li><a href="#">Voluptas</a></li>
                    <li><a href="#">Voluptate</a></li>
                    <li><a href="#">Malorum</a></li>
                    <li><a href="#">Bonorum</a></li>
                    <li><a href="#">Nemo</a></li>
                    <li><a href="#">Quisquam</a></li>
                    <li><a href="#">Adipisci </a></li>
                    <li><a href="#">Excepteur</a></li>
                    <li><a href="#">Consectetur </a></li>
                    <li><a href="#">Duis</a></li>
                    <li><a href="#">Voluptate</a></li>
                    <li><a href="#">Ipsum</a></li>
                    <li><a href="#">Dolor</a></li>
                    <li><a href="#">Lipsum</a></li>
                </ul>
            </li>
            <li class="drop"><a href="#">Kinda Tall Menu</a>
                <ul class="sub_menu">
                    <li><a href="#">Lorem</a></li>
                    <li><a href="#">Ipsum</a></li>
                    <li><a href="#">Dolor</a></li>
                    <li><a href="#">Lipsum</a></li>
                    <li><a href="#">Consectetur </a></li>
                    <li><a href="#">Duis</a></li>
                    <li><a href="#">Sed</a></li>
                    <li><a href="#">Natus</a></li>
                    <li><a href="#">Excepteur</a></li>
                    <li><a href="#">Voluptas</a></li>
                    <li><a href="#">Voluptate</a></li>
                    <li><a href="#">Malorum</a></li>
                    <li><a href="#">Bonorum</a></li>
                    <li><a href="#">Nemo</a></li>
                    <li><a href="#">Quisquam</a></li>

                </ul>
            </li>
            <li class="drop"><a href="#">Average Menu</a>
                <ul class="sub_menu">
                    <li><a href="#">Lorem</a></li>
                    <li><a href="#">Ipsum</a></li>
                    <li><a href="#">Dolor</a></li>
                    <li><a href="#">Lipsum</a></li>
                    <li><a href="#">Consectetur </a></li>
                </ul>
            </li>
            <li><a href="#">No Menu</a>
            </li>
        </ul>
    </nav>
</body>
</html>