Projects, Fun to Make, Fun to Use

Ever needed a quck drop down menu you could easily format and add or subtract to. The menu above is the one here described. It will always go 100% accross the parent div and auto adjusts to your list of parent tabs.

Download code here

//Created by Phil Powers as a drop in menu bar, customizable to your liking. 
//Follow the guidelines in top ph

//The following are style settings, these will alter the appearance of your menu.
$color1="#346DA1";	//primary menu color
$color2="#459CEB";	//primary menu hover color
$color4="#f9f9f9";	//primay color of dropdown	
$color3="#f1f1f1";	//color of dropdown hover
$font_color1="black";	//primary menu font color
$font_color2="black";	//primary menu font color hover
$font_color3="#346DA1"; 	//Dopdown font color
$font_color4="#459CEB"; 	//Dopdown font color hover


//These arrays are your menu items

	//this is your main menu list
	$tab_list=array("Home","Web Sites","Kodi Addons","HTML Addons","Raspberry Pi","Construction","Ministry","Store");

	//create a list like this for each dropdown
	$dlist2=array("","Zero-Nine","Blessing U","Grace Pointe Ohio","TollFree Dollars");
	$dlist3=array("Kodi Addons") ;
	$dlist4=array("Calander","Drop Down Menu");
	$dlist5=array("PBX System","Light Contoller","Garage Door Opener","Traffic Light");
	$dlist6=array("Tiny House");
	$dlist7=array("Christmas","Baby Shower","Birthday");
	$dlist8=array("Thing we Make and sell");

	//create a list like this for each dropdown for your links.
	//this is an array of your drop down lists, order is important.

	//this is array of links, order should match above array

$width=$width-($width * .05);

.dropbtn {
    	color: #eee;
    	font-size: 1vw;
    	border: none;
    	cursor: pointer;


.dropdown {
    position: relative;
    display: inline-block;
    width:<?php echo $width; ?>%;

.dropdown-content {
    display: none;
    position: absolute;
    background-color:<?php echo $color4; ?>;
    color:<?php echo $font_color3; ?>;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    color:<?php echo $font_color3; ?>;

.dropdown-content a:hover {
	background-color:rgba(0, 0, 0, 0.5);;

.dropdown:hover .dropdown-content {
    	display: block;

.dropdown:hover .dropbtn {
    background-color: <?php echo $color2; ?>;
    color:<?php echo $font_color2; ?>

foreach($tab_list as $t) {
	echo '

<div class="dropdown">
  <button class="dropbtn">' . $t . '</button>
  <div class="dropdown-content">';
     foreach($lists[$x] as $l) {
	echo '
	<a href="' . $alists[$x][$y] . '">' . $l . '</a>';
    echo '