​

Rabu, 20 November 2013

Macam macam Menu Dropdown Pada Blog Part 2


Untuk cara pemasangan menu dropdown di bawah ini klik disini»

4. Blue Center Drop Bar

Blue Center Drop Bar

Code Html

<div class="nav">
<div class="table">
<ul class="select"><li><a href="#"><b>Sample</b></a></li></ul>
<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<br />

Code Css

.nav {
height:35px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8PPtxQSO68egxBWnTLI1VadTiYN_e02gZ4MlbVyxYPxBS_m-dnGVvoccKPCKO6xTWljKtR-dJ2js65MdcF80K58XPpuiTzQITHHYoZqVH3ZRz5fzyh61hs_PaciLfRVf_VHLMdl5tNs_F/s1600/bg.gif) repeat-x;
position:relative;
font-family:arial, verdana, sans-serif;
font-size:11px;
width:100%;
z-index:100;
margin:0;
padding:0;
}
.nav .table {
display:table;
margin:0 auto;
}
.nav .select,
.nav .current {
margin:0;
padding:0;
list-style:none;
display:table-cell;
white-space:nowrap;
}
.nav li {
margin:0;
padding:0;
height:auto;
float:left;
}
.nav .select a {
display:block;
height:35px;
float:left;
font-weight:bold;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8PPtxQSO68egxBWnTLI1VadTiYN_e02gZ4MlbVyxYPxBS_m-dnGVvoccKPCKO6xTWljKtR-dJ2js65MdcF80K58XPpuiTzQITHHYoZqVH3ZRz5fzyh61hs_PaciLfRVf_VHLMdl5tNs_F/s1600/bg.gif);
padding:0 30px 0 30px;
text-decoration:none;
line-height:35px;
white-space:nowrap;
color:#2b3238;
}
.nav .select a:hover,
.nav .select li:hover a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzchEbjrw9gN6KMXJvjbZpV3wcC62viMil-Zn7cNq-3SwYhMJ8rdCUIhNNUWidq7dZA8ESsoGFbjyLCuMQamH4d-IkfQIlY-GfC8vvneSf1mTYXwfIuocuSZ9nwf1FujACf5cxSsGXx8EU/s1600/hover.gif);
padding:0 0 0 15px;
cursor:pointer;
color:#2b3238;
}
.nav .select a b{
font-weight:bold;
}
.nav .select a:hover b,
.nav .select li:hover a b {
display:block;
float:left;
padding:0 30px 0 15px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzchEbjrw9gN6KMXJvjbZpV3wcC62viMil-Zn7cNq-3SwYhMJ8rdCUIhNNUWidq7dZA8ESsoGFbjyLCuMQamH4d-IkfQIlY-GfC8vvneSf1mTYXwfIuocuSZ9nwf1FujACf5cxSsGXx8EU/s1600/hover.gif) right top;
cursor:pointer;
}
.nav .select_sub {
display:none;
}
/* IE6 only */
.nav table {
border-collapse:collapse;
margin:-1px;
font-size:1em;
width:0;
height:0;
}
.nav .sub {
display:table;
margin:0 auto;
padding:0;
list-style:none;
}
.nav .sub_active .current_sub a,
.nav .sub_active a:hover {
background:transparent;
color:#2b3238;
}
.nav .select :hover .select_sub,
.nav .current .show {
display:block;
position:absolute;
width:100%;
top:35px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcWQEiduw2Q3yEe_O1mKqiQoVomKvfVgdXtaDcSX0rAAsxbTfG6sle1aObgpDdySuy5XmR83vidfILypenuv6RauzrIEZscw6E949XJUgDQ3fUzW4b7YLbcIrBXvXjEKtwvQeoSU5mnliA/s1600/back.gif);
padding:0;
z-index:100;
left:0;
text-align:center;
}
.nav .current .show {
z-index:10;
}
.nav .select :hover .sub li a,
.nav .current .show .sub li a {
display:block;
float:left;
background:transparent;
padding:0 10px 0 10px;
margin:0;
white-space:nowrap;
border:0;
color:#2b3238;
}
.nav .current .sub li.sub_show a {
color:#2b3238;
cursor:default;
}
.nav .select .sub li a {
font-weight:normal;
}
.nav .select :hover .sub li a:hover,
.nav .current .sub li a:hover {
visibility:visible;
color:#73a0d2;
}

5. Blue Impression Drop Down Menu

Blue Impression Drop Down Menu

Code Html

<ul class="menu">
<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu This is some longer text</span></a>
<ul class="sub">
<li><a href="#">Sample Menu This is some longer text</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
</ul>
</li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a>
<ul class="sub">
<li><a href="#">Sample Menu This is some longer text</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
</ul>
</li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>
</ul>

Code Css

.bg {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU7-qyG0BF_yg-BwZoLLz_tYz2WsVhpei1DQTZPJUHw11medCprAdaq84h0oHvML6U0bHf83Ob9cymBDzJM1zAySr_4uKiCxuydWEDzvHlhF6cqlPE-sy30BXshgwa_g6bmZdG5IMchRU1/s1600/button4.gif);}
.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXtlRRXtHC_wZQ-O2z6aJnpl0CAWb6axo4xsFk7-vjefp3ZxLrPQAhNZ1h4KCZBc1diIkj8rhH8ihIn146sTcg8V9fbDO8cJcjOXlQmR4tFLGFByUVADnhXKvSKozIEJFd2TKsypZFWziX/s1600/button1a.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }
.menu li.top {display:block; float:left; position:relative;}
.menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;}
.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix-7TX5bsh9M9pkOpc_LB77BukfeRBHkU_RO_3zbI5tGqiL5vlS6q_91rvGd8fS54dfLVsxKtebw7VAf0dWZ9RoWP9QmpoC2pJUn-g5U8Nm69gEVJmPSZt_2Jone8UkavDur4zHlqJE3l_/s1600/down.gif) no-repeat right top;}
.menu li a.top_link:hover {color:#000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU7-qyG0BF_yg-BwZoLLz_tYz2WsVhpei1DQTZPJUHw11medCprAdaq84h0oHvML6U0bHf83Ob9cymBDzJM1zAySr_4uKiCxuydWEDzvHlhF6cqlPE-sy30BXshgwa_g6bmZdG5IMchRU1/s1600/button4.gif) no-repeat;}
.menu li a.top_link:hover span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU7-qyG0BF_yg-BwZoLLz_tYz2WsVhpei1DQTZPJUHw11medCprAdaq84h0oHvML6U0bHf83Ob9cymBDzJM1zAySr_4uKiCxuydWEDzvHlhF6cqlPE-sy30BXshgwa_g6bmZdG5IMchRU1/s1600/button4.gif) no-repeat right top;}
.menu li a.top_link:hover span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5r9HNQcFlCa29DcwjQ2-Bjr6x8bogXOyyirOBCcOCp3JGK9sU4vns3kIYseQtlESSnCsuzLhSSCd1jGMQyb2BO13IuluuhIGXhZAVrB_NlAmrEe_zpo5AhX09DcdB3qka8s7jlRNuo4K4/s1600/button4a.gif) no-repeat right top;}
.menu li:hover > a.top_link {color:#000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU7-qyG0BF_yg-BwZoLLz_tYz2WsVhpei1DQTZPJUHw11medCprAdaq84h0oHvML6U0bHf83Ob9cymBDzJM1zAySr_4uKiCxuydWEDzvHlhF6cqlPE-sy30BXshgwa_g6bmZdG5IMchRU1/s1600/button4.gif) no-repeat;}
.menu li:hover > a.top_link span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU7-qyG0BF_yg-BwZoLLz_tYz2WsVhpei1DQTZPJUHw11medCprAdaq84h0oHvML6U0bHf83Ob9cymBDzJM1zAySr_4uKiCxuydWEDzvHlhF6cqlPE-sy30BXshgwa_g6bmZdG5IMchRU1/s1600/button4.gif) no-repeat right top;}
.menu li:hover > a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5r9HNQcFlCa29DcwjQ2-Bjr6x8bogXOyyirOBCcOCp3JGK9sU4vns3kIYseQtlESSnCsuzLhSSCd1jGMQyb2BO13IuluuhIGXhZAVrB_NlAmrEe_zpo5AhX09DcdB3qka8s7jlRNuo4K4/s1600/button4a.gif) no-repeat right top;}
.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}
.menu a:hover {visibility:visible;}
.menu li:hover {position:relative; z-index:200;}
.menu ul,
.menu :hover ul ul,
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
.menu :hover ul.sub {left:2px; top:40px; right:2px; background: #fff; padding:3px 0; border:1px solid #95d2ee; white-space:nowrap; width:200px; height:auto;}
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;}
.menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu :hover ul.sub li a.fly {background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbXCoHqnfNksG-NdMOeZdmyyMr-2L5mLPxscRi9I4gCfUPfbZGv2JHwXnd0hJuysx9BL-fLAR8ifl_gQQDxAq4B9-r3POt7SQwrKnYsmprA6zdIFYOTKjYHKsVxLjxRaQjDMaKTIJ87F1u/s1600/arrow.gif) 80px 7px no-repeat;}
.menu :hover ul.sub li a:hover {background:#95d2ee; color:#fff;}
.menu :hover ul.sub li a.fly:hover {background:#95d2ee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs28Fw6FZbNZ9IONTLMWXuci7iLHBkFQ_sOMd8EUVioaADyx7BIdM_TF2sU7YjsEpjI9u61i0zKFojhX3RhPsg3boviGFYI9FjOQNhqNAntSIV8qqZPHMIBjmxlKxb38hhVNnj6UTB8LID/s1600/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:#95d2ee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs28Fw6FZbNZ9IONTLMWXuci7iLHBkFQ_sOMd8EUVioaADyx7BIdM_TF2sU7YjsEpjI9u61i0zKFojhX3RhPsg3boviGFYI9FjOQNhqNAntSIV8qqZPHMIBjmxlKxb38hhVNnj6UTB8LID/s1600/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 95d2ee; white-space:nowrap; width:93px; z-index:200; height:auto;}

6. Green Impression Drop Down Menu

Green Impression Drop Down Menu

Code Html

<ul class="menu">
<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu This is some longer text</span></a>
<ul class="sub">
<li><a href="#">Sample Menu This is some longer text</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
</ul>
</li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a>
<ul class="sub">
<li><a href="#">Sample Menu This is some longer text</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
</ul>
</li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>
</ul>

Code Css

.bg {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQJkQT80I-MIz2gets4IOPjYliE3N17QMp6bZkwjt_oragA_Ev8t-lG1J-B6dOiaJSTEj2tWM6roK_BGyhx9vD7wiCBNHRItZLwrUIAzdn1jIRer-MZzyYTq2-Nw_5H0EXIDiCcopAw16o/s1600/button4.gif);}
.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPKuuRQTRoL4HwQpEvvfbtxTTwcCHV1j_nlg-uLMIAkZJ07yo0m8t38k9XXyBI2funt3lnCiJAuRilv_aJ6awULzjT2IxruoFcnG9ue_Nxg-hhE-HR4bvJp3Nygc4SrtFhgijgUIZtEDLR/s1600/button1a.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }
.menu li.top {display:block; float:left; position:relative;}
.menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;}
.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigUesiRWd8l-siNCYyQb-v0cnLESfGsGtaygVa7l9Ex1tzBib8ZbJ4FdLtVWDLrzvdBFE2lHebXXrJ_Z8yvJcQlcLV80-RjeYJJYsEBdcZL2c5-mgRAwGCr2TABh4vtbCXHBH_lXgZZfhW/s1600/down.gif) no-repeat right top;}
.menu li a.top_link:hover {color:#000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQJkQT80I-MIz2gets4IOPjYliE3N17QMp6bZkwjt_oragA_Ev8t-lG1J-B6dOiaJSTEj2tWM6roK_BGyhx9vD7wiCBNHRItZLwrUIAzdn1jIRer-MZzyYTq2-Nw_5H0EXIDiCcopAw16o/s1600/button4.gif) no-repeat;}
.menu li a.top_link:hover span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQJkQT80I-MIz2gets4IOPjYliE3N17QMp6bZkwjt_oragA_Ev8t-lG1J-B6dOiaJSTEj2tWM6roK_BGyhx9vD7wiCBNHRItZLwrUIAzdn1jIRer-MZzyYTq2-Nw_5H0EXIDiCcopAw16o/s1600/button4.gif) no-repeat right top;}
.menu li a.top_link:hover span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiATJSagxCFp_vykSlVtCxva-sLLUL1GZYKGxto6nBs1y1Kp8650Xin8kTDfiJ2WFLmXmPQ8hVx7zALyoPgOdBXUOwtTLOlIc3-kRagZPnn7-1lpqK7pTbB0pZMo-SS0zXBMkqST-7eAVXf/s1600/button4a.gif) no-repeat right top;}
.menu li:hover > a.top_link {color:#000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQJkQT80I-MIz2gets4IOPjYliE3N17QMp6bZkwjt_oragA_Ev8t-lG1J-B6dOiaJSTEj2tWM6roK_BGyhx9vD7wiCBNHRItZLwrUIAzdn1jIRer-MZzyYTq2-Nw_5H0EXIDiCcopAw16o/s1600/button4.gif) no-repeat;}
.menu li:hover > a.top_link span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQJkQT80I-MIz2gets4IOPjYliE3N17QMp6bZkwjt_oragA_Ev8t-lG1J-B6dOiaJSTEj2tWM6roK_BGyhx9vD7wiCBNHRItZLwrUIAzdn1jIRer-MZzyYTq2-Nw_5H0EXIDiCcopAw16o/s1600/button4.gif) no-repeat right top;}
.menu li:hover > a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiATJSagxCFp_vykSlVtCxva-sLLUL1GZYKGxto6nBs1y1Kp8650Xin8kTDfiJ2WFLmXmPQ8hVx7zALyoPgOdBXUOwtTLOlIc3-kRagZPnn7-1lpqK7pTbB0pZMo-SS0zXBMkqST-7eAVXf/s1600/button4a.gif) no-repeat right top;}
.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}
.menu a:hover {visibility:visible;}
.menu li:hover {position:relative; z-index:200;}
.menu ul,
.menu :hover ul ul,
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
.menu :hover ul.sub {left:2px; top:40px; right:2px; background: #fff; padding:3px 0; border:1px solid #009900; white-space:nowrap; width:200px; height:auto;}
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;}
.menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu :hover ul.sub li a.fly {background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmL6IyIzQu8hfSpfpjG0heJdcpRGLQZ61wMG3LzoFKkZjXVQEroQxcPEunaL8PJSPhSBkaCpVnOBv_-dzFu_G5OEagF8pTAngnmFJkQVkdJDg8xOxsUZGnnZCYde6XlqHNOjNQ50FZRGE7/s1600/arrow.gif) 80px 7px no-repeat;}
.menu :hover ul.sub li a:hover {background:#42c555; color:#fff;}
.menu :hover ul.sub li a.fly:hover {background:#42c555 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1X9lL_yCdB-pN5EOTmARuxpabX0PMLA8IQ8wNPgiGOcHbijoUDRvYwxxsyvTjASF3OxVIX91V5FvN8x0iagAfSNnzD8fYwm5VZO9Rf1ALLEYIllLJXAuSbCprwiiHcwZWUH2HmHWVoQGs/s1600/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:#42c555 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1X9lL_yCdB-pN5EOTmARuxpabX0PMLA8IQ8wNPgiGOcHbijoUDRvYwxxsyvTjASF3OxVIX91V5FvN8x0iagAfSNnzD8fYwm5VZO9Rf1ALLEYIllLJXAuSbCprwiiHcwZWUH2HmHWVoQGs/s1600/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 95d2ee; white-space:nowrap; width:93px; z-index:200; height:auto;}

7. Grey Impression Drop Down Menu

image

Code Html

<ul class="menu">
<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu This is some longer text</span></a>
<ul class="sub">
<li><a href="#">Sample Menu This is some longer text</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
</ul>
</li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a>
<ul class="sub">
<li><a href="#">Sample Menu This is some longer text</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
</ul>
</li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>
</ul>

Code Css

.bg {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH70yZeMIfSUG9qfiIZEILx0RNfUiHDua083K51tm9jXBevAqYvOCkbtnJU5ObrTuFsXIi0VENz7uSvp0w64keC4RT6e4oBziyamHAyQgKF6NguTXl3Itv9-8zV00U4D9xiTb5b9iScx1t/s1600/button4.gif);}
.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivlTdhmOXVUsW18G95vLWAwrnj_HnaRvMP_ecjVHsXoBBjChAtPAM6jlMO0cngNFJY0amv-QbogBO5yYmxmtB2uiaZIujDDuaGhxmpZMJptN5WePvYL8h3QZFb8o0e-oIeelDUA6EF8Hhd/s1600/button1a.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }
.menu li.top {display:block; float:left; position:relative;}
.menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;}
.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv0fgqK_jQV6XKvNVwTG0D057XK1oolXuml6y1AScFz-MH36FBEoX9VbVTWAHStvK9R_nfM0m4i2bxG8FpHObIeO-cfJ7tabI9wy_102l3xXWqXgumIBR_QqCkjVB6lU0-CPZmAPe0B3yW/s1600/down.gif) no-repeat right top;}
.menu li a.top_link:hover {color:#000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH70yZeMIfSUG9qfiIZEILx0RNfUiHDua083K51tm9jXBevAqYvOCkbtnJU5ObrTuFsXIi0VENz7uSvp0w64keC4RT6e4oBziyamHAyQgKF6NguTXl3Itv9-8zV00U4D9xiTb5b9iScx1t/s1600/button4.gif) no-repeat;}
.menu li a.top_link:hover span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH70yZeMIfSUG9qfiIZEILx0RNfUiHDua083K51tm9jXBevAqYvOCkbtnJU5ObrTuFsXIi0VENz7uSvp0w64keC4RT6e4oBziyamHAyQgKF6NguTXl3Itv9-8zV00U4D9xiTb5b9iScx1t/s1600/button4.gif) no-repeat right top;}
.menu li a.top_link:hover span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4SmnhbXvquyE_6EyyQMBqyPnuh8XQ0crTPijAhOjqZ5_SLn1qRq6Ou_pHzI4xmlfF5yPh0MVh3e8qRpO3BJ0c6_zBCW-vlJj7TXMe0dbrUD9l-E6iapAXpO7ducBvXvAzUIFjXyt8jmnO/s1600/button4a.gif) no-repeat right top;}
.menu li:hover > a.top_link {color:#000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH70yZeMIfSUG9qfiIZEILx0RNfUiHDua083K51tm9jXBevAqYvOCkbtnJU5ObrTuFsXIi0VENz7uSvp0w64keC4RT6e4oBziyamHAyQgKF6NguTXl3Itv9-8zV00U4D9xiTb5b9iScx1t/s1600/button4.gif) no-repeat;}
.menu li:hover > a.top_link span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH70yZeMIfSUG9qfiIZEILx0RNfUiHDua083K51tm9jXBevAqYvOCkbtnJU5ObrTuFsXIi0VENz7uSvp0w64keC4RT6e4oBziyamHAyQgKF6NguTXl3Itv9-8zV00U4D9xiTb5b9iScx1t/s1600/button4.gif) no-repeat right top;}
.menu li:hover > a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4SmnhbXvquyE_6EyyQMBqyPnuh8XQ0crTPijAhOjqZ5_SLn1qRq6Ou_pHzI4xmlfF5yPh0MVh3e8qRpO3BJ0c6_zBCW-vlJj7TXMe0dbrUD9l-E6iapAXpO7ducBvXvAzUIFjXyt8jmnO/s1600/button4a.gif) no-repeat right top;}
.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}
.menu a:hover {visibility:visible;}
.menu li:hover {position:relative; z-index:200;}
.menu ul,
.menu :hover ul ul,
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
.menu :hover ul.sub {left:2px; top:40px; right:2px; background: #fff; padding:3px 0; border:1px solid #999999; white-space:nowrap; width:200px; height:auto;}
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;}
.menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu :hover ul.sub li a.fly {background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVQdMzmGOMr7UascDqIEJFPplMRaJv_bNb8rbRk1RrM8LebT5jPvzhGpKa08yLpyo1v3ghDZaY5P5j_qLTVYBnR_T5uPi5ceSHaMnaxQ9XEdpHGfkdRNbiw4u8ioxVAKJQfjwogmHFgsEM/s1600/arrow.gif) 80px 7px no-repeat;}
.menu :hover ul.sub li a:hover {background:#999999; color:#fff;}
.menu :hover ul.sub li a.fly:hover {background:#999999 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK7zmHRjfxDnvrk3qN1Vnoaq9SUKrXJ0fUHhre8jOSn-c8Fhd1KoMT1JKM4zEyYFGGDGmwfIL0zRY0oJPkvWwP-09gV7A_0UIq987i2QSTUjmqsml7LYozr56VzSq0CPq9s62GcKmGVO-8/s1600/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:#999999 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK7zmHRjfxDnvrk3qN1Vnoaq9SUKrXJ0fUHhre8jOSn-c8Fhd1KoMT1JKM4zEyYFGGDGmwfIL0zRY0oJPkvWwP-09gV7A_0UIq987i2QSTUjmqsml7LYozr56VzSq0CPq9s62GcKmGVO-8/s1600/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 999999; white-space:nowrap; width:93px; z-index:200; height:auto;}

8. Blue Tabbed Drop Down

image

Code Html

<div class="menu">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" id="current">Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/faq.php">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/contact/contact.php">Contact</a></li>
</ul>
</div>

Code Css

.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
color:8e8e8e;
}
.menu ul{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8Xae9qDEZZoSNyjxiynabKqRi6EFWYPg03_cTwtuZX4an6elfuXTdu-Rv3AofD9qBA9Gd8DXnthnxnWe3dgIIUhnoY784YWfvi204qfq8Lcdunx_DGKeaEQxZjPyyXAjmB8Kx1Hlm787x/s1600/menu-bg.gif) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
}
.menu li a{
color:#666666;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover{
color:#000000;
text-decoration:none;
}
.menu li ul{
background:#e0e0e0;
border-left:2px solid #0079b2;
border-right:2px solid #0079b2;
border-bottom:2px solid #0079b2;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
width:225px;
}
.menu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover{
background:#949494;
color:#000000;
opacity:1.0;
filter:alpha(opacity=100);
}
.menu p{
clear:left;
}
.menu #current{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVr9h9HPsglftRupizVUi70shIYLvpltyU9VaYeUfnwyozlv3v9BtsfsdcoFeMBkYLXeMMqDdC0wgQcEpuHvq4iy-wZRloVjbFbQ7HVKvJqEXdaVGcF0sqmaT85Sn7FXLgiLgqbBNWszrd/s1600/current-bg.gif) top left repeat-x;
color:#ffffff;
}

Previous page1Next

 

 

Jangan lupa di like & share yach..!!!


Like the Post? Do share with your Friends.
​
Diposting oleh di
Label: , , , , , ,

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)
IconIconIconFollow Me on Pinterest
Powered By Blogger