Dropdown showing horizontally but needs to be vertically

66 Posts

Gormytorysh Reply #1, 9 years, 10 months ago

I've been trying lots of things yet with no result. Right now when I hover over my menu, the dropdown menu is horizontal but needs to be vertical. I'm sure it's just one minor issue, but I can't seem to solve it.

Wayfinder call:

[[Wayfinder? &startId=`0` &level=`2` &rowTpl=`rowTpl` &outerTpl=`outerTpl` &parentRowTpl=`parentRow` &innerTpl=`innerTpl` &innerRowTpl=`innerRowTpl`]]

innerRowTpl:

<!-- innerRowTpl -->
<li><a href="[[+wf.link]]">[[+wf.linktext]]</a>[[+wf.wrapper]]</li>

innerTpl:

<ul>[[+wf.wrapper]]</ul>

outerTpl:

<!-- outerTpl -->
<ul id="nav"[[+wf.classes]]>
[[+wf.wrapper]]
</ul>

parentRow:

<!-- ParentRow -->
<li>
<a href="[[+wf.link]]">[[+wf.linktext]]</a>
[[+wf.wrapper]]
</li>

rowTpl:

<!-- rowTpl -->
<li[[+wf.id]][[+wf.classes]]>
<a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]>[[+wf.linktext]]</a>
[[+wf.wrapper]]
</li>

Where am I going wrong?

This question has been answered by fourroses666. See the first response.

1,613 Posts

fourroses666 Reply #2, 9 years, 10 months ago

That sounds more like a css issue or missing class.

#nav li li{display:block; float:none;}

?

Evolution user, I like the back-end speed and simplicity

66 Posts

Gormytorysh Reply #3, 9 years, 10 months ago

Sorry, I failed to put that into my first post as an option where I am going wrong. Thanks for that

.

This is my css concerning nav:

#nav { line-height: 46px; background: url(images/sort-nav-bg.gif) repeat-x 0 0; margin:0 0 0 5px }
#nav .bg-left { background: url(images/sort-nav-bg-left.gif) no-repeat 0 0; position: relative; height: 46px; }
#nav .bg-right { background: url(images/sort-nav-bg-right.gif) no-repeat right 0; position: relative; height: 46px; }
#nav ul li { float: left; display: inline; list-style-type: none; height: 46px; margin-left: 5px;}
#nav ul li a { float: left; display: inline; font-size: 13px; font-weight: bold; color: #282828; text-decoration: none; padding: 15px 19px; }
#nav ul li span.sep { float: left; display: inline; width: 2px; height: 46px; font-size: 0; line-height: 0; text-indent: -4000px; background: url(images/sort-nav-sep.gif); }
#nav ul li a:hover { text-decoration: underline; }
#nav ul li.active a { color: #fff; text-decoration: none; }
#nav ul li.active a:hover { text-decoration: none; }
#nav ul li.first active a { background: url(images/nav-active-first.gif) no-repeat 0 0; }
#nav ul li.active span.sep { background: url(images/nav-active-sep.gif); }
#nav ul li.active { background: url(images/nav-active-bg.gif) repeat-x 0 0; }
#nav ul ul {display: none;}
#nav ul li:hover > ul {display: block;}
#nav ul ul {background: #A0A0A0; border-radius: 0px; padding: 0;position: absolute; top: 100%}
#nav ul ul li {float: none;border-top: 1px solid #6b727c;border-bottom: 1px solid #575f6a;position: relative;}
#nav ul ul li a {padding: 15px 40px;color: #fff;}
#nav ul ul li a:hover {background: #4b545f;}

discuss.answer

1,613 Posts

fourroses666 Reply #4, 9 years, 10 months ago

Possible to see live by a link?
I need firebug to see whats going on and try it out.

this line prolly needs to be edited:
#nav ul ul li{float:left;} or also add width:100%;

Evolution user, I like the back-end speed and simplicity

66 Posts

Gormytorysh Reply #5, 9 years, 10 months ago

Awesome! That did the trick. Many thanks fourroses666!

1,613 Posts

fourroses666 Reply #6, 9 years, 10 months ago

no problem, you might wanna check different browsers to see it works for all.

many subnavs / dropdowns don't work that great on ipad / mobile

Evolution user, I like the back-end speed and simplicity

66 Posts

Gormytorysh Reply #7, 9 years, 10 months ago

Good to know. Just tried on my own smartphone and it did work there, though that does not necessarily mean it works on every phone. Now I do know, I need to work on my sidebar and its scaling

.

1,613 Posts

fourroses666 Reply #8, 9 years, 10 months ago

Glad it works, touch devices and dropdown navigation don't always work as you would like. (All because of the roll over on desktops is different on touch devices, that needs a click.)

Yea prolly need to make your site responsive.. :-0

Evolution user, I like the back-end speed and simplicity

Answered Dropdown showing horizontally but needs to be vertically