css - Decreasing height of a menu -
i want decrease height of menu had height:30px; in #cssmenu text not in center of menu.
class="snippet-code-css lang-css prettyprint-override">#cssmenu { padding: 0; margin: 0; border: 0; background:#cdcdcd; } #cssmenu ul, #cssmenu li { list-style: none; margin: 0; padding: 0; } #cssmenu ul { position: relative; z-index: 597; } #cssmenu ul li { float: left; min-height: 1px; vertical-align: middle; } #cssmenu ul li.hover, #cssmenu ul li:hover { position: relative; z-index: 599; cursor: default; } #cssmenu ul ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%; } #cssmenu ul ul li { float: none; } #cssmenu ul ul ul { top: 0; left: 190px; width: 190px; } #cssmenu ul li:hover > ul { visibility: visible; } #cssmenu ul ul { bottom: 0; left: 0; } #cssmenu ul ul { margin-top: 0; } #cssmenu ul ul li { font-weight: normal; } #cssmenu { display: block; line-height: 1em; text-decoration: none; height:30px; } /* custom css styles */ #cssmenu > ul { *display: inline-block; } #cssmenu:after, #cssmenu ul:after { content: ''; display: block; clear: both; } #cssmenu ul { text-transform: uppercase; } #cssmenu ul ul { border-top: 3px solid #5f7a77; text-transform: none; min-width: 190px; } #cssmenu ul ul { background: #759b98; color: #ffffff; border-bottom: 1px solid #3c4d60; border-top: 0 none; line-height: 100%; padding: 12px 12px; font-size: 12px; } #cssmenu ul ul ul { border-top: 0 none; } #cssmenu ul ul li { position: relative; } #cssmenu ul ul li:hover > { background: #5f7a77; color: #ffffff; } #cssmenu ul ul li.has-sub > a:after { content: '+'; position: absolute; top: 50%; right: 15px; margin-top: -8px; } #cssmenu ul li:hover > a, #cssmenu ul li.active > { background: #5f7a77; color: #ffffff; } #cssmenu ul li.has-sub > a:after { content: '+'; margin-left: 5px; } #cssmenu ul li.last ul { left: auto; right: 0; } #cssmenu ul li.last ul ul { left: auto; right: 99.5%; } #cssmenu { color: #3c4d60; padding: 0 15px; } #cssmenu > ul > li > { line-height: 48px; font-size: 12px; } class="snippet-code-html lang-html prettyprint-override"><div id='cssmenu'> <ul> <li><a href='#'><span>home</span></a></li> <li class='has-sub'><a href='#'><span>products</span></a> <ul> <li class='has-sub'><a href='#'><span>product 1</span></a> <ul> <li><a href='#'><span>sub product</span></a></li> <li class='last'><a href='#'><span>sub product</span></a></li> </ul> </li> <li class='has-sub'><a href='#'><span>product 2</span></a> <ul> <li><a href='#'><span>sub product</span></a></li> <li class='last'><a href='#'><span>sub product</span></a></li> </ul> </li> </ul> </li> <li><a href='#'><span>about</span></a></li> <li class='last'><a href='#'><span>contact</span></a></li> </ul> </div>
change line-height 30px:
#cssmenu > ul > li > { line-height: 30px; } css menu
No comments:
Post a Comment