Multi-level Dropdown Menu Help.
Hello, I am having a bit of a problem with my jquery menu:
I followed this tutorial to create a menu:
http://www.kriesi.at/archives/create-a- ... via-jquery
Everything has turned out great with the exception of 2 errors I need help with:
#1: How can I have but main button not have a border around it? There is a 1px stroke around it and I do not want it there.
#2: for the sub menus, how can I have them appear in front of the menu when clicked on? I have provided pictures for both of my problems. I have also included my source code. thanks for the help.:
SOURCE CODE:
-
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type='text/javascript' src='jquery-1.2.3.min.js'></script>
<script type='text/javascript' src='menu.js'></script>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<ul id="nav">
<li><a href="#"><img src="select.png" width="210" height="30"/></a>
<ul>
<li><a href="#">British Columbia</a>
<ul>
<li><a href="http://www.homesandlandoftheokanagan.com/ListingSearchReturn.cfm?">Thompson Okanagan/Kootenays</a></li>
<li><a href="http://www.homesandlandvancouvertowhistler.com/ListingSearchReturn.cfm?">Vancouver to Whistler</a></li>
<li><a href="http://www.homesandlandgvrd.com/ListingSearchReturn.cfm?">Metro Vancouver & The Fraser Valley</a></li>
<li><a href="http://www.homesandlandvancouverisland.com/ListingSearchReturn.cfm?">Vancouver Island</a></li>
</ul>
</li>
<li><a href="#">Alberta</a>
<ul>
<li><a href="http://www.homesandlandofcalgary.com/ListingSearchReturn.cfm?">Calgary</a></li>
<li><a href="http://www.homesandlandofedmonton.com/ListingSearchReturn.cfm?">Edmonton</a></li>
<li><a href="http://www.homesandlandofgrandeprairie.com/ListingSearchReturn.cfm?">Grande Prairie</a></li>
<li><a href="http://www.homesandlandofreddeer.com/ListingSearchReturn.cfm?">Red Deer & Central Alberta</a></li>
</ul>
</li>
<li><a href="#">Saskatchewan</a>
<ul>
<li><a href="http://www.homesandlandofsaskatoon.com/ListingSearchReturn.cfm?">Saskatoon & Northern Saskatchewan</a></li>
</ul>
</li>
<li><a href="#">Manitoba</a>
<ul>
<li><a href="http://www.homesandlandofwinnipeg.com/ListingSearchReturn.cfm?">Winnipeg</a></li>
</ul>
</li>
<li><a href="#">Ontario</a>
<ul>
<li><a href="http://www.muskokahomesforsale.net/ListingSearchReturn.cfm?">Muskoka, Haliburton & Parry Sound</a></li>
<li><a href="http://www.homesandlandofsimcoegrey.com/ListingSearchReturn.cfm?">Barrie & Georgian Bay</a></li>
<li><a href="http://www.homesandlandoflondon.com/ListingSearchReturn.cfm?">London/St. Thomas/Woodstock</a></li>
<li><a href="http://www.homesandlandmississauga.com/ListingSearchReturn.cfm?">Mississauga/Brampton/Caledon</a></li>
<li><a href="http://www.homesandlandoakville.com/ListingSearchReturn.cfm?">Oakville - Burlington - Milton</a></li>
<li><a href="http://www.homesforsaleinyorkregion.com/ListingSearchReturn.cfm?">York Region</a></li>
<li><a href="http://www.homesandlandofdurham.com/ListingSearchReturn.cfm?">Durham Region</a></li>
<li><a href="http://kingston.homesandland.com/ListingSearchReturn.cfm?">Kingston & the 1000 Islands</a></li>
<li><a href="http://www.homesandlandniagara.com/ListingSearchReturn.cfm?">Niagara Region</a></li>
<li><a href="http://www.ottawacarletonrealestate.net/ListingSearchReturn.cfm?">Ottawa-Carleton</a></li>
<li><a href="http://peterborough.homesandland.com/ListingSearchReturn.cfm?">Peterborough, The Kawarthas, & Quinte</a></li>
<li><a href="http://www.homesandlandtoronto.com/ListingSearchReturn.cfm?">Toronto</a></li>
</ul>
</li>
<li><a href="#">Quebec</a>
<ul>
<li><a href="http://www.homesandlandofmontreal-tremblant.com/ListingSearchReturn.cfm?">Montreal</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
CSS CODE:
-
body{background:#FFFFFF;font-family:Arial, Helvetica, sans-serif; font-size:11px;}
#nav, #nav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:1.5em;
}
#nav a:link, #nav a:active, #nav a:visited{
display:block;
padding:0px 5px;
border:1px solid #998675;
color:#493e3b;
text-decoration:none;
background-color:#f0efea;
}
#nav a:hover{
background-color:#493e3b;
color:#f0efea;
border:1px solid #493e3b;
}
#nav li{
float:left;
position:relative;
}
#nav ul {
position:absolute;
width:210px;
top:31px;
display:none;
}
#nav li ul a{
width:210px;
float:left;
}
#nav ul ul{
top:auto;
}
#nav li ul ul {
left:110px;
margin:0px 0 0 0px;
z-index:auto;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}
jquery Code:
-
function mainmenu(){
$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
});
}
$(document).ready(function(){
mainmenu();
});
#1
My button appears like this:
When I want it to appear like this:
#2 you see the sub menu appears behind the main menu when I want it in front:
