<!DOCTYPE html>
<html>
 <style>
body {
 background: white;
 font-size:22px;
 line-height: 32px;
 color: #ffffff;
 word-wrap:break-word !important;
    font-family: 'Quicksand', sans-serif;
 margin: 0;
 padding: 0;
}
h1 {
 font-size: 60px;
 text-align: center;
 color: #FFF;
 margin-top: 150px;
    font-family: 'Russo One', sans-serif;
 }
h1 span {
 color: #007bff;
}
#container {
 margin: 0 auto;
}
 
nav {
 margin: 0px 0;
 background-color: #007bff;
}
nav ul {
 padding: 0;
        margin: 0;
 list-style: none;
 position: relative;
 } 
nav ul li {
 display:inline-block;
 background-color: #007bff;
 }
nav a {
 display:block;
 padding:0 10px; 
 color:white;
 font-size:20px;
 line-height: 50px;
 text-decoration:none;
}
nav a:hover { 
 background-color: #1941B9; 
}
nav ul ul {
 display: none;
 position: absolute; 
 top: 50px; 
} 
nav ul li:hover > ul {
 display:inherit;
} 
nav ul ul li {
 width:230px;
 float:none;
 display:list-item;
 position: relative;
}
nav ul ul ul li {
 position: relative;
 top:-50px; 
 left:230px;
}
nav ul ul li {
 border: 1px solid white;
} 
li > a:after { content:  ' ▼'; }
li > a:only-child:after { content: ''; }
 </style>
<head>
  <meta charset="UTF-8">
  <title>Pure CSS DropDown Menu</title>
      <link rel="stylesheet" href="style.css">
</head>
<body> 
<div id="container">
    <nav>
        <ul>
            <li><a href="index">Home</a></li>
            <li><a href="#">Master</a>
            <ul style="width: 300px;">
                <li><a style="color:white; font-size:18px;" href="../customer/index">Customer Master [Dr.]</a></li>
                <li><a style="color:white; font-size:18px;" href="../supplier/index">Supplier Master [Cr.]</a></li>
                <li><a style="color:white; font-size:18px;" href="../account/index">Account Master [Dr. and Cr]</a></li>
                <li><a style="color:white; font-size:18px;" href="../segment/index">Segment Master</a></li>
                <li><a style="color:white; font-size:18px;" href="../product/index">Product Master</a></li>
                <li><a style="color:white; font-size:18px;" href="../custdiscount/index">Customer Discount Master</a></li>
                <li><a style="color:white; font-size:18px;" href="../suppdiscount/index">Supplier Discount Master</a></li>
                <li><a style="color:white; font-size:18px;" href="../noofrows/index">Edit Number of Rows to Show</a></li>
                <li><a style="color:white; font-size:18px;" href="../timeout/index">Edit Time Out</a></li>
            </ul>        
            </li>
            <li data-role='dropdown'>
            <a href='#'>TRANSACTION</a>
            <ul>
                <li id='sub'>
                    <a href='#'>Purchase</a>
                     <ul>
                         <li><a href="../pruchase/index">Purchase</a></li>
                        <li><a href="../pruchase/index">Purchase Debit Note GST</a></li>
                        <li><a href="../pruchase/index">Purchase Debit Note W/O GST</a></li>
                        <li><a href="../pruchase/index">Purchase Credit Note GST</a></li>
                        <li><a href="../pruchase/index">Purchase Credit Note W/O GST</a></li>
                        <li><a href="../paymentsb/index">Pyements ( Bank )</a></li>
                        <li><a href="../paymentsc/index">Pyements ( Cash )</a></li>
                    </ul>                         
                </li>
                <li id='sub'>
                    <a href='#'>Sales</a>
                        <ul>
                            <li><a href="../invoice/index">Sales</a></li>
                            <li><a href="../invoice/index">Customer Debit Note GST</a></li>
                            <li><a href="../invoice/index">Customer Debit Note W/O GST</a></li>
                            <li><a href="../invoice/index">Customer Credit Note GST</a></li>
                            <li><a href="../invoice/index">Customer Credit Note W/O GST</a></li>
                            <li><a href="../receiptsb/index">Receipts ( Bank )</a></li>
                            <li><a href="../receiptsc/index">Receipts ( Cash )</a></li>
                        </ul>                         
                </li>
                    <li><a href="../order/index">Order</a></li>
                    <li><a href="../invoice/phpinfo">PHP Information</a></li>
            </ul>
        </li>
        </ul>
    </nav> 
</div> 
</body>
</html>