Question

标题可能有点让人困惑，让我用图片解释一下：

这就是我所拥有的：

我的HTML

<div id="nav" role="navigation">
        <ul>
            <li>
                <a href="">ABOUT</a>
            </li>
            <li>
                <a href="">I LIKE POTATOES</a>
                    <ul>
                        <li>
                            <a href="">CARROTS</a>
                        </li>
                        <li>
                            <a href="">EGGPLANTS</a>
                        </li>
                        <li>
                            <a href="">SAUSAGES</a>
                        </li>
                    </ul>
            </li>
            <li>
                <a href="">DISPLAY 3</a>
                    <ul>
                        <li>
                            <a href="">FEATURE 1</a>
                        </li>
                        <li>
                            <a href="">FEATURE 2</a>
                        </li>
                        <li>
                            <a href="">FEATURE 3</a>
                        </li>
                    </ul>
            </li>
            <li>
                <a href="">DISPLAY 4</a>
                    <ul>
                        <li>
                            <a href="">FEATURE 1</a>
                        </li>
                        <li>
                            <a href="">FEATURE 2</a>
                        </li>
                        <li>
                            <a href="">FEATURE 3</a>
                        </li>
                    </ul>
            </li>
        </ul>
    </div>

我的CSS （根据我在10岁以下的声誉而获得的最终消除链接）

body {
    margin: 0 auto;
    padding: 0 auto;
    background-color: #999999;
}

div#nav > ul {
    background-color: #333333;
    padding: 20px;
    margin: 0 auto;
    padding: 0 auto;
}

div#nav > ul > li,
div#nav > ul > li > ul > li {
    list-style-type: none;
    text-align: center;
}


div#nav > ul > li {
    display: inline-block;
}

div#nav > ul > li > a,
div#nav > ul > li > ul > li > a {
    text-decoration: none;
}

div#nav > ul > li > ul > li {
    margin: 0px 5px 12px 5px;
}

/****************
  LINKS STYLING AND LINKS HOVERS
 ***************/

div#nav > ul > li > a {
    color: #fafafa;
    font-family: 'Lato', sans-serif;
    padding: 10px;
    font-size: 1.2em;
    padding: 20px;
}

div#nav > ul > li> a:hover {
    color: #555555;
    transition: 0.3s;
}

div#nav > ul > li > ul > li > a {
    color: #fafafa;
    text-decoration: none;
    font-family: 'Lato', sans-serif;
}

div#nav > ul > li > ul > li > a:hover {
    color: #333333;
    transition: 0.3s;
}

/****************
  DROPDOWN 
 ***************/

div#nav > ul > li > ul {
    display: none;
    background-color: #555555;
    margin-top: 20px;
}

div#nav > ul > li:hover > ul {
    display: block;
    position: absolute;
    padding: 20px;
}

/****************
  HOVER BORDERS 
 ***************/

div#nav > ul > li:hover {
    border-left: #555555 solid 1px;
    border-right: #555555 solid 1px;
}

Answer 1

在你的css中：

/****************
 DROPDOWN 
 ***************/
div#nav > ul > li{
  position: relative;
}
div#nav > ul > li > ul {
  width : 100%;
  -webkit-padding-start:0;
  display: none;
  background-color: #555555;
  margin-top: 20px;
}

div#nav > ul > li:hover > ul {
  display: block;
  position: absolute;
  padding : 20px 0;
}

要修正绝对元素的大小，您必须使用position : relative声明父级。

然后你修复width : 100%并左右移除你的填充。要完成镶边，请为ul添加填充，这样您就必须将此值设为0。

我不知道它是否是更好的答案，但它的工作

如何使CSS Dropdown与它的父级相同

1 个答案: