html - 结合菜单和下拉菜单的背景

Question

我只想创建一个带下拉菜单的菜单。我的问题是我只想合并主菜单的背景和下拉菜单，如下图所示。请帮帮我。

菜单图片

http://s1369.photobucket.com/user/ashast1/media/Capture_zps0b0c58e6.png.html

菜单的jsfiddle

 http://jsfiddle.net/6KPXC/

Answer 1

这是一个 FIDDLE

.nav ul{list-style-type:none; position:relative;}
.nav ul li{position:relative; text-transform:uppercase; display:inline-block;}
.nav ul li:hover a{border:1px solid #d7d7d7;background:#fff;color:#f9852b; border-bottom:none;}
.nav ul li a{position: relative; padding:10px; color:#5E6062; display:block;border:1px solid #fff; z-index: 100;}
.nav ul li a:hover{position: relative; color:#f9852b;border:1px solid #d7d7d7; z-index:11; border-bottom:none;}
.nav ul li:hover ul{display:block;padding:20px;}
.nav ul ul{position:absolute; display:none; min-width: 200px; border:1px solid #d7d7d7; border-top: none; margin-top:-1px;left:-10px;z-index:10;}
.nav ul ul:after{position: absolute; content: ""; top: 0; right: 0; width: 100%; border-top:1px solid #d7d7d7;}
.nav ul ul li a, .nav li:hover li a{border:0px; color:#515151; text-transform:capitalize;padding:3px 10px;}
.nav ul ul li a:hover, .nav li:hover li a:hover{border:none; color:#515151; text-decoration:underline;}