Dreamweaver Club Forums

Dreamweaver Club Forums (http://www.dreamweaverclub.com/forum//index.php)
-   Spry (http://www.dreamweaverclub.com/forum//forumdisplay.php?f=189)
-   -   Spry menu bar drop down not working (http://www.dreamweaverclub.com/forum//showthread.php?t=47429)

JenS 11-19-2014 11:08 AM

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,

edbr 11-20-2014 02:13 AM

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

edbr 11-20-2014 02:18 AM

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>


edbr 11-20-2014 03:25 AM

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>



All times are GMT. The time now is 12:28 AM.

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