CSS3 to make iOS-style pop-up menu effects

First, we'll write the basic HTML structure.

<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>

Add an active class to the LI element, identify the style of the mouse response, add a PopOver class to the large div, and make it easier for us to find this element.
Let's look at how the CSS style is.
First we add a little effect to the DIV

. popover {
  position:relative
  width:200px;
  padding:5px;
  Background: #606 060;
  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 (2 255, 255, 0.08), inset-1px 0 rgba (255, 255, 255, 0.08), 0 2px 8px rgba (0, 0, 0, 0.5);
}

In the code above, we give the div an inner shadow and a gradient background, thanks to CSS3 's advanced properties, otherwise they can only use the background image

Then we define the UL style

. 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);
}

This looks like, DIV and UL have a little gap between, from the visual view is to have a border
And then we add that triangle effect

. 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;
}

Set Li Style

. 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;
}

Define a LINK element mouse response style

. 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);
}

All right, here's the core code for this effect, and there are some code that isn't listed here, such as emptying the browser default to the element's style values.