Drop Down Menus in CC

Question

I found out the hard way Spry is no longer supported in Dreamweaver CC. I can not purchase another program to create a simple drop down menu. I know I need to use JQuery to do this. Can any one tell me how to do this or send me the coding I need to do this. I watched a video on Lynda.com but it is outdated using older versions of Dreamweaver so the coding did not work in CC. I'm frustrated, this shouldn't be that difficult as drop down menus are on most web sites. If anyone can help me I'd really appreciate it. I can't believe this is so complicated now. Spry seemed simple.

Answer 1

Candice,
Here's a basic CSS Menu I built.
CSS code:
/* BEGIN HORIZONTAL DROP-MENU */
#menu {
    clear: left;
    position: relative;
    z-index: 1000;
    width: 100%; /**adjust width as needed**/
    margin: 0;
    padding: 0;
#menu ul {
    margin: 0;
    padding: 0
#menu li {
    list-style: none;
    font-size: 14px;
    float: left;
    text-align: center;
/**top level menu**/
#menu li a {
    display: inline-block;
    text-decoration: none;
    /* adjust width as needed or use auto */
    width: 14em; /*same as sub-menus*/
    /*space between links*/
    margin: 0 2% 0 2%;
    padding: 8px;
    font-weight: bold;
    line-height: 1.50em;
    border: 1px dotted #666;
    border-top: none;
    color: #FFF;
    background: #000;
/**top menu style on mouse over**/
#menu li:hover > a { background: #333; }
/**sub-menu**/
#menu li ul {
    display: none;
    text-align: center;
    margin: 0;
    padding: 0;
/**sub-menu, help for older IE**/
#menu li:hover ul, #menu li.hover ul {
    display: block;
    position: absolute;
    z-index:1000;
    padding: 0;
#menu li:hover li, #menu li.hover li { float: none; }
/**drop-menu style**/
#menu li:hover li a, nav li.hover li a {
    width: 14em; /* adjust width as needed or use auto */
    margin-top: 0;
/**drop-menu style on mouse over**/
#menu li li a:hover {
    background: #FFF;
    color: #000;
/* Clear floated elements at the end*/
#menu:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
/**END HORIZONTAL DROP-MENUS STYLES**/
HTML:
<nav>
<ul id="menu">
<li><a href="#">ABOUT US &#9660;</a>
<ul>
<li><a href="#">Videos</a></li>
<li><a href="#">Newsletter</a></li>
</ul>
</li>
<li><a href="#">PRODUCTS &#9660;</a>
<ul>
<li><a href="#">Broken Glass</a></li>
<li><a href="#">Mosaic Tiles</a></li>
<li><a href="#">Adhesives</a></li>
<li><a href="#">Grout</a></li>
</ul>
</li>
<li><a href="#">ACCESSORIES &#9660;</a>
<ul>
<li><a href="#">Gloves</a></li>
<li><a href="#">Rubber Mallets</a></li>
<li><a href="#">Sponges</a></li>
<li><a href="#">Safety Glasses</a></li>
</ul>
</li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
Nancy O.