css3制作IOS风格的弹出菜单效果

首先我们来编写基本的HTML结构

<div class="popover">
  <ul>
    <li class="active"><a href="index.html">Bookmarks</a></li>
    <li class="active"><a href="index.html">Passwords</a></li>
    <li><a href="index.html">Preferences</a></li>
    <li><a href="index.html">History</a></li>
  </ul>
</div>

给LI元素添加一个active类，标识鼠标响应的样式，给大的div添加一个popover类，便于我们查找到这个元素。
接下来我们来看看CSS样式是怎样的。
首先我们给div添加一点效果

.popover {
  position: relative;
  width: 200px;
  padding: 5px;
  background: #606060;
  border: 1px solid black;
  border-radius: 11px;
  background-image: -webkit-linear-gradient(top, #606060, #4a4a4a);
  background-image: -moz-linear-gradient(top, #606060, #4a4a4a);
  background-image: -o-linear-gradient(top, #606060, #4a4a4a);
  background-image: linear-gradient(to bottom, #606060, #4a4a4a);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.2), inset 1px 0 rgba(255, 255, 255, 0.08), inset -1px 0 rgba(255, 255, 255, 0.08), 0 2px 8px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.2), inset 1px 0 rgba(255, 255, 255, 0.08), inset -1px 0 rgba(255, 255, 255, 0.08), 0 2px 8px rgba(0, 0, 0, 0.5);
}

上面的代码中，我们给div设置一个内阴影和渐变背景，这都要归功于CSS3先进的属性，不然这些效果就只能使用背景图片

然后我们定义UL的样式

.popover ul {
  overflow: hidden;
  background: white;
  border: 1px solid black;
  border-radius: 7px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.1), 0 1px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.1), 0 1px rgba(255, 255, 255, 0.1);
}

这样看起来，div和ul之间就有了一点间隙，从视觉上看就是有了边框
然后我们添加那个三角形效果

.popover:before, .popover:after, .popover ul:before {
  content: '';
  display: block;
  position: absolute;
  left: 22px;
  width: 0;
  height: 0;
  border: 7px outset transparent;
}
.popover:before {
  top: -14px;
  border-bottom: 7px solid black;
}
.popover:after {
  top: -13px;
  border-bottom: 7px solid #888;
}
.popover ul:before {
  z-index: 2;
  top: -12px;
  border-bottom: 8px solid #666;
}

设置LI样式

.popover li {
  display: block;
}
.popover li + li {
  border-top: 1px solid #eee;
}
.popover li:first-child a {
  border-radius: 7px 7px 0 0;
}
.popover li:last-child a {
  border-radius: 0 0 7px 7px;
}

定义A链接元素鼠标响应样式

.popover a {
  display: block;
  position: relative;
  line-height: 44px;
  padding: 0 15px 0 48px;
  font-size: 16px;
  font-weight: bold;
  color: black;
  text-decoration: none;
}
.popover a:hover {
  background: white;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

好了以上就是这个效果的核心代码，有一些代码在这里没有列出来，比如清空浏览器默认给元素的样式值等。