css - 我在菜单中的元素似乎没有宽度？

Question

看这个codepen演示

编辑 当然，硬编码元素的宽度不是解决方案。它应该只是实际标题的大小。

HTML

<br/>

<nav class="navigation">
     <div class="navfake"></div>
            <div class="singleelement">
    <div class="container">
        <div class="title">Test title 2</div>
        <div class="titlepicture">some picture</div>
    </div>
</div>
            <div class="singleelement">
    <div class="container">
        <div class="title">Test title newsfeed super long 1</div>
        <div class="titlepicture">some picture</div>
    </div>
</div>
    </nav>

CSS

/** the newsfeed and footer */
nav {
    width: 100%;
    height: 20px;
    position: relative;
}

.navfake {
    width: 100%;
    height: 100%;
    background: green;
    z-index: 10;
    position: relative;
}

.singleelement {
    display: inline-block;
    height: 60px;
    text-align: center;
}

.container {
    position: absolute;
    top: 0px;
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    -o-transition: all .8s ease;
    transition: all .8s ease;
    height: 200px;
}

.titlepicture {
    position: absolute;
    width: 100%;
    background-color: red;
    z-index: 10;
    height: 100px;
    overflow: hidden;
}

.container:hover {
    top: -80px;
}

.container:hover .titlepicture {
    height: 100px;
    z-index: 10;

}

.title {
    z-index: 555;
    position: relative;
    height: 20px;
    width: 100%;
}

.footer {
    position: relative;
    z-index: 1000;
    background-color: white;
}

Answer 1

The trick was to replace position absolute with position relative

HTML

<nav class="navigation">
     <div class="navfake"></div>
            <div class="singleelement">
    <div class="container">
        <div class="title">Test title 2</div>
        <div class="titlepicture">some picture</div>
    </div>
</div>
            <div class="singleelement">
    <div class="container">
        <div class="title">Test title newsfeed super long 1</div>
        <div class="titlepicture">some picture</div>
    </div>
</div>
    </nav>
     <div class="footer">some text blablablablablablabla
          <br/>some text blablablablablablabla
          <br/>some text
          <br/>some text
          <br/>some text
          <br/>some text
          <br/>some text
          <br/>xxx
      </div>

CSS

/** the newsfeed and footer */
nav {
    width: 100%;
    height: 20px;
}

.navfake {
    width: 100%;
    height: 100%;
    background: green;
    z-index: 10;
    position: relative;
}

.singleelement {
    display: inline-block;
    height: 60px;
    text-align: center;
    position: relative;
}

.container {
    top: -20px;
    position: relative;                 /**changed*/
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    -o-transition: all .8s ease;
    transition: all .8s ease;
    height: 200px;
}

.titlepicture {
    position: absolute;
    background-color: red;
    z-index: 10;
    height: 100px;
    overflow: hidden;
}

.container:hover {
    top: -80px;
}

.container:hover .titlepicture {
    height: 100px;
    z-index: 10;

}

.title {
    z-index: 555;
    position: relative;
    height: 20px;
    width: 100%;
}

.footer {
    position: relative;
    z-index: 1000;
    background-color: white;
}