html - CSS button width issue in Chrome -
i want the width of button 85px wide. contains arrow , word "content." okay in ie, in chrome shortens width of button. widths of other components in menu button okay except "content." preface, chapters, figures, tables, abbreviations , acronyms, , executive summary good. there third level below chapters shows chapters, excluded in following code brevity. third level works well.
/* menu styles2 */ .third-level-menu2 { position: absolute; top: 0; right: -500px; width: 500px; list-style: none; padding: 0; margin: 0; display: none; overflow:hidden; max-height: 450px; overflow-y:auto; } .third-level-menu2 > li { height: 30px; background: #005070; } .third-level-menu2 > li:hover { background: rgb(148,138,84); } .second-level-menu2 { position: absolute; top: 30px; left: 0; width: 400px; list-style: none; padding: 0; margin: 0; display: none; } .second-level-menu2 > li { position: relative; height: 30px; background: #005070; } .second-level-menu2 > li:hover { background: rgb(148,138,84); } .top-level-menu2 { list-style: none; padding: 0; margin: 0; } .top-level-menu2 > li { position: relative; float: left; height: 30px; width: 85px; background: rgb(148,138,84); font: bold 12px tahoma, verdana, sans-serif; color: #ffffff; padding: 0 0 0 10px; line-height: 30px; } .top-level-menu2 > li:hover { background: rgb(148,138,84); } .top-level-menu2 li:hover > ul { /* on hover, display next level's menu */ display: inline; } c /* menu link styles2 */ .top-level-menu2 /* apply links inside multi-level menu */ { font: bold 12px tahoma, verdana, sans-serif; color: #ffffff; text-decoration: none; padding: 0 0 0 10px; /* make link cover entire list item-container */ display: block; line-height: 30px; } .top-level-menu2 a:hover { color: #000000; }
<div style="width: 200px; z-index: 10; position: fixed; left: 20px; top: 5px; height: 83px;"> <p class="menu"> <ul class="top-level-menu2"> <li>contents<img src="arrow.png" alt="arrow" style="float:left; width:20px;height:20px;"> <ul class="second-level-menu2"> <li><a href="#_toc488312104">preface</a> </li> <li><a href="#_chapters101">chapters</a> </li> <li><a href="#_figures101">figures</a> </li> <li><a href="#_tables101">tables</a> </li> <li><a href="#_toc488312105">abbreviations , acronyms</a> </li> <li><a href="#_toc488312106">executive summary</a> </li> </ul> </li> </ul> </p> </div>
Comments
Post a Comment