Question

我需要这个才能将阴影应用于菜单按钮。我知道z-index应该可以解决问题，但我不能让它起作用！

http://jsfiddle.net/blackice856/TR4Ls/5/

    <div id="nav">
<ul>
<div id="navshadow"><li><a>TEST</a></li></div>
<div id="navshadow"><li><a>TEST</a></li></div>
<div id="navshadow"><li><a>TEST</a></li></div>
<div id="navshadow"><li><a>TEST</a></li></div>
<div id="navshadow"><li><a>TEST</a></li></div>
<div id="navshadow"><li><a>TEST</a></li></div>
</ul>
</div>

我错过了什么吗？

Answer 1

嗨，那么首先只删除那些div，你可以在li元素中只有直接的ul标签，你也不需要：

<div id="nav">
  <ul>
   <li><a>TEST</a></li>
   <li><a>TEST</a></li>
   <li><a>TEST</a></li>
   <li><a>TEST</a></li>
   <li><a>TEST</a></li>
   <li><a>TEST</a></li>
  </ul>
</div>

然后在box-shadow或li代码中使用a作为属性：

#nav li{
  box-shadow: 0px 0px 10px 3px rgba(0,0,0,.3);
}

<子> Follow this link to learn the syntax

在:hover上，您可以更改z-index值，但请记住在元素上设置非静态位置：

#nav li:hover{
  position:relative;
  z-index:10;
  box-shadow: 0px 0px 10px 3px rgba(0,0,0,.8);
}

选中 Demo Fiddle

Answer 2

试试这个fiddle

#nav {
    margin: 0;
    padding: 0;
    width: 100%;
    float: left;
    background-color: #FFFFFF;
}
#nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 960px;
}
#nav li {
    float: left;
}
#nav a {
    margin: 0;
    padding:0;
    height:60px;
    line-height:60px;
    width:160px;
    display: block;
    text-decoration: none;
    color: #969696;
    font-family:'opensanslight';
    font-size:14px;
    border-bottom:5px solid #e35805;
    background:#FFFFFF;
    text-align:center;
}
#nav a:hover {
    color: #fa650c;
    border-bottom:5px solid #fa7d31;
    cursor:pointer;
    -webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         7px 7px 5px 0px rgba(50, 50, 50, 0.75);      
}
.navshadow {
    margin:0;
    padding:0;
    width:160px;
    height:60px;
    background-color:#000000;
    display:block;
    float:left;
    position:relative;
    z-index:2000;

}

将div推到<a> class</a>

2 个答案: