主页 / 问题 / 1081004
Accepted
ioprst
Asked:2020-02-11 15:24:34 +0000 UTC2020-02-11 15:24:34 +0000 UTC

将子菜单块拉伸到嵌套元素的最大宽度

  • 772

您需要将嵌套菜单块拉伸到等于最大嵌套元素宽度的宽度（在本例中<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 项（=> 第一项的背景也增加）？

html

1 个回答

  1. Best Answer

    删除width:100%并替换为width:auto;

    对于绝对元素width:100%，这是相对定位的父项的宽度（即，在您的情况下，是“项目”项的宽度）。

    是的，第一段的背景也增加了，因为 这不是第一个背景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>

    • 3

相关问题