<select>にMaterialDesignLiteのmdl-menu classを指定するとselectが消えてしまう。
以下のようにangularJSのサンプルプログラムに、MDLをマウントして書きました。
include.html:
<DOCUTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>Angular JS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-message-format.min.js"></script>
<script src="js/include.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-cookies.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
</head>
<body ng-controller="MyController as my">
<form class="mdl-layout__content">
<label class="mdl-typography--font-regular" for="temp">テンプレート：</label>
<select class="mdl-menu" id="temp" name="temp" ng-model="my.template" ng-options="t.url as t.title for t in my.templates">
<option value="">
以下から選択してください。
</option>
</select>
<div class="mdl-card mdl-cell mdl-cell--12-col" ng-include="my.template" onload="my.onload()"></div>
</form>
</body>
</html>
include.js:
angular.module('myApp', [])
.controller('MyController', function() {
this.templates = [
//テンプレート情報（オプションラベルと読み込み先URL）
{ title: 'execution', url: 'templates/execution.html' },
{ title: 'tempo', url: 'templates/tempo.html' }
];
//テンプレートを読み込んだ際に実行されるコード
this.onload = function() {
console.log(this.template);
};
});
tempo.html:
<dl>
<dt>アッチェレランド</dt>
<dd>だんだんはやく</dd>
<dt>リタルダンド</dt>
<dd>だんだんおそく</dd>
<dt>ピュウ モッソ</dt>
<dd>今までよりもはやく</dd>
<dt>テンポ ルバート</dt>
<dd>はやさを柔軟に伸縮させて</dd>
</dl>
execution.html:
<dl>
<dt>マルカート</dt>
<dd>ひとつひとつの音をはっきりと演奏する</dd>
<dt>ストリンジェンド</dt>
<dd>だんだんせきこんで</dd>
<dt>レガート</dt>
<dd>音の間を切れ目なくなめらかに演奏する</dd>
<dt>トレモロ</dt>
<dd>急速に反復して演奏する</dd>
</dl>
include.htmlのように、selectにclass="mdl-menu"等と書いてしまうと、表示が消えてしまいます。そのため、MaterialDesignで指定されているような動きを持ったSELECTBOXを作れなくて困っています。デモでは
demo.html
<a class="android-link android-link-menu mdl-typography--font-light" id="developers-dropdown">
For Developers
<i class="material-icons">arrow_drop_up</i>
</a>
<ul class="mdl-menu mdl-js-menu mdl-menu--top-left mdl-js-ripple-effect" for="developers-dropdown">
<li class="mdl-menu__item">App developer resources</li>
<li class="mdl-menu__item">Android Open Source Project</li>
<li class="mdl-menu__item">Android SDK</li>
<li class="mdl-menu__item">Android for Work</li>
</ul>
と記載しており、動いております。（動き的にはこれは左下から右上に動きますが、実際にはプルダウンさせたいので、左上から右下や上から下にrippleさせたいなと思っています）
MaterialDesignではMenuの項目で以下のリンクのような説明をしており、何かしら方法があると思っています。
https://www.google.com/design/spec/components/menus.html#menus-simple-menus
MaterialDesignLiteのMenuでは以下のリンクのように説明しています。