Skip to content

Instantly share code, notes, and snippets.

@pixleight
Created June 11, 2012 17:09
Show Gist options
  • Save pixleight/2911349 to your computer and use it in GitHub Desktop.
Save pixleight/2911349 to your computer and use it in GitHub Desktop.
Untitled
<div id="info">
<h1>Skyrim-inspired drop-down menu</h1>
<p>This lunchtime CSS experiment was inspired by the menu styles in the videogame <em>Skyrim</em>.</p>
</div>
<ul id="menu">
<li>
<a href="#">Parent 1</a>
<ul>
<li>
<a href="#">Child A</a>
</li>
<li>
<a href="#">Child B</a>
</li>
<li>
<a href="#">Child C</a>
</li>
</ul>
<li>
<li>
<a href="#">Parent 2</a>
<ul>
<li>
<a href="#">Child D</a>
</li>
<li>
<a href="#">Child E</a>
</li>
<li>
<a href="#">Child F</a>
</li>
<li>
<a href="#">Child G</a>
</li>
</ul>
<li>
<li>
<a href="#">Parent 3</a>
<ul>
<li>
<a href="#">Child H</a>
</li>
<li>
<a href="#">Child I</a>
</li>
<li>
<a href="#">Child J</a>
</li>
<li>
<a href="#">Child K</a>
</li>
<li>
<a href="#">Child L</a>
</li>
</ul>
<li>
<li>
<a href="#">Parent 4</a>
<ul>
<li>
<a href="#">Child M</a>
</li>
<li>
<a href="#">Child N</a>
</li>
<li>
<a href="#">Child O</a>
</li>
<li>
<a href="#">Child P</a>
</li>
<li>
<a href="#">Child Q</a>
</li>
<li>
<a href="#">Child R</a>
</li>
</ul>
<li>
</ul>
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment