Question

我一直在搞乱这一段时间，但找不到问题。别人可以告诉我为什么我的孩子下拉菜单排在屏幕的左侧而不是在父母的下方？谢谢！

CSS：

nav {
  width:100%;
  height:auto;
  padding-top:12px;
  background-color:#B3975E;}

nav ul li {
  display:inline;
  width:10%;
  height:35px;
  list-style-type:none;
  font-family:Arial, Helvetica, sans-serif;
  color:#FFFFFF;
  font-size:16px;
}

nav ul li a {
  color:#FFFFFF;
  text-decoration:none;
  padding-right:30px;
  padding-bottom:5px;}

nav ul li a:hover, 
nav ul li:hover > a {
  color:#FD066E;}   

nav ul li ul {
  display:none;
  position:absolute;
  width:15%;
  min-width:150px;
  height:auto;
  padding:0 1em;
  margin-left:-10px;
  margin-top:31px;
  z-index:10;
  background:#CEBC97;
  border:1px #947A45 solid;
  border-bottom-right-radius:10px;
  border-bottom-left-radius:10px;}

nav ul li ul:hover li a {
  color:#444444;}  

nav ul li:hover ul,
nav ul li:hover ul li {
  display:block;}  

nav ul li ul li {
  display:none;
  width:100%;
  margin:0;
  padding:0;
  z-index:10;
  color:#000000;
  text-transform:none;
  font-weight:normal;}   

nav ul li ul li:hover {
  color:#444444;
  text-decoration:none;}    

nav ul li ul li a {
  display:block;
  text-transform:none;
  list-style:none;
  padding:.5em 0 .5em .5em;
  margin:0;
  z-index:10;
  font-family:Arial, Helvetica, sans-serif;
  font-size:16px;
  font-weight:normal;
  color:#444444;}

nav ul li:hover ul li a,
nav ul li ul:hover li a {
  display:block;
  margin:0;}

nav ul li ul li a:hover {
  color:#FFFFFF;
  text-decoration:none;}

HTML：

    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="#">Parent1</a>
                <ul>
                    <li><a href="#">Child1</a></li>
                    <li><a href="#">Child2</a></li>
                </ul>
            </li>
            <li><a href="#">Parent2</a>
                <ul>
                    <li><a href="#">Child1</a></li>
                    <li><a href="#">Child2</a></li>
                </ul>
            </li>
        </ul>
    </nav>

Answer 1

将您的代码更改为此

nav {
  /*width:100%;*/
  /*height:auto;*/
  /*padding-top:12px;*//*Remove this and add paddings to the child top make it align */
  background-color:#B3975E;}

nav li{list-style-type:none;}

nav ul >li {
  display:inline-block;
  padding: 20px 35px;/*add this to fixe the height*/
  /*width:10%;*/
  /*height:35px;*//*Remove this and add paddings to the child top make it align*/

  font-family:Arial, Helvetica, sans-serif;
  color:#FFFFFF;
  font-size:16px;
  position: relative/* You need this to fixe the child absolute position*/
}

nav ul li a {
  color:#FFFFFF;
  text-decoration:none;
  
  /*padding-right:30px;*/
  /*padding-bottom:5px;*/
}

nav ul li a:hover, 
nav ul li:hover > a {
  color:#FD066E;}   

nav ul li ul {
  display:none;
  position:absolute;
  top:100%;
  left: 0;
  width:100%;
  min-width:150px;
  height:auto;
  padding:0 1em;
  margin-left:-10px;
  /*margin-top:31px;*/
  z-index:10;
  background:#CEBC97;
  border:1px #947A45 solid;
  border-bottom-right-radius:10px;
  border-bottom-left-radius:10px;}

nav ul li ul:hover li a {
  color:#444444;}  

nav ul li:hover ul,
nav ul li:hover ul li {
  display:block;}  

nav ul li ul li {
  display:none;
  width:100%;
  margin:0;
  padding:0;
  z-index:10;
  color:#000000;
  font-weight:normal;}   

nav ul li ul li:hover {
  color:#444444;
  text-decoration:none;}    

nav ul li ul li a {
  display:block;
  text-transform:none;
  list-style:none;
  padding:.5em 0 .5em .5em;
  margin:0;
  z-index:10;
  font-family:Arial, Helvetica, sans-serif;
  font-size:16px;
  font-weight:normal;
  color:#444444;}

nav ul li:hover ul li a,
nav ul li ul:hover li a {
  display:block;
  margin:0;}

nav ul li ul li a:hover {
  color:#FFFFFF;
  text-decoration:none;}

<nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="#">Parent1</a>
                <ul>
                    <li><a href="#">Child1</a></li>
                    <li><a href="#">Child2</a></li>
                </ul>
            </li>
            <li><a href="#">Parent2</a>
                <ul>
                    <li><a href="#">Child1</a></li>
                    <li><a href="#">Child2</a></li>
                </ul>
            </li>
        </ul>
    </nav>

Answer 2

将此添加到您的css：

nav ul li {position:relative;}

替换css

nav ul li ul {
display:none;
position:absolute;
width:15%;
min-width:150px;
height:auto;
padding:0 1em;
left:10px;
z-index:10;
background:#CEBC97;
border:1px #947A45 solid;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;}

Answer 3

将position:relative用于子菜单的父元素。因此它将与特定元素相关。同时删除顶部和左侧的负边距。像下面一样更新你的CSS。

  nav ul li{position:relative;}
 nav ul li ul {
   display:none;
   position:absolute;
   width:15%;
   left:0;
   min-width:150px;
   height:auto;
   padding:0 1em;
   z-index:10;
   background:#CEBC97;
   border:1px #947A45 solid;
   border-bottom-right-radius:10px;
   border-bottom-left-radius:10px;
}

FIDDLE DEMO

儿童菜单不与父母排队？

3 个答案: