在
this page我希望导航右边的整个空间都是白色的.
所以,我使用：在CSS选择器之后实现了5px宽的白色块,我希望有一种方法可以使它适合可用的宽度,尽管我对其他建议持开放态度！：
#menu-main-menu:after {
content:"";
display:block;
background:#fff;
width:5px;
height:30px;
float:right;
}
这是简化的HTML：
<div class="menu"><ul id="menu-main-menu"> <li><a href="#">Home</a></li> <li><a href="#">About us</a></li> <li><a href="#">Courses & prices</a></li> <li><a href="#">Activities in Rio</a></li> <li><a href="#">Accommodation</a></li> <li><a href="#">News</a></li> <li><a href="#">FAQs</a></li> <li><a href="#">Contact</a></li> </ul> </div>
以及所有相关的CSS：
#primary-menu ul {
overflow:hidden;
}
#primary-menu li {
list-style:none;
float:left;
}
#primary-menu a {
color:#333;
background: #fff;
display:block;
}
#primary-menu .current-menu-item a,#primary-menu .current-page-parent a {
color:#fff;
background:none;
}
#menu-main-menu:before {
content:"";
display:block;
background:#fff;
width:20px;
height:30px;
float:left;
}
#menu-main-menu:after {
content:"";
display:block;
background:#fff;
width:5px;
height:30px;
float:right;
}
感谢您抽出宝贵时间查看我的问题！
卡罗琳
解决方法
@H_502_21@ 您可以将:: after伪选择器添加到li.current-menu-item而不是#menu-main-menu,然后从该元素添加白色背景..current-menu-item:after {
background: none repeat scroll 0 0 #fff;
content: "";
height: 30px;
position: absolute;
right: -1000px; /* these numbers are the same */
top: 0;
width: 1000px; /* and need to be at least the width of the menu */
}
#primary-menu li {
position: relative; /* position the ::after element relative to the li */
}
#primary-menu ul {
....
overflow: hidden; /* you already have this to clear your floats */
.... /* but I thought I should emphasise that you need it */
}
