0

我有这个用于垂直菜单的 CSS：

@charset "UTF-8";
/* CSS Document */

#vertical_menu {
    float:left;
    padding-left:10px;
}

#vertical_menu > ul > li {
    display:inline-block;
    width:250px;
}
#vertical_menu > li {
    display:inline-block;
    list-style:none;
    margin-left:-20px;
}
#vertical_menu li a {
    display:block; 
    padding-bottom:10px;
    margin-top:15px;
    border-bottom:4px solid #000000;
    color: #000000;
    text-decoration:none;
    text-align:center;
}
#vertical_menu li a:hover { 
    border-color:#666666; 
    color:#666666
}

ul {
    padding:0px;
    margin:0px;
}

如何使<li>没有 aa href 链接的元素像菜单标题一样不同，所以下面的链接就像子菜单

这是完整代码的小提琴：http: //jsfiddle.net/32hqL/

例如，在它说的地方Link Title，需要像一个正确的标题一样不同。也许居中或其他

4

5 回答 5

1

您可以将标题包装在 a 中span，然后设置跨度的样式：

<li><span>LINK TITLE</span></li>

#vertical_menu li span {}

http://jsfiddle.net/peteng/32hqL/4/

于 2013-08-02T11:35:07.433 回答
0

尝试这个

http://jsfiddle.net/32hqL/11/

CSS

@charset "UTF-8";
/* CSS Document */

#vertical_menu {
    float:left;
    padding-left:10px;
}

#vertical_menu > ul > li {
    display:inline-block;
    width:250px;
}
#vertical_menu > li {
    display:inline-block;
    list-style:none;
    margin-left:-20px;
}
#vertical_menu li a {
    display:block; 
    padding-bottom:10px;
    margin-top:15px;
    border-bottom:4px solid #000000;
    color: #000000;
    text-decoration:none;
    text-align:center;
    font-weight:100;
}
#vertical_menu li a:hover { 
    border-color:#666666; 
    color:#666666
}

ul {
    padding:0px;
    margin:0px;
}

li:not(a) {
 color: red;
    text-align:center;
    font-weight:600;

}
于 2013-08-02T11:38:12.053 回答
0

您可以在单独的类中为链接标题定义一组样式，并将该类赋予链接标题 li。看看这里的工作演示：http: //jsfiddle.net/32hqL/9/

.title{
    text-align: center;
    color: blue;
    font-weight: bold;
    padding: 5px 0 0 0;
}
于 2013-08-02T11:40:43.047 回答
0

http://jsfiddle.net/32hqL/1/

您可以使用：

li:not(a) {
   color: red;   
}
于 2013-08-02T11:34:53.097 回答
0

您可以在 上设置一些样式#vertical_menu li，这将被覆盖#vertical_menu li a

演示

于 2013-08-02T11:35:23.733 回答