I'm trying to get a simply drop down menu to work, but the code doesn't seem to work with .phtml and .css
Here's what I have:
html code I'm trying to use:
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li><a href='#shareThis' class='boxy' title='Share This'>SHARE THIS</a></li>
<div id="shareThis" style='display: none;'>
<div class="share" id="share-facebook"><a href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&t=Impact">Post to Facebook</a></div>
<div class="share" id="share-twitter"><a href="http://twitter.com/home?status=Check This Out! <?php the_permalink(); ?>">Post to Twitter</a></div>
<div class="clear"></div>
</div>
<li><a href="/contact/">CONTACT</a></li>
<li id="customerservice"><a href="/customer-service.html" class='boxy' title='Customer Service'>CUSTOMER SERVICE</a></li>
<li><a href="/wholesale/">WHOLESALE</a></li>
<li>
<a href="/hosted-webstores/">WEB STORES<span class="arrow">▼</span></a>
<ul class="sub-menu">
<li><a href="http://www.impactmerch.com/store/aptbs.html" target="_blank">A PLACE TO BURY STRANGERS</a></li>
<li><a href="http://www.impactmerch.com/store/bulletproofhearts.html" target="_blank">BULLET PROOF HEARTS</a></li>
</ul>
</li>
</ul>
</nav>
</div>
CSS:
/*----- Menu Outline -----*/
.menu-wrap {
width:100%;
box-shadow:0px 1px 3px rgba(0,0,0,0.2);
background:#3e3436;
}
.menu {
width:1000px;
margin:0 0 0 280px;
}
.menu li {
margin:0px;
list-style:none;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.menu a {
transition:all linear 0.15s;
color:#3a3a38;
}
.menu li:hover > a, .menu .current-item > a {
text-decoration:none;
color:#c8c4bb;
}
.menu .arrow {
font-size:7px;
line-height:0%;
}
/*----- Top Level -----*/
.menu > ul > li {
float:left;
display:inline-block;
position:relative;
font-size:12px;
font-weight:bold;
background:#b1afa6;
margin:0 4px 0 0;
}
.menu > ul > li > a {
padding:10px 40px;
display:inline-block;
text-shadow:0px 0px 0px rgba(0,0,0,0.4);
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a {
background:#3a3a38;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}
.sub-menu {
width:160%;
padding:5px 0px;
position:absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
transition
pacity linear 0.15s;
box-shadow:0px 2px 3px rgba(0,0,0,0.2);
background:#494947;
}
.sub-menu li {
display:block;
font-size:12px;
}
.sub-menu li a {
padding:10px 30px;
display:block;
}
.sub-menu li a:hover, .sub-menu .current-item a {
background:#3e3436;
}
And this is the current code I'm trying to replace:
<ul id="toplist">
<li><a href='#shareThis' class='boxy' title='Share This'>Share This</a></li>
<div id="shareThis" style='display: none;'>
<?php $currentUrl = $this->helper('core/url')->getCurrentUrl(); ?>
<div class="share" id="share-facebook"><a href="http://www.facebook.com/sharer.php?u=<?php echo $currentUrl; ?>&t=Impact">Post to Facebook</a></div>
<div class="share" id="share-twitter"><a href="http://twitter.com/home?status=Check This Out! <?php echo $currentUrl; ?>">Post to Twitter</a></div>
<div class="clear"></div>
</div>
<li><a href="/contact/" title="Contact">Contact</a></li>
<li id="customerservice" class="current"><a href='/customer-service.html' class='boxy' title='Customer Service'>Customer Service</a></li>
<li><a href="/wholesale/" title="Wholesale">Wholesale</a></li>
<li><a href="/hosted-webstores/" title=“Web Stores”>Web Stores</a></li>
</ul>
Any help would be grately appreciated!
Thank you!