CSS help needed: Drop-down menu in tab button

,
#1

I have been trying to tweak my Breadcrumb Tabs idea (ref: attached example json that can be dragged into tiddlywiki.org) to make it more useful and dynamic by adding a drop-down button to the tab but I am running into the limitations of my cargo-cult knowledge of CSS.

I’ve managed to get the menu button template visible on the selected tab but CSS styles are applied to the drop-down that make all the entries inline and not links.

The fix is likely obvious but not to me. Does anyone have an idea how to apply the styles to make the drop-down look like it normally does (and how it looks in the TabButtonTemplate)?

Extra points for explaining how to make the button not telescope/grow when drop-down button is visible vs. hidden … but that behaviour is something I can live with.

Breadcrumb Tabs (help needed).json (2.5 KB)

Thanks,
/Mike

#2

Clearly to me the breadcrumb is using a class or style that is interfering with the dropdown inside it but not directly in a tiddler, or this is a consequence of nesting.

#3

Well … I’ve managed to solve the inline problem by simply adding a blank line before my list filter in the TabButtonTemplate to force it into block mode:

\define breadcrumbMenu(breadcrumbLabel:"breadcrumb" breadcrumbFilter:"""[tag[Project]]""")
<$button class="tc-btn-invisible viewOnHover" popup="""$:/temp/state/$breadcrumbLabel$""">{{$:/core/images/chevron-right}}</$button>
<$reveal type="popup" state="""$:/temp/state/$breadcrumbLabel$""">
<div class="tc-drop-down viewOnHover">
***added blank line here***
{{{$breadcrumbFilter$}}}
</div>
</$reveal>
\end

<$view tiddler=<<currentTab>> field="title" /><<breadcrumbMenu>>

It still applies all the tab related CSS styles to the popup and makes a big ole mess …

So minor progress. : [

/Mike