Is the accordion pane that contains your dropdown visible when the page loads? I ran a quick test using my simple sample and the dropdown displays well in the accordion pane. Can you modify this simple sample to match your accordion container code and see if that breaks?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
<!--The viewport meta tag is used to improve the presentation and behavior
of the samples on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"
/>
<title>Topographic Map</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/claro/claro.css">
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.esriScalebar {
padding: 20px 20px;
}
#map {
padding:0;
}
</style>
<script type="text/javascript">
var djConfig = {
parseOnLoad: true
};
</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1"></script>
<script type="text/javascript">
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
dojo.require("dijit.form.ComboBox");
dojo.require("dijit.layout.AccordionContainer");
var map;
function init() {
var initExtent = new esri.geometry.Extent({
"xmin": -122.46,
"ymin": 37.73,
"xmax": -122.36,
"ymax": 37.77,
"spatialReference": {
"wkid": 4326
}
});
map = new esri.Map("map", {
extent: esri.geometry.geographicToWebMercator(initExtent)
});
//Add the topographic layer to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service
var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
map.addLayer(basemap);
dojo.connect(map, 'onLoad', function (theMap) {
//resize the map when the browser resizes
dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
});
}
dojo.addOnLoad(init);
</script>
</head>
<body class="claro">
<div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false"
style="width: 100%; height: 100%; margin: 0;">
<div id='lp' dojotype='dijit.layout.AccordionContainer' region='left' style='width:300px;'>
<div dojotype='dijit.layout.ContentPane' title='pane1'>
Content for Pane 1
</div>
<div dojotype='dijit.layout.ContentPane' title='pane 2'>
<select id="boroughSelect" dojotype="dijit.form.ComboBox" autoComplete="true"
forceValidOption="false" onchange="executeMenuQuery(this)">
<option>Manhattan</option>
<option>Brooklyn</option>
<option>Bronx</option>
<option>Staten Island</option>
<option>Queens</option>
</select>
</div>
</div>
<div id="map" dojotype="dijit.layout.ContentPane" region="center" style="border:1px solid #000;padding:0;"></div>
</div>
</body>
</html>
