KronicBoom
New Member
Hey, I was hoping that I could get some help a problem I'm having. I got some code for a dropdown navigation menu called superfish. The background on my dropdown navigation menu isn't lining up with the text. Because my site is already up, I can't leave the drop down menu up for you to see but it looks like this:
I'm experienced with html and css and I've tried everything with those. I've looked at the javascript and jquery and I can't figure it out either. Here is the code:
(the html uses Liquid scripts so its a little more complicated)
This is the css
I'm experienced with html and css and I've tried everything with those. I've looked at the javascript and jquery and I can't figure it out either. Here is the code:
(the html uses Liquid scripts so its a little more complicated)
HTML:
<ul class="navigation sf-menu">
{% for link in linklists.main-menu.links %}
<!-- does this link in our iteration point to the current page? -->
{% assign current = false %}{% if template == 'index' and link.url == '/' %}
{% assign current = true %}{% elsif collection.url == link.url %}{% assign
current = true %}{% elsif blog.url == link.url %}{% assign current = true %}
{% elsif page.url == link.url %}{% assign current = true %}{% elsif page_title
== link.title %}{% assign current = true %}{% elsif template == 'list-
collections' and link.url == '/collections' %}{% assign current = true %}{%
elsif page_title == 'Products' and link.url == '/collections/all' %}{% assign
current = true %}{% elsif template == 'article' and link.url == article.url %}{%
assign current = true %}{% endif %}
<!-- end of soul-searching about active class -->
<li{% if forloop.first %} class="first"{% endif %}>
<a{% if current %} class="active"{% endif %} href="{{ link.url }}">{{ link.title }}</a>
{% capture child_list_handle %}{{ link.title | handle }}{% endcapture %}
{% if linklists[child_list_handle] and linklists[child_list_handle].links.size > 0 %}
<ul>
{% for l in linklists[child_list_handle].links %}
<li id="kamlist"><a href="{{ l.url }}">{{ l.title }}</a></li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
<li class="cart"><a href="/cart">Your cart ({{ cart.item_count }})</a></li>
</ul>This is the css
Code:
.sf-menu, .sf-menu * {
margin: 0px;
padding: 5px;
list-style: none;
color: white;
font-family: lucida sans;
left: 85px;
font-size: 15px;
font-weight: bold;
}
.sf-menu {
line-height: 20px;
}
.sf-menu ul {
position: absolute;
top: -999em;
width: 10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
width: 100%;
}
.sf-menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
float: right;
position: relative;
top: 50px;
background-color: black;
}
.sf-menu a {
display: block;
position: relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left: 0px;
top: -25px; /* match top ul list item height */
z-index: 99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left: 10em; /* match ul width */
top: 0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left: 10em; /* match ul width */
top: 0;
}
!