делает меню CSS суб ссылка отображается вертикальной, а не горизонтальные

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

.vertical-nav { 
    height:auto; 
    list-style:none; 
    margin: 20px 0 0 0; 
} 
.vertical-nav li { 
    height: 25px; 
    margin: 0; 
    padding: 5px 0; 
    background-color: #666; 
    border: none; 
    text-align: center; 
    display: inline-block; 
    float: left; 
    min-width: 125px; /******* MODIFIED ********/ 
} 
.vertical-nav li:hover { 
    background-color:#f36f25; 
    color:#FFFFFF; 
} 
.vertical-nav li a { 
    font-family:Calibri, Arial; 
    font-size:18px; 
    font-weight:bold; 
    color:#ffffff; 
    text-decoration:none; 
} 
.vertical-nav li.current { 
    background-color:#F36F25; 
} 
.vertical-nav li.current a { 
    color:#FFFFFF; 
} 
vertical-nav ul li ul { 
    display:none; 
    list-style-type:none; 
    width:125px; 
    padding:0px; 
    margin-top:3px; 
    margin-left:-5px; 
} 
vertical-nav ul li:hover ul { 
    display:block; 
} 
vertical-nav ul li:hover ul li { 
    background-color:#555555; 
    width:125px; 
    height:30px; 
    display:inline-block; 
} 
vertical-nav ul li ul li:hover { 
    background-color:#333333; 
} 
vertical-nav ul li ul li a { 
    color:#FFF; 
    text-decoration:underline; 
} 
vertical-nav ul li ul li a:hover { 
    text-decoration:none; 
} 
.vertical-nav li ul { 
    display: none; 
    margin-top: 6px; 
    padding: 0; 
} 
.vertical-nav li:hover ul { 
    display: block; 
}

, но ссылки меню к югу показывают горизонтально, а не вертикально ...

Что лучше способ изменить CSS, чтобы сделать это, чтобы суб-ссылки отображались вертикально, а не горизонтали?

здесь является HTML меню:

<ul class="vertical-nav"> 
<li><a href="index.php">Link</a> 
<ul class="sub-menu"> 
     <li><a href="index.php">Sub Link</a></li> 
     <li><a href="index.php">Sub Link</a></li> 
    </ul> 
</li> 
</ul>

источник

2013-08-27 user2710234

.sub-menu li 
{ 
    clear: both; 
}

Добавить выше CSS. DEMO

источник

2013-08-27 10:49:25

thats it - но если у меня есть длинное имя, меняется вся ширина ссылки. http://jsfiddle.net/9AT2D/3/ - есть способ сделать родительские ссылки одинаковой ширины, но подменю связывает ширину имени без изменения ширины родительской ссылки – user2710234

.vertical-nav {width: 200px; } Аналогичным образом вы можете изменить ширину. –

Я сделал это сейчас - http://jsfiddle.net/9AT2D/4/ - поэтому ссылки подменю 200px, но что произойдет, если имя больше, поскольку они автоматически генерируются из базы данных MySQL. могу ли я сделать это процент? – user2710234

Как это

DEMO

CSS

.vertical-nav { 
    height:auto; 
    list-style:none; 
    width: 400px; /******* MODIFIED ********/ 
    margin: 20px 0 0 0; 
} 
.vertical-nav li { 
    height: 25px; 
    margin: 0; 
    padding: 5px 0; 
    background-color: #666; 
    border: none; 
    text-align: center; 
    display: inline-block; 
    float: left; 
    width: 200px; /******* MODIFIED ********/ 
} 
.vertical-nav li:hover { 
    background-color:#f36f25; 
    color:#FFFFFF; 
} 
.vertical-nav li a { 
    font-family:Calibri, Arial; 
    font-size:18px; 
    font-weight:bold; 
    color:#ffffff; 
    text-decoration:none; 
} 
.vertical-nav li.current { 
    background-color:#F36F25; 
} 
.vertical-nav li.current a { 
    color:#FFFFFF; 
} 
vertical-nav ul li ul { 
    display:none; 
    list-style-type:none; 
    width:125px; 
    padding:0px; 
    margin-top:3px; 
    margin-left:-5px; 
} 
vertical-nav ul li:hover ul { 
    display:block; 
} 
vertical-nav ul li:hover ul li { 
    background-color:#555555; 
    width:125px; 
    height:30px; 
    display:inline-block; 
} 
vertical-nav ul li ul li:hover { 
    background-color:#333333; 
} 
vertical-nav ul li ul li a { 
    color:#FFF; 
    text-decoration:underline; 
} 
vertical-nav ul li ul li a:hover { 
    text-decoration:none; 
} 
.vertical-nav li ul { 
    display: none; 
    margin-top: 6px; 
    padding: 0; 
} 
.vertical-nav li:hover ul { 
    display: block; 
}

источник

2013-08-27 10:48:57 falguni

делает меню CSS суб ссылка отображается вертикальной, а не горизонтальные

ответ

Смежные вопросы