How to create a custom dropdown menu in dreamweaver CC?

hello everyone,

 

i in process of creating website understand how create custom dropdown menu. had website made in psd file, assets of site have been created. (ex: nav buttons text, exported out of photoshop png using generate image method) oppose using ajatix create dropdown, need stick original design of site. below dropdown menu trying adapt site. however, bit confused how follow through using method dropdown right image (purely demonstration purposes) how go linking text navigates below "departments" (as pictured) ? or can use built in method create dropdown under nav bar? have dropdown come underneath links in nav bar. nav bar imported png triangle pieces under "our departments" transparent seen image below. don't understand how can stack layers in dreamweaver, if possible use built in method of dropdown menu.

 

dropdown have created:

 

without dropdown:

 

here snippet of code had created nav bar:

 

i hope made clear,

thank you!

i refuse use images navigation anymore.  many beautiful web fonts on typekit & edge choose from.  creative css, can style menus , behave image based buttons.

 

usability issues aside (images of text hard read , can't translated), it's easier maintain site if navigation text based.  way won't have re-craft entire menu system each time add new stuff web site.   after few times, won't update menus @ all. 

 

a basic drop-menu begins life html unordered list:

css horizontal drop-menu - jsfiddle

 

<nav>
<ul>
<li><a href="#">about &#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> <!--end list-->
</nav>

 

 

 

nancy o.

More discussions in Dreamweaver support forum

adobe