Question

First, here’s the dropdown/collapsible menu I’ve constructed.

As for what the “menu” and “menu-item” are in the preview shown in the fiddle — Channels, Search, and About Us are menus, while the ones that drop-down/slide-out when you click on the menus are menu-items.

SCREENSHOT:

I am using position: absolute; on the menu-items (.collapse), and position: relative; on the menus.

The Relevant code (more in the fiddle):

/* Menu: <li class="float-left top-menu">... */
.top-menu {
    position: relative;
}

/* Menu-Item: <div id="channels-menu-item-container" class="collapse">... */
.collapse {
    position: absolute;
    width: 570px;
    z-index: 1000;
    padding: 0;
    margin: 0;
    color: #222;
    background-color: #fff;
    -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2), 0 10px 20px rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2), 0 10px 20px rgba(0, 0, 0, 0.12);
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2), 0 10px 20px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

Is it possible to achieve the same functionality using position: relative; on the “menu-item” (.collapse) as well?

---

NOTE: Before you submit an answer with a fiddle, please do make sure that the menus in both fiddles (yours and mine) are functioning the same by clicking on each menu and comparing (so as to confirm that no menu-items are misplaced due to change in positioning).

You may add extra bits of HTML and CSS, of course.

---

And yes, I tried for hours in vain, and wanted to see if it’s at all possible.

Answer 1

How about something like this:

• Remove the width from .collapse.
• Remove float from the columns, change to inline-block.
• Change white-space to nowrap.

Html:

<div class="in collapse" id="channels-menu-item-container" style="height: auto;">
    <div id="channels-menu-item-wrapper">
        <ul class="channel-column" id="nav-channels">
           <!-- ... -->
        </ul>
        <ul class="channel-column" id="nav-topics">
           <!-- ... -->
        </ul>
        <ul class="channel-column" id="nav-editions">
           <!-- ... -->
        </ul>
        <div class="aahans"></div>
        <div class="clearfix"></div>
    </div>
</div>

Css:

.collapse {
    position: absolute;
    min-width:200px; /*for the seach box*/
    /* ... */
}

#channels-menu-item-wrapper {
    border-bottom: 4px solid #259;
    white-space:nowrap;
}

.channel-column {display:inline-block; vertical-align:top;}

You may also want to reset the white-space value in each .channel-column.

Result: http://jsfiddle.net/kobi/fxSYT/1/embedded/result/