please help
below is my CSS and Juery and html file
Expand|Select|Wrap|Line Numbers
- <script type="text/javascript">
- $(document).ready(function() {
- $('.myMenu > li').bind('mouseover', openSubMenu);
- $('.myMenu > li').bind('mouseout', closeSubMenu);
- function openSubMenu() {
- $(this).find('ul').css('visibility', 'visible');
- };
- function closeSubMenu() {
- $(this).find('ul').css('visibility', 'hidden');
- };
- });
- </script>
- <!--nav start-->
- <div class="container container-2">
- <div class="row row-2">
- <div class="block display-block nav ">
- <div class="search">
- <div class="searchfield">
- <div>
- <label><input type="submit" value="search" class="button-search" /></label>
- <input type="text" class="search-textfield" />
- </div>
- </div>
- </div>
- <ul class="myMenu">
- <li><a href="#" class="menu1"> menu item 1</a></li>
- <li><a href="#" class="menu2">menu item 2</a>
- <ul class="submenu1">
- <li><a href="#">sub menu item 1</a></li>
- <li><a href="#">sub menu item 2</a></li>
- <li><a href="#">sub menu item 3</a></li>
- <li><a href="#">sub menu item 4</a></li>
- </ul>
- </li>
- <li><a href="#" class="menu3">menu item 3</a>
- <ul class="submenu2">
- <li><a href="#">sub menu item 1</a></li>
- <li><a href="#">sub menu item 2</a></li>
- <li><a href="#">sub menu item 3</a></li>
- <li><a href="#">sub menu item 4</a></li>
- </ul>
- </li>
- <li><a href="#" class="menu4"></a>
- <ul class="submenu4">
- <li><a href="#">sub menu item 1</a></li>
- <li><a href="#">sub menu item 2</a></li>
- <li><a href="#">sub menu item 3</a></li>
- <li><a href="#">sub menu item 4</a></li>
- </ul>
- </li>
- <li><a href="#" class="menu5"></a>
- <ul class="submenu5">
- <li><a href="#">sub menu item 1</a></li>
- <li><a href="#">sub menu item 2</a></li>
- <li><a href="#">sub menu item 3</a></li>
- <li><a href="#">sub menu item 4</a></li>
- </ul>
- </li>
- <li><a href="#" class="menu6"></a></li>
- <li><a href="#" class="menu7"></a></li>
- </ul>
- </div>
- </div>
- </div>
- <!--nav end-->
Expand|Select|Wrap|Line Numbers
- .menu1 { width:106px; height:30px; background:url(../images/listbg.jpg) repeat-x; border-right:1px solid #1e3503;}
- .menu2 {clear:left;width:99px; height:30px; background:url(../images/listbg.jpg) repeat-x; border-left:1px solid #465e05; border-right:1px solid #1e3503; }
- .menu3 {width:172px; height:30px; background:url(../images/listbg.jpg) repeat-x;border-left:1px solid #465e05; border-right:1px solid #1e3503;}
- .menu4 {width:90px; height:30px; background:url(../images/menu4.jpg) no-repeat; border-left:1px solid #465e05; border-right:1px solid #1e3503;}
- .menu5 {width:86px; height:30px; background:url(../images/menu5.jpg) no-repeat; border-left:1px solid #465e05; border-right:1px solid #1e3503; }
- .menu6 {width:98px; height:30px; background:url(../images/menu6.jpg) no-repeat; border-left:1px solid #465e05; border-right:1px solid #1e3503;}
- .menu7 {width:88px; height:30px; background:url(../images/menu7.jpg) no-repeat;}
- /*style the main menu*/
- .myMenu {
- float:left;
- width:752px;
- height:43px;
- margin-top:1px;
- /*background:url(../images/listbg.jpg) repeat-x;*/
- }
- .myMenu li {
- float: left;
- list-style: none outside none;
- text-align:center;
- height:43px;
- width:auto;
- }
- .myMenu li a:link, .myMenu li a:visited {
- color: #ebe54e;
- display: block;
- margin: 0;
- text-decoration: none;
- padding-top:13px;
- height:30px;
- }
- .myMenu li a:hover {
- background-color: #00CCFF;
- }
- /*style the sub menu*/
- .myMenu li ul {
- margin-top: 43px;
- padding: 0;
- position: absolute;
- visibility: hidden;
- z-index: 1000;
- }
- .myMenu li ul li {
- display:block;
- float: none;
- }
- /*fix size of submenus*/
- ul.submenu1 li a{width:99px; /*border-left:1px solid #465e05; border-right:1px solid #1e3503; border-bottom:1px solid #1e3503; */ }
- ul.submenu2 li a{width:172px; /*border-left:1px solid #465e05; border-right:1px solid #1e3503; border-bottom:1px solid #1e3503; */ }
- ul.submenu5 li a{width:86px; /*border-left:1px solid #465e05; border-right:1px solid #1e3503; border-bottom:1px solid #1e3503; */ }
- ul.submenu4 li a{width:90px; /*border-left:1px solid #465e05; border-right:1px solid #1e3503; border-bottom:1px solid #1e3503; */ }
- .myMenu li ul li a:link ,.myMenu li ul li a:visited {
- background-color: #13552d;
- }
- .myMenu li ul li a:hover {
- background-color: #34802f;\
- }