我正在试图修复此导航栏的智慧结束
在此处剪裁http://i.stack.imgur.com/eDFQK.png填写此处http://i.stack.imgur.com/0aHv2.png
通过这些图片，您可以看到我使用变换来创建菱形（或者是政治上正确的，对位图）菜单。我利用ul和li来做到这一点。
我希望剪辑联系人的结尾，我尝试使用溢出但它似乎不起作用。无论如何都有灵活的剪辑菜单栏的最后一个菜单项？或者如果没有，有人可以告诉我是否可以创建一个与联系人项目菜单一起使用的单独填充程序？
在解释中，当我悬停联系人项目菜单时，填充器也将进入悬停状态。并且填充程序需要适应浏览器大小。
这是我的HTML
<div class="outerwrap">
<div class="innerwrap">
<div class="container">
<div class="sixteen columns">
<div class="header">
<img class="scale-with-grid" id="logo" src="images/Logo-161x114.png" alt="Creative VistaIdea">
<div id="navbar">
<ul id="nav" >
<li class="rhombus"><a class="Home" href="#"><span><p>Home</p></span></a></li>
<li class="rhombus"><a class="About" href="#"><span><p>About</p></span></a>
<ul>
<li><a class="History" href="#"><span><p>History</p></span></a></li>
<li><a class="Board" href="#"><span><p>Board</p></span></a></li>
<li><a class="Vision" href="#"><span><p>Vision & Mission</p></span></a></li>
</ul>
</li>
<li class="rhombus"><a class="Benchmark" href="#"><span><p>Benchmark & Market</p></span></a></li>
<li class="rhombus"><a class="Service" href="#"><span><p>Service</p></span></a></li>
<li class="rhombus"><a class="Work" href="#"><span><p>Work</p></span></a></li>
<li class="rhombus"><a class="Client" href="contact.html"><span><p>Client</p></span></a></li>
<li class="rhombus"><a class="Contact" href="index.html"><span><p>Contact</p></span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
这是我的CSS：
#nav, #nav ul{margin:0px; padding:0px; list-style-type:none; list-style-position:outside;}
#nav a:link, #nav a:active, #nav a:visited{height:31px; display:block; text-decoration:none; background: #1a1a1a; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFhMWExYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0ZDRkNGQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #1a1a1a 0%, #4d4d4d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1a1a1a), color-stop(100%,#4d4d4d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1a1a1a 0%,#4d4d4d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1a1a1a 0%,#4d4d4d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1a1a1a 0%,#4d4d4d 100%); /* IE10+ */
background: linear-gradient(to bottom, #1a1a1a 0%,#4d4d4d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a1a1a', endColorstr='#4d4d4d',GradientType=0 ); /* IE6-8 */}
#nav a:hover {background: #2e3191; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJlMzE5MSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxYjc1YmIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #2e3191 0%, #1b75bb 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2e3191), color-stop(100%,#1b75bb)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #2e3191 0%,#1b75bb 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #2e3191 0%,#1b75bb 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #2e3191 0%,#1b75bb 100%); /* IE10+ */
background: linear-gradient(to bottom, #2e3191 0%,#1b75bb 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2e3191', endColorstr='#1b75bb',GradientType=0 ); /* IE6-8 */}
#nav li ul {position:relative; display:none;}
#nav li ul li a:link, #nav li ul li a:active, #nav li ul li a:visited {height:31px;
background: #859dc4; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzg1OWRjNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4ODkzYmUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #859dc4 0%, #8893be 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#859dc4), color-stop(100%,#8893be)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #859dc4 0%,#8893be 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #859dc4 0%,#8893be 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #859dc4 0%,#8893be 100%); /* IE10+ */
background: linear-gradient(to bottom, #859dc4 0%,#8893be 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#859dc4', endColorstr='#8893be',GradientType=0 ); /* IE6-8 */ ;}
#nav li ul li a:hover {background: #b3b1b1; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IzYjFiMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4MTgyODIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #b3b1b1 0%, #818282 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b3b1b1), color-stop(100%,#818282)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b3b1b1 0%,#818282 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b3b1b1 0%,#818282 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b3b1b1 0%,#818282 100%); /* IE10+ */
background: linear-gradient(to bottom, #b3b1b1 0%,#818282 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3b1b1', endColorstr='#818282',GradientType=0 ); /* IE6-8 */}
.History{width:13%;float:left;}
.Board{width:13%;float:left;}
.Vision{width:13%;float:left;}
li.rhombus
{
position: relative;
transform: skew(-35deg);
-webkit-transform: skew(-35deg);
-moz-transform: skew(-35deg);
-ms-transform: skew(-35deg);
-o-transform: skew(-35deg);
width:100%;
}
a.Home {width:10.1553784860558%;float:left;}
a.About {width:8.9601593625498%;float:left;}
a.Benchmark {width:20.1155378486056%;float:left;}
a.Service {width:9.5577689243028%;float:left;}
a.Work {width:10.5498007968127%;float:left;}
a.Client {width:10.5498007968127%;float:left;}
a.Contact {width:11.9482071713147%;float:left;}
li.rhombus span
{
transform: skew(35deg);
-webkit-transform: skew(35deg);
-moz-transform: skew(35deg);
-ms-transform: skew(35deg);
-o-transform: skew(35deg);
display:block;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}
答案 0 :(得分：1)
如果您不反对向最后一项添加元素，也就是说菜单不是动态创建的，您不需要跟踪最后一个元素是什么，那么您可以尝试添加div进入可以充当后填充物的最后一个LI。
<li class="rhombus"><div style='position:relative;z-index:10;'><a class="Contact" href="index.html"><span><p>Contact</p></span></a></div><div class='clipper'></div></li>
CSS：
.clipper{
width:50%;
height:100%;
background:black;
position:absolute;
right: -17.5%;
transform: skew(35deg);
-webkit-transform: skew(-35deg);
-moz-transform: skew(-35deg);
-ms-transform: skew(-35deg);
-o-transform: skew(-35deg);
z-index: 1;
}
答案 1 :(得分：0)
使用Pow-lan的答案，在不更改html的情况下进行操作，我添加到CSS中：
#nav > .rhombus:last-child:after {
content: "";
width: 29px;
height: 31px;
background-color: red;
position:absolute;
top: 0px;
right: 146px;
z-index: 1;
-webkit-transform: skew(35deg);
display: block;
}
#nav > .rhombus:last-child:hover:after {
content: "";
width: 29px;
height: 31px;
background-color: green;
position:absolute;
top: 0px;
right: 146px;
z-index: 1;
-webkit-transform: skew(35deg);
display: block;
}
悬停状态下的大多数代码都是多余的，它应该只是改变颜色。 我不得不承认，我不知道为什么正确的坐标需要是这个值，我想知道它来自于倾斜。我通过反复试验设置了它
结果是：
http://jsfiddle.net/vals/MV6CN/