CSS菜單添加標題鏈接

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; 
} 

我怎樣才能讓<li>元素，而無需像菜單標題不同的AA HREF鏈接所以下面的鏈接就像一個子菜單

這裏是完整的代碼小提琴：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

你可以設置一些樣式o ñ#vertical_menu li，這將#vertical_menu li a

Demo

Answer 4

被override試試這個

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

您可以鏈接標題在單獨的類中定義設置的風格和給這個類鏈接標題李的。看看這裏的工作演示：http://jsfiddle.net/32hqL/9/

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