Drop Down Menu With Pure CSS

Direct code:

HTML

<div id="navtre">
<ul class="levl-one">
<li><a href="/about/" title="about">about</a></li>
<li><a href="/contact/" title="contact">contact</a></li>
<li><a href="/feeds/latest/" title="subscribe">subscribe</a></li>
<li><a href="/Test1/" title="Test1page">Test1</a>
  <ul class="level-two">
    <li><a href="/Test1/testsub/" title="test1subpage">Test1sub</a></li>
  </ul>
</li>
<li><a href="/Test2/" title="Test2 page">Test2</a>
  <ul class="levl-two">
    <li><a href="/Test2/subpage2/" title="Testsubpage2">Testsubpage2</a></li>
</ul></li>

</ul>
</div>

CSS

levl-one {display: inline; position: relative; }

.levl-one {display: none; position: absolute; left: 0; top: 1em; /* adjust as necessary */ }

.levl-one:hover .levl-two {display: block; }

0 comments

Read More