Magento :: Mini Login Form in header section

Let’s open app/design/frontend/your_package/your_theme/layout/customer.xml 
and just add the following line after <customer_logged_out>

<reference name="header">
            <block type="customer/form_login" name="header_customer_form_mini_login"  template="customer/form/mini.login.phtml"/>
        </reference>

Like:

<customer_logged_out>
        <reference name="header">
            <block type="customer/form_login" name="header_customer_form_mini_login"  template="customer/form/mini.login.phtml"/>
        </reference>
        <!---<reference name="right">
            <block type="customer/form_login" name="customer_form_mini_login" before="-" template="customer/form/mini.login.phtml"/>
        </reference>-->
        <reference name="top.links">
            <action method="addLink" translate="label title" module="customer"><label>Log In</label><url helper="customer/getLoginUrl"/><title>Log In</title><prepare/><urlParams/><position>100</position></action>
        </reference>
        <remove name="reorder"></remove>
    </customer_logged_out>

Now open app/design/frontend/your_package/Your_theme/template/page/html/header.phtml and add the following lines where yoy want to display login button:

<div id="header-login" class="" style="position:relative;">
            <?php if (! Mage::getSingleton('customer/session')->isLoggedIn()): ?<?php echo $this->__('Login') ?>
            <?php echo $this->getChildHtml('header_customer_form_mini_login') ?>
            <?php else: ?>
          <a href="<?php echo Mage::helper('customer')->getLogoutUrl(); ?>" title="Log Out" class="login"><?php echo $this->__('Log Out') ?></a>
          <?php endif; ?>
        </div>

And, lastly, open app/design/frontend/your_package/your_theme/template/customer/form/mini.login.phtml and modify the file according the following file:

<style>
 #dropdown
 {
  position: absolute;
    border:1px solid #ccc;
    padding:20px;
  top: 20px;
  left: 0px;
  visibility: hidden;
    background:white;
    z-index:1111;
 }
 #header-login:hover #dropdown
 {
  visibility: visible;
 }
</style>
<div class="block block-login" id="dropdown">
    <div class="block-title">
        <strong><span><?php echo $this->__('Login') ?></span></strong>
    </div>
    <form action="<?php echo $this->getUrl('customer/account/loginPost'); ?>" method="post">
        <?php echo $this->getBlockHtml('formkey'); ?>
        <div class="block-content">
            <label for="mini-login"><?php echo $this->__('Email:') ?></label><input type="email" autocapitalize="off" autocorrect="off" spellcheck="false" name="login[username]" id="mini-login" class="input-text" />
            <label for="mini-password"><?php echo $this->__('Password:') ?></label><input type="password" name="login[password]" id="mini-password" class="input-text" />
            <div class="actions">
                <button type="submit" class="button"><span><span><?php echo $this->__('Login') ?></span></span></button>
            </div>
        </div>
    </form>
</div>

Note: In the customer.xml I am using core/template block instead of customer/form_login. The reason for this is that the latter sets the page title to ‘Customer login‘ on all pages it’s being displayed on.

As i am using different block, so now i can’t use methods of the customer/form_login block. Because we’re using $this->getUrl(‘customer/account/loginPost’) as a form action instead of $this->getPostActionUrl().