horizonta/vertical menu

by oceog

HTML

<div>поменяйте ширину фрейма</div>
<div class="menu">
    <ul>
        <li><a href="#">Ссылка 1</a>

        </li>
        <li><a href="#">Ссылка 2</a>

        </li>
        <li><a href="#">Ссылка 3</a>

        </li>
        <li><a href="#">Ссылка 4444</a>

        </li>
    </ul>
</div>
<div id="content">сайт сайт сайт сайт сайт сайт сайт сайт сайт сайт сайт сайт сайт сайт
    сайт сайт сайт сайт сайт сайт сайт сайт сайт сайт сайт сайт сайт сайт сайт
    сайт сайт сайт сайт сайт сайт сайт сайт сайт сайт сайт сайт сайт сайт сайт
    сайт сайт сайт сайт сайт сайт сайт сайт сайт сайт сайт сайт сайт сайт сайт
    сайт</div>

CSS

.menu {
    display: table;
    width: 100%;
    border: 1px solid black;
    border-right: none;
    box-sizing: border-box;
}
.menu ul {
    display: table-row;
     background-color: green;
}
.menu ul li {
    border-right: 1px solid black;
    display: table-cell;
    text-align: center;
}

@media screen and (max-width: 400px) {
    .menu {
        display: block;
        float: left;
        width: auto;
        border: none;
    }
    .menu ul {
        display: block;
    }
    .menu ul li {
        border: none;
        padding-right: 10px;
        display: block;
        text-align: left;
    }
}