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>

Tags:

0 Responses to “Blogger ah Sub menu bangci bawlding”

Post a Comment

Na kammal te in damna zatui bang hi.....

Disqus Shortname

Subscribe

Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio. Duis mollis

© 2013 SIANZUN: Personal Blog. All rights reserved.
Designed by SpicyTricks