CODEWITHSUNDEEP
csshtmlcss-transitions
NewBoy
NewBoy

Reputation: 1144

creating a three level css accordion menu

I have created a two level CSS accordion menu see here. I am now trying to make an attempt to create a third level. I have slightly myself with the css nesting of the layer. The example below is how I assume it should be. Does anyone know the correct nesting method.

#main-nav li ul a:hover:before, .subMenu li ul a:hover:before {
    content: "";
    display: block;
    width: 1em;
    height: 1em;
    background: rgba(0,0,0,0.75);
    border: 1px solid #FFF;
    position: absolute;
    top: 0.5em;
    left: -0.75em;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

Upvotes: 0

Views: 1307

Answers (3)

Tim Seguine
Tim Seguine

Reputation: 2914

Here is a rough proof of concept as a 'from first principles' approach to nested hovers:

http://jsfiddle.net/6X9NR/1/

 <ul id="main-nav">
    <li><a href="#">1.1</a>
        <ul>
            <li><a href="#">1.1.1</a>
                <ul>
                    <li><a href="#">1.1.1.1</a></li>
                    <li><a href="#">1.1.1.2</a></li>
                </ul>
            </li>
            <li><a href="#">1.1.2</a>
                <ul>
                    <li><a href="#">1.1.2.1</a></li>
                    <li><a href="#">1.1.2.2</a></li>
                </ul>            
            </li>
        </ul>
    </li>
    <li><a href="#">1.2</a></li>
</ul>

the css:

#main-nav ul {display:none}
#main-nav li:hover > ul {display: block}

The main part is with the last selector. It says any ul that is the direct child of a li that is being hovered over should be shown.

The first selector hides all submenus.

It is as simple as that for basic functionality. Modified, this should work with arbitrary positioning changes and css transitions if you desire.

Upvotes: 1

DaniP
DaniP

Reputation: 38252

Hi first at all you have this property:

overflow:hidden

That hides your shape and let only the visual as an arrow but hides to the subsubmenu. You may need to find a shape that only draws the arrow.

Also you are setting 

#main-nav ul li {
  position:relative;
}

Remove this and the subsubmenu can be the 100% height of the previous menu.

And on this selector:

 #main-nav li:hover  ul

Add the > to only affect the direct children ul of #main-nav li not all the ul inside:

#main-nav li:hover > ul

The demo http://plnkr.co/edit/WAZplAWxzLieRZh1jNMa?p=preview

Edit

You can see here how to obtain the right arrow shape , check this new Demo

Upvotes: 0

Nomak22
Nomak22

Reputation: 123

try this on line 61 change overflow (or remove it):

#main-nav li ul, .subMenu li:hover ul {overflow:hidden;}

to secure an overflow of left arrow at anchor hover just add overflow:hidden to taht anchor on line 71 in your CSS "style.css"

#main-nav li ul a, .subMenu li ul a {overflow:hidden;}

also remove position relative from your li elemnts, to align children ul's from top of parent ul becouse you have a border-top on line 41, you would have to add this, to align all 3 ul's from top :

#main-nav ul ul ul {top:-1px}

Hope I didn't forgot anything. Anyway your problem was only overflow :) other things are just cosmetic changes

Upvotes: 0

Related Questions