Index


Title 01
Add Link.
Add Link.
Add Link.
Add Link.
Title 02
Add Link.
Add Link.
Add Link.
Add Link.
Title 03
Add Link.
Add Link.
Add Link.
Add Link.
Title 04
Add Link.
Add Link.
Add Link.
Add Link.
Title 05
Add Link.
Add Link.
Add Link.
Add Link.
Title 06
Add Link.
Add Link.
Add Link.
Add Link.
Title 07
Add Link.
Add Link.
Add Link.
Add Link.
Title 08
Add Link.
Add Link.
Add Link.
Add Link.
Title 09
Add Link.
Add Link.
Add Link.
Add Link.
Title 10
Add Link.
Add Link.
Add Link.
Add Link.
Title 11
Add Link.
Add Link.
Add Link.
Add Link.

Drop down index


HTML

<section class="indexcont">
<div class="index01" style="border: 1px solid yellow;">
Title 01<br />
<div style="border: 1px solid yellow; font-size: 1.3em;">
Add Link.</div>
<div style="border: 1px solid yellow; font-size: 1.3em;">
Add Link.</div>
<div style="border: 1px solid yellow; font-size: 1.3em;">
Add Link.</div>
<div style="border: 1px solid yellow; font-size: 1.3em;">
Add Link.</div>
</div>
<div class="index01" style="border: 1px solid yellow;">
Title 02<br />
<div style="border: 1px solid yellow; font-size: 1.3em;">
Add Link.</div>
<div style="border: 1px solid yellow; font-size: 1.3em;">
Add Link.</div>
<div style="border: 1px solid yellow; font-size: 1.3em;">
Add Link.</div>
<div style="border: 1px solid yellow; font-size: 1.3em;">
Add Link.</div>
</div>
<div class="index01" style="border: 1px solid yellow;">
Title 03<br />
<div style="border: 1px solid yellow; font-size: 1.3em;">
Add Link.</div>
<div style="border: 1px solid yellow; font-size: 1.3em;">
Add Link.</div>
<div style="border: 1px solid yellow; font-size: 1.3em;">
Add Link.</div>
<div style="border: 1px solid yellow; font-size: 1.3em;">
Add Link.</div>
</div>
<div class="index01" style="border: 1px solid yellow;">
Title 04<br />
<div style="border: 1px solid yellow; font-size: 1.3em;">
Add Link.</div>
<div style="border: 1px solid yellow; font-size: 1.3em;">
Add Link.</div>
<div style="border: 1px solid yellow; font-size: 1.3em;">
Add Link.</div>
<div style="border: 1px solid yellow; font-size: 1.3em;">
Add Link.</div>
</div>
<div class="index01" style="border: 1px solid yellow;">
Title 05<br />
<div style="border: 1px solid yellow; font-size: 1.3em;">
Add Link.</div>
<div style="border: 1px solid yellow; font-size: 1.3em;">
Add Link.</div>
<div style="border: 1px solid yellow; font-size: 1.3em;">
Add Link.</div>
<div style="border: 1px solid yellow; font-size: 1.3em;">
Add Link.</div>
</div>
<div class="index01" style="border: 1px solid yellow;">
Title 06<br />
<div style="border: 1px solid yellow; font-size: 1.3em;">
Add Link.</div>
<div style="border: 1px solid yellow; font-size: 1.3em;">
Add Link.</div>
<div style="border: 1px solid yellow; font-size: 1.3em;">
Add Link.</div>
<div style="border: 1px solid yellow; font-size: 1.3em;">
Add Link.</div>
</div>
<div class="index01" style="border: 1px solid yellow;">
Title 07<br />
<div style="border: 1px solid yellow; font-size: 1.3em;">
Add Link.</div>
<div style="border: 1px solid yellow; font-size: 1.3em;">
Add Link.</div>
<div style="border: 1px solid yellow; font-size: 1.3em;">
Add Link.</div>
<div style="border: 1px solid yellow; font-size: 1.3em;">
Add Link.</div>
</div>
<div class="index01" style="border: 1px solid yellow;">
Title 08<br />
<div style="border: 1px solid yellow; font-size: 1.3em;">
Add Link.</div>
<div style="border: 1px solid yellow; font-size: 1.3em;">
Add Link.</div>
<div style="border: 1px solid yellow; font-size: 1.3em;">
Add Link.</div>
<div style="border: 1px solid yellow; font-size: 1.3em;">
Add Link.</div>
</div>
<div class="index01" style="border: 1px solid yellow;">
Title 09<br />
<div style="border: 1px solid yellow; font-size: 1.3em;">
Add Link.</div>
<div style="border: 1px solid yellow; font-size: 1.3em;">
Add Link.</div>
<div style="border: 1px solid yellow; font-size: 1.3em;">
Add Link.</div>
<div style="border: 1px solid yellow; font-size: 1.3em;">
Add Link.</div>
</div>
<div class="index01" style="border: 1px solid yellow;">
Title 10<br />
<div style="border: 1px solid yellow; font-size: 1.3em;">
Add Link.</div>
<div style="border: 1px solid yellow; font-size: 1.3em;">
Add Link.</div>
<div style="border: 1px solid yellow; font-size: 1.3em;">
Add Link.</div>
<div style="border: 1px solid yellow; font-size: 1.3em;">
Add Link.</div>
</div>
<div class="index01" style="border: 1px solid yellow;">
Title 11<br />
<div style="border: 1px solid yellow; font-size: 1.3em;">
Add Link.</div>
<div style="border: 1px solid yellow; font-size: 1.3em;">
Add Link.</div>
<div style="border: 1px solid yellow; font-size: 1.3em;">
Add Link.</div>
<div style="border: 1px solid yellow; font-size: 1.3em;">
Add Link.</div>
</div>
</section> 

CSS

/***Start---index dropdown -------------start*/ .indexcont {margin: auto; position: relative; top: -100px;}
.index01 {display: inline-block; background: rgba(211,211,211,.3); padding: 2px; margin: auto; width: 60px; height: 20px; font-size: 1em; position: relative; color: lightgrey; decoration: none; text-align: center; white-space:nowrap}
.index01 div {display: none; position: relative; background: rgba(51, 51, 51,.8); opacity: 0;}
.index01:hover div:nth-of-type(1) {display: inline; transform: translate(-55px,4px); position: absolute; width: 300px; height: 40px; z-index: 42; opacity: 1; overflow: hidden; decoration: none;}
.index01:hover div:nth-of-type(2) {display: inline; transform: translate(-55px,44px); position: absolute; width: 300px; height: 40px; z-index: 43; opacity: 1; overflow: hidden; decoration: none;}
.index01:hover div:nth-of-type(3) {display: inline; transform: translate(-55px,84px); position: absolute; width: 300px; height: 40px; z-index: 44; opacity: 1; overflow: hidden; decoration: none;}
.index01:hover div:nth-of-type(4) {display: inline; transform: translate(-55px,124px); position: absolute; width: 300px; height: 40px; z-index: 45; opacity: 1; overflow: hidden; decoration: none;}
.index01:hover div:nth-of-type(5) {display: inline; transform: translate(-55px,164px); position: absolute; width: 300px; height: 40px; z-index: 46; opacity: 1; overflow: hidden; decoration: none;}
.index01:hover div:nth-of-type(6) {display: inline; transform: translate(-55px,204px); position: absolute; width: 300px; height: 40px; z-index: 47; opacity: 1; overflow: hidden; decoration: none;}
/***End-----index dropdown -------------end*/
Subscribe to: Posts (Atom)