将菜单对齐到响应列结构缩略图网格？

Question

我正在尝试将菜单与响应式列结构缩略图网格对齐，并在仅使用css时悬停添加标题，但不成功也许有人可以帮助我？

Fiddle

<header>
<nav>
    <ul>
        <li><a href="#">Menu</a>
            <ul>
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
            </ul>
        </li>
    </ul>   
</nav>
</header>

<div id="content">
<div class="col-25"><a class="thumb" href="#"><img src="http://fakeimg.pl/500x310/999/"><div class="caption">Title  untitled</div></a></div>

Answer 1

添加此媒体查询...

@media all and (max-width: 400px) and (min-width: 0px) {

        header {
            margin: 0 30px;
        }

        #content {
            margin-left: 20px;
            margin-right: 20px;
        }

        .col-25 {
            width: 100%;
        }
    }

    ul {
        width: 100% !important;
    }

    }