Hi,
I have menubar which has blinking child node problem,seeing image u can get the arrow from where u can go to the circle then design stated blinking.
while slowely moving from FIRST OPENED node towards downside,as last element focus crossed then it start blinking
Reply Fast its urgent
Thanks
my code for reference
Thanks
I have menubar which has blinking child node problem,seeing image u can get the arrow from where u can go to the circle then design stated blinking.
while slowely moving from FIRST OPENED node towards downside,as last element focus crossed then it start blinking
Reply Fast its urgent
Thanks
my code for reference
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="MenubarTrial.WebForm4" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title></head><body> <style> #mmenu, #mmenu ul { margin: 0; padding: 0; list-style: none; } #mmenu { width: 960px; margin: 60px auto; border: 1px solid #222; background-color: #111; background-image: -moz-linear-gradient(#444, #111); background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111)); background-image: -webkit-linear-gradient(#444, #111); background-image: -o-linear-gradient(#444, #111); background-image: -ms-linear-gradient(#444, #111); background-image: linear-gradient(#444, #111); -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; -webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; } #mmenu:before, #mmenu:after { content: ""; display: table; } #mmenu:after { clear: both; } #mmenu { zoom: 1; } #mmenu li { float: left; border-right: 1px solid #222; -moz-box-shadow: 1px 0 0 #444; -webkit-box-shadow: 1px 0 0 #444; box-shadow: 1px 0 0 #444; position: relative; } #mmenu a { float: left; padding: 12px 30px; color: #999; text-transform: uppercase; font: bold 12px Arial, Helvetica; text-decoration: none; text-shadow: 0 1px 0 #000; } #mmenu li:hover > a { color: #fafafa; } *html #mmenu li a:hover { /* IE6 only */ color: #fafafa; } #mmenu ul { margin: 20px 0 0 0; _margin: 0; /*IE6 only*/ opacity: 0; visibility: hidden; position: absolute; top: 38px; left: 0; z-index: 9999; background: #444; background: -moz-linear-gradient(#444, #111); background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111)); background: -webkit-linear-gradient(#444, #111); background: -o-linear-gradient(#444, #111); background: -ms-linear-gradient(#444, #111); background: linear-gradient(#444, #111); -moz-box-shadow: 0 -1px rgba(255,255,255,.3); -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3); box-shadow: 0 -1px 0 rgba(255,255,255,.3); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } #mmenu li:hover > ul { opacity: 1; visibility: visible; margin: 0; } #mmenu ul ul { top: 0; left: 150px; margin: 0 0 0 20px; _margin: 0; /*IE6 only*/ -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3); -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3); box-shadow: -1px 0 0 rgba(255,255,255,.3); } #mmenu ul li { float: none; display: block; border: 0; _line-height: 0; /*IE6 only*/ -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666; -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666; box-shadow: 0 1px 0 #111, 0 2px 0 #666; } #mmenu ul li:last-child { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #mmenu ul a { padding: 10px; width: 130px; _height: 10px; /*IE6 only*/ display: block; white-space: nowrap; float: none; text-transform: none; } #mmenu ul a:hover { background-color: #0186ba; background-image: -moz-linear-gradient(#04acec, #0186ba); background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)); background-image: -webkit-linear-gradient(#04acec, #0186ba); background-image: -o-linear-gradient(#04acec, #0186ba); background-image: -ms-linear-gradient(#04acec, #0186ba); background-image: linear-gradient(#04acec, #0186ba); } #mmenu ul li:first-child > a { -moz-border-radius: 3px 3px 0 0; -webkit-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; } #mmenu ul li:first-child > a:after { content: ''; position: absolute; left: 40px; top: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #444; } #mmenu ul ul li:first-child a:after { left: -6px; top: 50%; margin-top: -6px; border-left: 0; border-bottom: 6px solid transparent; border-top: 6px solid transparent; border-right: 6px solid #3b3b3b; } #mmenu ul li:first-child a:hover:after { border-bottom-color: #04acec; } #mmenu ul ul li:first-child a:hover:after { border-right-color: #0299d3; border-bottom-color: transparent; } #mmenu ul li:last-child > a { -moz-border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; } </style> <div id="mmenu"> <li><a href="xxxxxxxxxxxxxx.aspx">Home</a></li> <li><a href="#">My Projects</a> <ul> <li><a href="#">N.Design Studio</a> <ul> <li><a href="#">Portfolio</a></li> <li><a href="#">WordPress Themes</a></li> <li><a href="#">Wallpapers</a></li> <li><a href="#">Illustrator Tutorials</a></li> </ul> </li> <li><a href="#">Web Designer Wall</a> <ul> <li><a href="#">Design Job Wall</a></li> </ul> </li> <li><a href="#">IconDock</a></li> <li><a href="#">Best Web Gallery</a></li> </ul> </li> <li><a href="#">Multi-Levels</a> <ul> <li><a href="#">Team</a> <ul> <li><a href="#">Sub-Level Item</a></li> <li><a href="#">Sub-Level Item</a> <ul> <li><a href="#">Sub-Level Item</a></li> <li><a href="#">Sub-Level Item</a></li> <li><a href="#">Sub-Level Item</a></li> </ul> </li> <li><a href="#">Sub-Level Item</a></li> </ul> </li> <li><a href="#">Entity</a> <ul> <li><a href="xxxxxxxxxxxxxxxxx.aspx">Entity Details</a></li> <li><a href="xxxxxxxxxxxxx.aspx">Entity Permission</a></li> </ul> </li> <li><a href="#">UserDatails</a> <ul> <li><a href="xxxxxxxxxxxxx.aspx">Change Password</a></li> <li><a href="xxxxxxxxxxxxxx.aspx">UserDetails</a></li> <li><a href="xxxxxxxxxxxx.aspx">GroupUser Creation</a></li> </ul> </li> </ul> </li> <li><a href="#">Company Details</a> <ul> <li><a href="xxxxxxxxxxxx.aspx">CompanyDetails</a></li> <li><a href="xxxxxxxxxxx.aspx">Group Details</a></li> <li><a href="xxxxxxxxxxx.aspx">CompanyList</a></li> </ul> </li> <li><a href="#">About</a></li> <li><a href="#">Contact Us</a></li> </div> <form id="form1" runat="server"> <div> </div> </form></body></html>