Question

嵌入式图片描述了我的布局。如您所见，问题出在我的水平菜单中。首先，它是右对齐，然后选定的选项卡没有底部边框（这会产生前纸效果）。如果您选择第二个标签，则第二个 li 将没有底部边框，其余部分将被连接。

问题是，如何实现这一目标？我能想到的唯一解决方案是：悬停img，删除选定的底部边框将为空白。

CSS layout preview

到目前为止的守则：

body
{
font:100% 'century gothic', Verdana, Arial, Helvetica, sans-serif;
color:#3F3F3F;
}
#wrapper
{
width:960px;
height:700px; /*temp*/
margin:0 auto;  
background:#FFF;
}

#header   /*not visible on the embedded layout*/
{
width:960px;
height:91px;
}

#nav-bar
{
width:960px;
height:50px;

border-bottom:#000070 1px solid;  
    /*
       If only <ul> has bottom border then i wouldn't have the bottom border for 
       the whole #nav-right. But this is also a problem for the selected 
       tab that doesn't have any
    */
}
#nav-left
{
    float:left;
width:73px;
height:50px;
border-right:1px #000070 solid;
}
#nav-right
{
float:left;
width:882px;
height:50px;

display:inline-block;
position:relative;  
    /*now i can use absolute on the <ul> for bottom-right positioning*/
}
#nav-right ul
{
list-style: none;
/*padding: ...  ;*/

position:absolute;
bottom:0px;
right:5px;

border-top:1px solid #000070;
border-left:1px solid #000070;
border-right:1px solid #000070;
 }
 #nav-right li 
 {
    display:inline-block;
/*padding: ...;*/
 }
 #nav-right li a 
 {
/*padding: ...;*/
text-decoration:none;
margin:0;
color:#CCC;
 }
 #nav-right li a:hover 
 {
color:#000070;
font-weight:bold;                
 }
 #content
 {
    width:960px;
clear:both;
 }
    #con-left{/*...*/}
     #con-right{/*...*/}



 HTML STRUCTURE:

<body>
<div id="wrapper">

    <div id="header"><img src="#" /></div>

    <div id="nav-bar">
        <div id="nav-left"></div>
        <div id="nav-right">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Items</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>  <!--END: nav-bar-->

    <div id="content">
        <div id="con-left"></div>
        <div id="con-right">
            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices semper orci in euismod. Proin sed justo at lectus dapibus <br> 
            interdum. Donec quis elit massa, id porttitor eros. Nullam vel consectetur diam. <br>
            Phasellus bibendum, justo sed vehicula luctus, velit lectus rhoncus velit, at placerat nibh sapien quis felis. Mauris id aliquet. <br>  
            Integer mattis convallis luctus. Vivamus suscipit euismod sodales. Suspendisse cursus, erat eu egestas gravida, est mi semper ,<br> 
            quis sagittis purus mi sit amet nisl. Praesent adipiscing molestie sem. Mauris vitae arcu nibh, tristique laoreet nisi. Proin quis<br>
            id sapien condimentum facilisis et at odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. <br>
            Morbi eget est elit, nec rutrum enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.<br>
            </p>     
        </div>
    </div>


</div><!--END: wrapper-->

有关如何为选定标签完成无底边框效果的任何建议吗？

我制作小图片的效果不是很好，如果有可能我想用CSS做。如果它涉及添加几个div左右无关紧要。

Answer 1

您可以添加以下css：

ul li:hover {
    border-bottom: 1px solid white;
    margin-bottom: -1px;
}

因此，当您将菜单的li悬停时，白色边框会与容器div的蓝色边框重叠。

示例：http://jsbin.com/ujomi5/3

Answer 2

如何定义选定的css类并将其仅应用于li中当前选定的ul元素。是否删除了通常应用于所有ul元素的边框？我假设在页面之间导航的任何机制也可以将该css类添加到适当的li元素。

使用类选择器时，您使用的是特定于id的css选择器可能会更强大。假设您有以下样式;

.nav-left { border-bottom: 1px solid black; }
.nav-selected { border-bottom: 0 solid black; color:blue; }
#nav-item-1 { background-color: red; }   
#nav-item-2 { background-color: green; }
#nav-item-2 .nav-selected { color: orange; }

如果必须呈现输出并且不使用jQuery这样的框架将客户端样式应用于元素，那么元素中可以有多个类说明符。

<li id="nav-item-1" class="nav-left nav-selected">
<li id="nav-item-2" class="nav-left">

类属性的顺序会覆盖以前的类选择器，因此nav-selected将删除应用nav-left的边框。对于item-1和item-2元素，添加id选择器将分别为红色和橙色绿色。

自定义horiz.menu CSS底线伎俩？需要

2 个答案: