↓これが「li+aタグ」で作成したプルダウンです。
↓これは標準のセレクトボックスの動きです。
↓以下、「li+aタグ」で作成したプルダウンのポイントです。
【済】
・選択したリストの値を、先頭の「選択したリストの表示位置」に表示させる必要がある。
・標準のセレクトボックスはした▼がついている。
・標準のセレクトボックスはある程度の長さになると、スクロールバーがでる。
・ある画面では「…」という文字がでているっぽいので、はみ出した場合は省略文字を表示する。
【画面によって調整】
・ある画面にはめるとAタグのフォントが変わってしまうようで、何か考慮が必要そう。画面によるのでここではやらない。
・マウスホバーでリストの色が変わるようになってはいるが、標準のセレクトボックスはマウスをリストボックスから外しても最後にホバーしたリストが判定したままになっている。これは特段困らないのでやらなくても良さそう。
・スマホの場合、標準セレクトボックスはiPhoneなら「ドラムロール式」で、andoroidだとチェックボックス風のモーダルになる。一方、リスト＋アンカーのプルダウンはそうはならない。しかし、「ドラムロール式」とか見れる範囲が極端に狭かったりして、今や目新しさはないし必須じゃない。
↓これが、参考にしたサイトです。
jQueryでプルダウンメニュー（たった5行で！）
jQuery日本語リファレンス click(fn)
jQueryで特定要素以外クリック時のイベントを取得する
jQueryでselectbox風リストの作成と表示・非表示
How to Create a Beautiful Dropdown Blogroll Without JavaScript
JavaScriptとCSSでカレンダーのドロップダウンリスト（スクロールバー付）を実装する
CSSではみ出した文字を省略する
CSS入門：プルダウンメニューをカスタマイズする方法