Question

我有一个垂直菜单的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;
}

如何在没有像菜单标题不同的href链接的情况下制作<li>元素，以便下面的链接就像子菜单

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

例如，在Link Title所说的地方，需要与正确的标题不同。也许是居中或某事

Answer 1

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

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

#vertical_menu li span {}

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

Answer 2

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

您可以使用：

li:not(a) {
   color: red;   
}

Answer 3

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

Demo

Answer 4

试试这个

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;

}

Answer 5

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

.title{
    text-align: center;
    color: blue;
    font-weight: bold;
    padding: 5px 0 0 0;
}

CSS菜单添加标题链接

5 个答案: