Skip to content

Instantly share code, notes, and snippets.

/index.html

Created May 14, 2014 13:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonymous/db6efe057c7ea2e2556d to your computer and use it in GitHub Desktop.
Save anonymous/db6efe057c7ea2e2556d to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by fakhar.
Raw
index.html
<div class="nav">
<ul>
<li><a href="#">گزینه </a></li>
<li><a href="#">گزینه </a>
<ul>
<li><a href="#">گزینه </a></li>
<li><a href="#">گزینه </a></li>
<li><a href="#">گزینه </a></li>
<li><a href="#">گزینه </a>
<ul>
<li><a href="#">گزینه </a></li>
<li><a href="#">گزینه </a>
<ul>
<li><a href="#">گزینه </a>
<ul>
<li><a href="#">گزینه </a></li>
<li><a href="#">گزینه </a></li>
</ul>
</li>
<li><a href="#">گزینه </a>
<ul>
<li><a href="#">گزینه </a></li>
<li><a href="#">گزینه </a>
<ul>
<li><a href="#">گزینه </a></li>
<li><a href="#">گزینه </a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">گزینه </a>
<ul>
<li><a href="#">گزینه </a>
<ul>
<li><a href="#">گزینه </a>
<ul>
<li><a href="#">گزینه </a></li>
<li><a href="#">گزینه </a></li>
</ul>
</li>
<li><a href="#">گزینه </a>
<ul>
<li><a href="#">گزینه </a></li>
<li><a href="#">گزینه </a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">گزینه </a></li>
</ul>
</li>
<li><a href="#">گزینه </a>
<ul>
<li><a href="#">گزینه </a></li>
<li><a href="#">گزینه </a>
<ul>
<li><a href="#">گزینه </a>
<ul>
<li><a href="#">گزینه </a></li>
<li><a href="#">گزینه </a></li>
</ul>
</li>
<li><a href="#">گزینه </a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">گزینه </a></li>
<li><a href="#">گزینه </a></li>
</ul>
</li>
<li><a href="#">گزینه </a></li>
<li><a href="#">گزینه </a>
<ul>
<li><a href="#">گزینه </a></li>
<li><a href="#">گزینه </a>
<ul>
<li><a href="#">گزینه </a></li>
<li><a href="#">گزینه </a></li>
</ul>
</li>
<li><a href="#">گزینه </a>
<ul>
<li><a href="#">گزینه </a></li>
<li><a href="#">گزینه </a></li>
</ul>
</li>
<li><a href="#">گزینه </a>
<ul>
<li><a href="#">گزینه </a></li>
<li><a href="#">گزینه </a></li>
</ul>
</li>
<li><a href="#">گزینه </a></li>
<li><a href="#">گزینه </a></li>
</ul>
</li>
<li><a href="#">گزینه </a></li>
<li><a href="#">گزینه </a></li>
</ul>
</li>
<li><a href="#">گزینه </a></li>
<li><a href="#">گزینه </a>
<ul>
<li><a href="#">گزینه </a></li>
<li><a href="#">گزینه </a></li>
<li><a href="#">گزینه </a></li>
<li><a href="#">گزینه </a>
<ul>
<li><a href="#">گزینه </a></li>
<li><a href="#">گزینه </a>
<ul>
<li><a href="#">گزینه </a></li>
<li><a href="#">گزینه </a></li>
</ul>
</li>
<li><a href="#">گزینه </a>
<ul>
<li><a href="#">گزینه </a></li>
<li><a href="#">گزینه </a></li>
</ul>
</li>
<li><a href="#">گزینه </a>
<ul>
<li><a href="#">گزینه </a></li>
<li><a href="#">گزینه </a></li>
</ul>
</li>
<li><a href="#">گزینه </a></li>
<li><a href="#">گزینه </a></li>
</ul>
</li>
<li><a href="#">گزینه </a></li>
<li><a href="#">گزینه </a></li>
<li><a href="#">گزینه </a></li>
</ul>
</li>
<li><a href="#">گزینه </a></li>
<li><a href="#">گزینه </a>
<ul>
<li><a href="#">گزینه </a>
<ul>
<li><a href="#">گزینه </a>
<ul>
<li><a href="#">گزینه </a></li>
<li><a href="#">گزینه </a></li>
</ul>
</li>
<li><a href="#">گزینه </a></li>
<li><a href="#">گزینه </a></li>
</ul>
</li>
<li><a href="#">گزینه </a></li>
<li><a href="#">گزینه </a>
<ul>
<li><a href="#">گزینه </a></li>
<li><a href="#">گزینه </a>
<ul>
<li><a href="#">گزینه </a></li>
<li><a href="#">گزینه </a>
<ul>
<li><a href="#">گزینه </a></li>
<li><a href="#">گزینه </a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">گزینه </a>
<ul>
<li><a href="#">گزینه </a></li>
<li><a href="#">گزینه </a></li>
</ul>
</li>
<li><a href="#">گزینه </a>
<ul>
<li><a href="#">گزینه </a></li>
<li><a href="#">گزینه </a></li>
</ul>
</li>
<li><a href="#">گزینه </a></li>
<li><a href="#">گزینه </a></li>
</ul>
</li>
<li><a href="#">گزینه </a></li>
<li><a href="#">گزینه </a></li>
</ul>
</li>
<li><a href="#">گزینه </a></li>
</ul>
</div>
Raw
style.css
html {
direction:rtl;
}
.nav {
background:#444;
}
/*.nav ul */
.nav ul {
list-style:none;
margin:0px;
padding:0;
}
.nav ul li ul {
position:absolute;
width:200px;
background:#333;
display:none;
z-index:9999999;
box-shadow:1px 1px 5px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4);
-o-box-shadow:1px 1px 5px rgba(0, 0, 0, 0.4);
-khtml-box-shadow:1px 1px 5px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:1px 1px 5px rgba(0, 0, 0, 0.4);
}
.nav ul li ul li ul {
background:#900;
margin-right:190px;
margin-top:-28px;
}
.nav ul li ul li ul li ul {background:#041;}
.nav ul li ul li ul li ul li ul{background:#026;}
.nav ul li ul li ul li ul li ul li ul {background:#520;}
.nav ul li:hover ul,
.nav ul li:hover ul li:hover ul,
.nav ul li:hover ul li:hover ul li:hover ul,
.nav ul li:hover ul li:hover ul li:hover ul li:hover ul,
.nav ul li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul
{display:block;}
.nav ul li:hover ul li ul,
.nav ul li:hover ul li:hover ul li ul,
.nav ul li:hover ul li:hover ul li:hover ul li ul,
.nav ul li:hover ul li:hover ul li:hover ul li:hover ul li ul
{display:none;}
.nav ul>li {
display:inline-block;
padding:0;
margin:0;
border-left:1px #333 solid;
white-space:nowrap;
position:relative;
}
/*.nav ul li*/
.nav ul li ul li {
display:block;
width:200px;
}
.nav ul li:hover {
background:#333;
}
.nav ul li ul li:hover {
background:#900;
}
.nav ul li ul li ul li:hover {
background:#041;
}
.nav ul li ul li ul li ul li:hover {
background:#026;
}
.nav ul li ul li ul li ul li ul li:hover {
background:#520;
}
.nav ul li ul li ul li ul li ul li ul li:hover {
background:#603;
}
/*.nav ul li a */
.nav ul li a {
display:block;
padding:5px 10px;
margin:0;
color:#bbb;
text-decoration:none;
}
.nav ul li a:hover {
color:#fff;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment