Header Ads

Blogger ah Sub menu bangci bawlding

HTML code nav menu ading
Genteh na:

<div id="nav"> <!-- nav container -->
<ul>
<li>item <!-- main item -->
<ul> <!-- item submenu -->
<li>sub item</li>
</ul>
</li>
<ul>
</div>
A code muhtawm theih

<div id="nav">
<ul>
<li><a href="#">Zocia</a>
<ul class="submenu">
<li><a href="http://blog.zocia.com">Zocia Blog</a></li>
<li><a href="http://www.ns-services.blogspot.com">Zo Hornbill</a></li>
<li><a href="http://www.itzomi.blogspot.com">IT Zomi</a></li>
</ul>
</li>

<li><a href="#">Tech News</a>
<ul class="submenu">
<li><a href="http://www.zomi.net">Zomi.Net</a></li>
<li><a href=http://www.zocia.org>Zocia</a></li>
</ul>
</li>
<ul>
<div>


CSS Code

#nav{
height:32px;
line-height:32px;
background:#3B5998;
padding:0 10px;
}
#nav ul,
#nav ul li {
margin:0;
padding:0;
list-style:none;
}
#nav ul li{
float:left;
display:block;
}

Nav CSS ah nazat danding. #nav ul li {...}
Sub a ding #nav ul li ul li {...}

#nav ul li a:link,
#nav ul li a:visited{
color:#FFF;
font-size:14px;
font-weight:bold;
text-decoration:none;
padding:0 20px 0 6px;
display:block;
}
#nav ul li a:hover{
color:#EBEFF7;
}
#nav ul li ul li{
float:none;
display:block;
}
#nav ul li ul li a:link,
#nav ul li ul li a:visited{
color:#444;
font-size:11px;
font-weight:bold;
text-decoration:none;
padding:0 10px;
clear:both;
border-bottom:solid 1px #DEDEDE;
}
#nav ul li ul li a:hover{
color:#3B5998;
background:#EBEFF7;
}

Sub Menu a ding CSS code

.submenu {
position: absolute;
width: 160px;
background: #FFF;
padding: 10px;
border: solid 1px #2E4B88;
border-top: none;
display: none;
line-height: 26px;
z-index: 1000;
}

jQuery Code
Sub te na seelna ding jQuery Code

<script type="text/javascript">
function nav(){
$('div#nav ul li').mouseover(function() {
$(this).find('ul:first').show();
});

$('div#nav ul li').mouseleave(function() {
$('div#nav ul li ul').hide();
});

$('div#nav ul li ul').mouseleave(function() {
$('div#nav ul li ul').hide();;
});
};

$(document).ready(function() {
nav();
});
</script>

1 comment:

  1. Hih sub menu bawldan pen thupi mahmah hi. A diakdiak in Zomi sung ah i website  leh blog tuamtuamte ah link tuamtuam amau level tawh kizui in submenu zat oh phamawh zah in news leh links a hun khop khat mah kinei ta hi. Hih bang in zat theih lian ding, C&P theih ding in nong hopsawn pen mipi' hamphatna khat hi. Lungdam mahmah. Hong zomto to lai in

    ReplyDelete

Powered by Blogger.