![](/img/trans.png)
[英]Jquery vertical multilevel menu parent li catches mouseclicks of inner ul?
[英]CSS Vertical ul li menu with 2 lines vertical centered
你好有以下奇怪的问题,如果它是一行,可以垂直居中菜单文本,但是2行会搞砸我的设计。 在每个浏览器中它看起来都不同 它还必须与浏览器兼容。 有人有想法吗?
这是一个在线版本:
HTML:
<ul id="vert-menu">
<li><a href="#">Organisatie</a></li>
<li><a href="#">Feiten en cijfers</a></li>
<li><a href="#">Historie</a></li>
<li><a href="#">Kennis & ontwikkeling</a></li>
<li><a href="#">Maatschappelijk betrokken</a></li>
<li><a href="#">Help mee</a></li>
<li><a href="#">Samenwerking in de zorg</a></li>
<li><a href="#" class="active">Samen leven, samen werken</a>
<ul class="sub-menu">
<li><a href="#">Samen leven, samen werken</a></li>
<li><a href="#">Catering en horeca</a></li>
<li><a href="#">Kunst en cadeaus</a></li>
<li><a href="#">Lenen en spelen</a></li>
<li><a href="#">Maken en doen</a></li>
<li><a href="#">Recreatie</a></li>
</ul>
</li>
<li><a href="#">Medezeggenschap</a></li>
<li><a href="#">Publicaties</a></li>
</ul>
CSS:
/* verticaal menu */
#vert-menu {
margin: 0;
padding: 0;
}
#vert-menu ul {
margin: 0;
padding: 0;
list-style:none;
}
#vert-menu > li {
margin-bottom: 5px;
color: #FFF;
font-weight: bold;
text-transform: uppercase;
width: 175px;
line-height: 30px;
font-size: 0.9em;
background:#FFF url(../images/vert-menu.jpg) no-repeat;
}
#vert-menu > li > a {
padding: 0 35px 0 5px;
display: block;
height: 30px;
line-height: 15px;
vertical-align:middle;
color: #FFF;
text-decoration:none;
outline:none;
}
#vert-menu > li:hover > a {
background:#FFF url(../images/vert-menu-active.jpg) no-repeat;
text-decoration:none;
}
#vert-menu > li > a.active {
background:#FFF url(../images/vert-menu-active.jpg) no-repeat;
text-decoration:none;
}
#vert-menu li > .sub-menu {
margin:0;
padding: 0 5px 0 5px;
}
#vert-menu li > .sub-menu > li a {
display:block;
line-height: 20px;
width: 165px;
text-transform: lowercase;
color: #83B810;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #83B810;
text-decoration:none;
outline: none;
}
#vert-menu > li > .sub-menu > li:hover > a {
color: #750D68;
text-decoration:none;
}
#vert-menu > li > .sub-menu > li > a.active {
color: #750D68;
text-decoration:none;
}
使它看起来像一个表格单元格:
#vert-menu > li > a {
padding: 0 35px 0 5px;
display: table-cell;
height: 30px;
line-height: 15px;
vertical-align: middle;
color: #FFF;
text-decoration: none;
outline: none;
}
我认为以下修改可以满足您的需求:
#vert-menu > li > a {
padding: 0 35px 0 5px;
display: block;
height: 30px;
line-height: 15px;
vertical-align:middle;
color: #FFF;
text-decoration:none;
text-align: center;
}
我添加了text-align:center
。
但我个人更喜欢左对齐版本。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.