[英]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.