logo-dw

Go Back   Dreamweaver Club Forums > Dreamweaver forums > Spry
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 11-19-2014, 10:08 AM   #1
JenS
 
Join Date: Nov 2014
Posts: 1
Smile Spry menu bar drop down not working

Hello, I am a novice and just created my first spry menu bar. Initially the drop down menus appeared fine but then I added a graphic to appear between the main menu items and now the menu bar looks perfect but the drop downs don't work. The code looks like this:

<li><a class="MenuBarItemSubmenu" href="kids.html">Kids</a></li>
<li class="navBarDivider"></li>

<ul>
<li><a class="MenuBarItemSubmenu" href="#">How we help</a></li>
</ul>

I've spent hours trying to work this out and would really appreciate any advice.

Many thanks and kind regards,
JenS is offline   Reply With Quote
Old 11-20-2014, 01:13 AM   #2
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,164
Default

i would have to guess from that but dropdowns are in a list so something like

Code:
<ul><li>Home</li>
  <li>About</li>
  <li>
   Items
    <ul>
      <li>item1</li>
      <li>item1</li>
      <li>item1</li>
    </ul>
  </li>
  <li>Blah</li>
  <li>Contact</li>
</ul>
thats just for demo as there are no classes added but really i would look at using css rather than javascript personally if its just for a drop down
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Old 11-20-2014, 01:18 AM   #3
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,164
Default

in fact heres the above in a page using just css
Code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>

<style>body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 20px 50px 150px;
  font-size: 13px;
  text-align: center;
  background: #E3CAA1;
}

ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff;
  cursor: pointer;
 
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
ul li:hover {
  background: #555;
  color: #fff;
}
ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
   box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
ul li ul li { 
  background: #555; 
  display: block; 
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}</style>
</head>

<body>
<ul><li>Home</li>
  <li>About</li>
  <li>
   Items
    <ul>
      <li>item1</li>
      <li>item1</li>
      <li>item1</li>
    </ul>
  </li>
  <li>Blah</li>
  <li>Contact</li>
</ul>

</body>
</html>
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Old 11-20-2014, 02:25 AM   #4
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,164
Default

or another one with comments for you
Code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>   #navbar{float:left; position:relative; color:#FFF; font-size:1em;   width:960px;    } 	
	 
	 #navbar ul{text-align:center; }  
	#navbar ul li{font-weight:bold; width:120px; height:25px; 
		  text-decoration:none; list-style-type:none;position:relative;float:left; background-color:#3F221B; }
		  #navbar ul { background-color:#3F221B;}			
			#navbar ul ul li{background-color:#3F221B;}	
			
#navbar a:visited {color:#FFF;}
#navbar ul ul li {width:120px; text-align:left }

/*  top level */
#navbar a, #navbar a:visited {display:block;text-decoration:none;color:#fff; }

/* hide the sub levels */
#navbar ul ul {visibility:hidden; position:absolute;top:25px; background-color:#3F221B;   width:120px;}

/*  second level links */
#navbar ul ul a, #navbar ul ul a:visited {background-color:#3F221B; color:#fff; width:120px;}
#navbar ul ul li a:hover {background-color:#3F221B; width:120px;}

/*  top level hover */
#navbar a:hover, #navbar ul ul a:hover{color:#fff; }
/*  second level  */
#navbar ul li:hover ul,#navbar ul a:hover ul{visibility:visible;}</style>
</head>

<div id="navbar">
 <ul>
  <li ><a href="#">Home</a></li>

 
<li > <a  href="#">link2</a>

<!-- -------------- this is the drop down  --------------->
   <ul>
	<li  ><a href="#">sublink</a></li>
	<li><a  href="#">sublink</a></li>
	 <li><a  href="#">sublink</a></li>
     <li ><a  href="#">sublink</a></li>
	<li><a  href="#">sublink</a></li>
</ul>		<!-- -------------- end of the drop down  --------------->

  </li> 


<li><a  href="#">Link</a></li>

  <li><a href="#">Link</a></li>
<li><a href="#">Link</a></li> </ul>  </div>  <!-- end navbar-->

<body>
</body>
</html>
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 08:38 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com