2013-08-02 2 views
0

У меня есть этот CSS для вертикального меню:CSS Menu добавить название ссылка

@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> элементов без аа HREF ссылки другой, как заголовок меню, так что ссылки ниже как подменит

здесь скрипка с полным кодом: http://jsfiddle.net/32hqL/

, например, где он говорит Link Title, должно отличаться как надлежащее названием. может быть, в центре или что-то

ответ

0

Вы можете установить стиль o п #vertical_menu li, который будет заместить #vertical_menu li a

Demo

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; 

} 
0

Вы можете задавать набор стилей для названия ссылки в отдельный класс и дать этому классу ссылку на название li. Взгляните на рабочую демонстрацию здесь: http://jsfiddle.net/32hqL/9/

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