I'm trying to figure out how I can implement my magento navigation so that certain links when hovered over create a dropdown with more links in.
At the moment to add a new link I create it in the local.xml file
<?xml version="1.0"?>
<layout version="0.1.0">
<default>
<reference name="top.links">
<!-- Add link -->
<action method="addLink" translate="label title">
<label>ABOUT ProGARM®</label>
<url>about-progarm</url> <!-- can use full url also -->
<title>ABOUT ProGARM®</title>
<prepare>true</prepare> <!-- set true if adding base url param -->
<urlParams helper="core/url/getHomeUrl"/>
<position>1</position>
<liParams/>
<aParams>class="top-link-about-us"</aParams>
<beforeText></beforeText>
<afterText></afterText>
</action>
<action method="addLink" translate="label title">
<label>PRODUCTION</label>
<url>progarm-in-production</url> <!-- can use full url also -->
<title>PRODUCTION</title>
<prepare>true</prepare> <!-- set true if adding base url param -->
<urlParams helper="core/url/getHomeUrl"/>
<position>1</position>
<liParams/>
<aParams>class="top-link-production"</aParams>
<beforeText></beforeText>
<afterText></afterText>
</action>
<action method="addLink" translate="label title">
<label>CE CERTIFICATION</label>
<url>ce-certification</url> <!-- can use full url also -->
<title>CE CERTIFICATION</title>
<prepare>true</prepare> <!-- set true if adding base url param -->
<urlParams helper="core/url/getHomeUrl"/>
<position>20</position>
<liParams/>
<aParams>class="top-link-cert"</aParams>
<beforeText></beforeText>
<afterText></afterText>
</action>
<action method="addLink" translate="label title">
<label>QUALITY</label>
<url>quality</url> <!-- can use full url also -->
<title>QUALITY</title>
<prepare>true</prepare> <!-- set true if adding base url param -->
<urlParams helper="core/url/getHomeUrl"/>
<position>21</position>
<liParams/>
<aParams>class="top-link-quality"</aParams>
<beforeText></beforeText>
<afterText></afterText>
</action>
<action method="addLink" translate="label title">
<label>PRODUCTS</label>
<url>products</url> <!-- can use full url also -->
<title>PRODUCTS</title>
<prepare>true</prepare> <!-- set true if adding base url param -->
<urlParams helper="core/url/getHomeUrl"/>
<position>22</position>
<liParams/>
<aParams>class="top-link-quality"</aParams>
<beforeText></beforeText>
<afterText></afterText>
</action>
<action method="addLink" translate="label title">
<label>VXS+</label>
<url>the-new-vxs-fabric</url> <!-- can use full url also -->
<title>VXS+</title>
<prepare>true</prepare> <!-- set true if adding base url param -->
<urlParams helper="core/url/getHomeUrl"/>
<position>23</position>
<liParams/>
<aParams>class="top-link-quality"</aParams>
<beforeText></beforeText>
<afterText></afterText>
</action>
<action method="addLink" translate="label title">
<label>FABRICS</label>
<url>fabrics</url> <!-- can use full url also -->
<title>FABRICS</title>
<prepare>true</prepare> <!-- set true if adding base url param -->
<urlParams helper="core/url/getHomeUrl"/>
<position>25</position>
<liParams/>
<aParams>class="top-link-quality"</aParams>
<beforeText></beforeText>
<afterText></afterText>
</action>
<action method="addLink" translate="label title">
<label>EN-NORMS</label>
<url>en-norms</url> <!-- can use full url also -->
<title>EN-NORMS</title>
<prepare>true</prepare> <!-- set true if adding base url param -->
<urlParams helper="core/url/getHomeUrl"/>
<position>26</position>
<liParams/>
<aParams>class="top-link-videos"</aParams>
<beforeText></beforeText>
<afterText></afterText>
</action>
<action method="addLink" translate="label title">
<label>VIDEOS</label>
<url>videogallery</url> <!-- can use full url also -->
<title>VIDEOS</title>
<prepare>true</prepare> <!-- set true if adding base url param -->
<urlParams helper="core/url/getHomeUrl"/>
<position>26</position>
<liParams/>
<aParams>class="top-link-videos"</aParams>
<beforeText></beforeText>
<afterText></afterText>
</action>
<action method="addLink" translate="label title">
<label>CONTACT US</label>
<url>contacts</url> <!-- can use full url also -->
<title>CONTACT US</title>
<prepare>true</prepare> <!-- set true if adding base url param -->
<urlParams helper="core/url/getHomeUrl"/>
<position>27</position>
<liParams/>
<aParams>class="top-link-contact"</aParams>
<beforeText></beforeText>
<afterText></afterText>
</action>
There is also a file called top.links.phtml which looks like this
<?php if ($toplinks && is_array($toplinks)): ?>
<div class="nav-container">
<ul id="nav">
<?php echo $this->getChildHtml() ?>
<?php foreach ($toplinks as $_toplink): ?>
<li<?php if ($_toplink['first'] || $_toplink['last']): ?> class="<?php if ($_toplink['first']): ?>first<?php endif; ?><?php if ($_toplink['last']): ?> last<?php endif; ?>"<?php endif; ?> <?php echo $_toplink['liParams'] ?>><?php echo $_toplink['beforeText'] ?><a <?php echo $_toplink['aParams'] ?>><?php echo $_toplink['innerText'] ?></a><?php echo $_toplink['afterText'] ?></li>
<?php endforeach; ?>
</ul>
</div>
<?php endif; ?>
I'm not sure what steps I need to be taking to accomplish these changes, I can create the drop-down menu in css but not sure how to implement this within magento.
Thanks