css - リストをラップするこの div インラインを表示するにはどうすればよいですかメニュー？

Question

この単純な css メニュー リストを div でラップし、その周りに A ボーダーを配置します。以下のリンクで、境界線がデフォルトで、メニュー リストを囲む代わりに最大幅を取ることがわかります。

#cont
{
border: 4px solid #90bade;
display: inline;
overflow: hidden;
}

私のフィドル

この div の表示モードをインラインに設定して、div で overflow:hidden スタイルで遊んでみました。リストを完全に囲むように div ボーダーを修正しますが、同時に、メニューのドロップダウン アクションを妨げます。

更新 #1 : Ritabrata の回答で指摘されているように、欠落しているビットはdisplay:inline-block; でした。また、overflow: hidden; の必要はありません。

#cont
{
border: 4px solid #90bade;
display: inline-block;
}