I am making a responsive the for mobile desktop etc but when I go to check on phone and click categories. I pops up up as selection /select buttons I am after changing it to a drop down may have fome thing to do with $dropdown but don't know what else to do just starting to learn php

Code:
<?php 
if ($categories) {
    $org_html = "";
    $small_html = "";
    foreach($categories as $category)
    {
        $org_html .= "<li><a href='".$category['href']."'>".$category['name']."</a>";
        $small_html .= "<option value='".$category['href']."'>".$category['name']."</option>";
        if($category['children'])
        {
            $org_html .= "<div>";
            for ($i = 0; $i < count($category['children']);) 
            {
                $org_html .= "<ul>";
                $j = $i + ceil(count($category['children']) / $category['column']);
                for (; $i < $j; $i++) 
                    if (isset($category['children'][$i])) 
                    {
                        $org_html .= "<li><a href='".$category['children'][$i]['href']."'>".$category['children'][$i]['name']."</a></li>";
                        $small_html .= "<option value='".$category['children'][$i]['href']."'> --- ".$category['children'][$i]['name']."</option>";
                    }
                $org_html .= "</ul>";
            }
            $org_html .= "</div>";
        }
        $org_html .= "</li>";
    }
    echo "<div id='menu'><ul class='org_cat'>$org_html</ul></div>";
    echo "<div class='small_cat'><div>Categories</div><select onChange='location = this.value'><option></option><option value='$home'>Home</option>$small_html</select></div>";
} 
?>
Code:
.small_cat, .small_link {
	position: relative;
	z-index: 30;
	margin: 0px 10px 20px 10px;
}
.small_link{
	margin-bottom:0px;
}
.small_cat div, .small_link div{
	padding: 0px 16px;
	overflow: hidden;
	position: relative;
	font: 18px/40px 'PT Sans Narrow';
	color: #fff;
	text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
	text-align:center;
	text-transform:uppercase;
	font-weight:bold;
}
.small_cat div{
	background:#585858;
	border: 1px solid #000000;
	border-radius: 0px 0px 3px 3px;
	-moz-border-radius: 0px 0px 3px 3px;
	-webkit-border-radius: 0px 0px 3px 3px;
}
.small_link div{
	background: #38B0E3;
	border:1px solid #0D9FDF;
	border-radius: 3px 3px 0px 0px;
	-moz-border-radius: 3px 3px 0px 0px;
	-webkit-border-radius: 3px 3px 0px 0px;
}
.small_cat select, .small_link select {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	opacity: 0;
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
	cursor: pointer;
}
.small_cat, .small_link, .small_content{
	display:none;
}
Code:
/* Mobile Landscape Size to Tablet Portrait */
@media only screen and (max-width: 600px) {
	#container{
		width:100%;
	}
	#column-right{
		display:none;
	}
	#column-right + #content {
		margin-right:0px;
	}
	#header {
		height:220px;
	}
	#header #logo{
		top: 50px;
	}
	#header #language, #header #currency{
		width: 150px;
	}
	#header #language{
		left: 162px;
		top: 9px;
	}
	#header #currency{
		left: 5px;
		top: 5px;
	}
	#header #cart {
		top: 122px;
	}
	#header #welcome{
		top:210px;
	}
	#header #search{
		top: 180px;
	}
	#header .links{
		display:none;
	}
	
	#footer .column {
		width: 49%;
		min-height: 120px;
	}
	
	#menu > ul > li > div > ul > li > ul{
		padding-left:20px;
	}
	#menu, .org_cat, .toplinks{
		display:none;
	}
	.small_cat, .small_link{
		display:block;
	}
}