1

Basically I want the list to have its sub-list displayed next to it, and the other list elements move aside nicely (transition) but if i set overflow it vertically aligns the sublist and if i set display: none then transitions don't work at all.

I just want the list to work like

Test Test Test

Then on hover with the first test and it pushes the last two tests aside smoothly and ends up

Test Test2 Test3 Test Test

I've tried searching and applying methods from other threads, but I can't find anything that will fit it, and work in IE nicely. I don't care for the transition to be working in IE, just that the list works.

http://jsfiddle.net/qohw1dxj/

<ul>
    <li>
        <a href="#">Test</a>
        <ul>
            <li><a href="#">Test2</a></li>
            <li><a href="#">Test3</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Test</a>
        <ul>
            <li><a href="#">Test2</a></li>
            <li><a href="#">Test3</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Test</a>
        <ul>
            <li><a href="#">Test2</a></li>
            <li><a href="#">Test3</a></li>
        </ul>
    </li>
</ul>

* {
    padding: 0;
    margin: 0;
    -webkit-transiton: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

ul {
    list-style: none;
}

ul li {
    display: inline-block;
}

ul li:hover ul {
    max-width: 10000px;
    max-height: 10000px;
}

ul li ul {
    display: inline-block;
    max-width: 0px;
    max-height: 0px;

    padding: 0;
    list-style: none;
}
Yes Man
  • 411
  • 3
  • 15

2 Answers2

2

Did you mean something like this:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
* {
    padding: 0;
    margin: 0;
}
ul {
    list-style:none;
    white-space:nowrap;
}
ul li {
    display: inline-block;
}
ul li a {
    background:red;
    padding:10px;
    display:inline-block;
}
.menu > li > a {
    position:relative
}
ul li li a {
    color:red;
    background:green
}
ul li ul {
    display: inline-block;
    width:0;
    height:0;
    max-width:0;
    visibility:hidden;
}
ul li:hover ul {
    margin-left:0;
    width:auto;
    height:auto;
    opacity:1;
    max-width:1000px;
    visibility:visible;
    -webkit-transiton: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
</style>
</head>

<body>
<ul class="menu">
        <li> <a href="#">Test A</a>
                <ul>
                        <li><a href="#">Test2</a></li>
                        <li><a href="#">Test3</a></li>
                </ul>
        </li>
        <li> <a href="#">Test B</a>
                <ul>
                        <li><a href="#">Test2</a></li>
                        <li><a href="#">Test3</a></li>
                </ul>
        </li>
        <li> <a href="#">Test C</a>
                <ul>
                        <li><a href="#">Test2</a></li>
                        <li><a href="#">Test3</a></li>
                </ul>
        </li>
</ul>
</body>
</html>
Paul O'B
  • 431
  • 2
  • 4
  • What about transitioning back to hidden? How could I smoothly put top lists back in their original place? There's fade in, but I don't know about out. Also, the last element doesn't work properly. – Yes Man Oct 19 '14 at 15:55
  • You could use a margin-left instead and do something like this http://codepen.io/paulobrien/full/pcGzb/. – Paul O'B Oct 19 '14 at 19:23
0

The transition rule cannot be applied to display style in CSS. This may be a solution you can try out: Transitions on the display: property

Community
  • 1
  • 1
optimus203
  • 108
  • 1
  • 8