css menu submenu horizontal

Question

How can I create css menu and submenu like this.

When I click or move mouse over the menu, It has a small icon at bottom

Answer 1

HTML

<ul class="nav">
   <li><a href=#><span>Main item text</span><span class="bullet"></span></a>
      <ul>
        <li><a href=#><span>Sub item text</span><span class="bullet"></span></a></li>
      </ul>
   </li>
</ul>

CSS

ul.nav li ul { position: absolute; display: none; }
ul.nav li { float: left; }
ul.nav li:hover ul { display: block; }

Ofcourse besides that you must style list properly. Here you can try how it work with bullet http://jsfiddle.net/9r4Lf/1/