Question

我无法使用我的导航菜单。滑出部分显示在它们应该滑出的菜单项下方大约10或20个像素。

这是HTML：

<nav><ul>
    <li><a href="index.html" TabIndex="10">Home</a></li>
    <li><a href="index.html" TabIndex="20">About Us +</a>
    <ul>    <li><a href="index.html" TabIndex="30">Background</a></li>
            <li><a href="index.html" TabIndex="40">Designing</a></li>
            <li><a href="index.html" TabIndex="50">Production</a></li>
    </ul></li>
    <li><a href="index.html" TabIndex="60">Promotions</a></li>
    <li><a href="index.html" TabIndex="70">Products +</a>
    <ul>    <li><a href="index.html" TabIndex="80">Dinnerware</a></li>
            <li><a href="index.html" TabIndex="90">Ornaments</a></li>
            <li><a href="index.html" TabIndex="100">Pots</a></li>
            <li><a href="index.html" TabIndex="110">SumWare Else</a></li>
    </ul></li>
    <li><a href="index.html" TabIndex="120">Orders +</a>
    <ul>    <li><a href="index.html" TabIndex="130">Order Forms</a></li>
            <li><a href="index.html" TabIndex="140">Special Request</a></li>
    </ul></li>
    <li><a href="index.html" TabIndex="150">Contact Us</a></li>
</ul></nav>

这就是CSS：

nav {
font-family: impact, sans-serif;
font-size:14px;
text-decoration: none;
padding-top:10px;
clear:both;
}

nav ul {
padding-left: 20px;
width:100px;
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #fbd0bd),color-stop(0.90, #E89C23));
background-image: -o-linear-gradient(bottom, #fff9f4 0%, #fbd0bd 99%);
background-image: -moz-linear-gradient(bottom, #fff9f4 0%, #fbd0bd 99%);
background-image: -webkit-linear-gradient(bottom, #fff9f4 0%, #fbd0bd 99%);
background-image: -ms-linear-gradient(bottom, #fff9f4 0%, #fbd0bd 99%);
background-image: linear-gradient(to bottom, #fff9f4 0%, #fbd0bd 99%);
background-repeat: no-repeat;
background-size: auto;
border-top: 2px solid #7c3d31;
border-right: 2px solid #7c3d31;
}

nav ul li {
display: block;
position: inline;
}

nav li ul{
display:none;
position: absolute;
margin-left:100px;
padding:0em;
clear:both;
z-index:0;
 }

 nav ul li a {
 padding:15px;
 display:block;
 text-decoration:none;
 color:#7c3d31;
}

nav ul li ul {
 display: none;
 position: absolute;

}

nav ul li:hover ul {
 display: block;
 position: absolute;
 opacity: 0.9;
}

nav ul li:hover ul li a {
display:block;
background-image: -webkit-gradient(linear,left, right,color-stop(0, #fbd0bd),color-stop(0.90, #E89C23));
    background-image: -o-linear-gradient(right, #fff9f4 0%, #fbd0bd 99%);
background-image: -moz-linear-gradient(right, #fff9f4 0%, #fbd0bd 99%);
 background-image: -webkit-linear-gradient(right, #fff9f4 0%, #fbd0bd 99%);
background-image: -ms-linear-gradient(right, #fff9f4 0%, #fbd0bd 99%);
background-image: linear-gradient(to right, #fff9f4 0%, #fbd0bd 99%);
background-repeat: no-repeat;
background-size: auto;
    color:#7c3d31;
    width: 90px;
    text-align: center;
border-bottom: 2px solid #7c3d31;
border-right: 2px solid #7c3d31;
border-left: 2px solid #7c3d31;
}

 nav ul li:hover ul li a:hover {
 background:#fbd0bd;
 color:#7c3d31;
}

请帮忙。我弄清楚我哪里出错了。

Answer 1

imo这个侧面菜单本来可以做得更好设计明智，把它放在一边并回答你的问题，Html元素有自己的默认样式，例如列表项目中的无序列表默认填充低于它，你可以调试它使用chrome / firefox开发人员工具来查找此类问题。

 nav ul li:hover ul {
 display: block;
 position: absolute;
 opacity: 0.9;
}

需要改为

  nav ul li:hover ul {
    display: block;
    position: absolute;
    opacity: 0.9;

    margin-top: -50px; /*This needs to be added*/
    }

Answer 2

要制作标准的弹出菜单，您应该将父li 项定位为'relative'，将 sub ul 定位为'absolute'和top 0，像这样：

nav ul li {
    display: block;
    position: inline;
}

更改为

nav ul li {
    display: block;
    position: relative;
}

并将'nav li ul'的定位修改为：

nav li ul{ position:absolute; top:0;left:100%; margin-left:0;}

这没关系。但通常最好将ul和li与儿童链接符号'＆gt;'链接起来，因为有时您可能想要添加第3级子菜单。所以上面的代码应该是

nav>ul>li{
  display: block;
  position: relative;
}
nav>ul>li>ul {
  position:absolute; top:0;left:100%; margin-left:0;
}

您可以采取一些模板进行学习。 MenuSo上共享了许多好的菜单模板。

滑出菜单不会定位在我想要的位置

2 个答案: