Растянуть блок подменю на максимальную ширину вложенного элемента

Question

Необходимо растянуть блок вложенного меню на ширину, которая равна ширине максимального вложенного элемента (в данном случае <li><a>Text<a/></li>).

* {
    margin:0;
    padding:0;
}

html, body {
  height: 100%;
}

.wrapper {
  height: 100%;
  display: table;
  width: 100%;
}

.header {
  display: table-row;
  height: 0;
}

.main {
  height: 100%;
  display: table;
  width: 100%;
}

.horizontalbar {
  display: table-row;
  height: 0;
}

.box {
  display: table-cell;
}

.sidebar {
  width: 0;
}

.content {
  height: 100%;
}

.content object {
  width: 100%;
  height: 100%;
  border: none;
  margin: 0;
  padding: 0;
  display: block;
}

.footer {
  display: table-row;
  height: 0;
}

/*
header
*/

nav {
    width: 100%;
    /*margin: 0 auto 30px;*/
    margin: 0 auto 0;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.topmenu > li {
    display: inline-block;
    margin-right: 20px;
    position: relative;
}

.topmenu > li:last-child {
    margin-right: 0;
}

a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    outline: none;
    transition: .5s linear;
}

/*.fa {*/
/*    color: inherit;*/
/*    padding-left: 10px;*/
/*}*/

.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 10;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

.menubar ul {
    background: #00d3ec;
}

.menubar ul a {
    color: #695753;
}

.menubar .submenu {
    display: none;
    background: #00d3ec;
}

.menubar ul li:hover .submenu {
    display: block;
}

.submenu li a {
    border-bottom: 1px solid rgba(255,255,255,.3);
    color: #695753;
}

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Tmp</title>
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body bgcolor="#FFFFFF">
    <div class="wrapper">
        <div class="header">
            <nav class="menubar">
                <ul class="topmenu">
                    <li><a href="/">Домой</a></li>
                    <li><a href="#">Проекты</a>
                        <ul class="submenu">
                            <li><a href="#">Test</a></li>
                            <li><a href="#">TestTestTestTestTest</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Пользователь</a></li>
                    <li><a href="/logout/">Выход</a></li>
                </ul>
            </nav>
        </div>
    </div>
</body>
</html>

См. вложенное меню в "Проекты".

Как сделать, чтобы заливка меню полностью покрывала пункт TestTestTestTestTest (=> фон первого пункта тоже увеличивается)?

Answer 1

Убрать width:100% и заменить на width:auto;

Для absolute элемента width:100% - это ширина родителя с позицией relative (т.е. в вашем случае ширина пункта "проекты").

Да, фон первого пункта так же увеличивается, т.к. это фон не первого li, а всего контейнера ul в который вложены все li.

* {
    margin:0;
    padding:0;
}

html, body {
  height: 100%;
}

.wrapper {
  height: 100%;
  display: table;
  width: 100%;
}

.header {
  display: table-row;
  height: 0;
}

.main {
  height: 100%;
  display: table;
  width: 100%;
}

.horizontalbar {
  display: table-row;
  height: 0;
}

.box {
  display: table-cell;
}

.sidebar {
  width: 0;
}

.content {
  height: 100%;
}

.content object {
  width: 100%;
  height: 100%;
  border: none;
  margin: 0;
  padding: 0;
  display: block;
}

.footer {
  display: table-row;
  height: 0;
}

/*
header
*/

nav {
    width: 100%;
    /*margin: 0 auto 30px;*/
    margin: 0 auto 0;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.topmenu > li {
    display: inline-block;
    margin-right: 20px;
    position: relative;
}

.topmenu > li:last-child {
    margin-right: 0;
}

a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    outline: none;
    transition: .5s linear;
}

/*.fa {*/
/*    color: inherit;*/
/*    padding-left: 10px;*/
/*}*/

.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    width: auto;
    z-index: 10;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

.menubar ul {
    background: #00d3ec;
}

.menubar ul a {
    color: #695753;
}

.menubar .submenu {
    display: none;
    background: #00d3ec;
}

.menubar ul li:hover .submenu {
    display: block;
}

.submenu li a {
    border-bottom: 1px solid rgba(255,255,255,.3);
    color: #695753;
}

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Tmp</title>
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body bgcolor="#FFFFFF">
    <div class="wrapper">
        <div class="header">
            <nav class="menubar">
                <ul class="topmenu">
                    <li><a href="/">Домой</a></li>
                    <li><a href="#">Проекты</a>
                        <ul class="submenu">
                            <li><a href="#">Test</a></li>
                            <li><a href="#">TestTestTestTestTest</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Пользователь</a></li>
                    <li><a href="/logout/">Выход</a></li>
                </ul>
            </nav>
        </div>
    </div>
</body>
</html>

БЛОГ НА HUSL

Растянуть блок подменю на максимальную ширину вложенного элемента

Ответы (1 шт):