css - why HTML sub menu in a wrong postion? -
i have html,css menu.
i want sub menu center main menu(ul.menu)
why there space on left?
ul.menu li:hover ul defined left: 0 , nearest parents ul.menu, don't understand these space come from?
.menu-main-container { padding-bottom:52px; margin-top:-60px; margin:10px auto; } ul.menu { z-index: 597; text-align:center; position: relative;background: gray; width: 960px; margin:auto!important;} ul.menu li { display: inline-block; line-height: 2.1em; vertical-align: middle; zoom: 1; } ul.menu { display:block; letter-spacing:2px; color:#333; font-size:13px; text-decoration: none; padding:0 35px; text-transform:uppercase; font-weight:normal !important;} ul.menu a:hover {background:#efefef; color:#ad7f12} ul.menu, ul.menu li, ul.menu ul { list-style: none; margin: 0; padding: 0; color:#333; } ul.menu li:hover { position: relative; z-index:599; text-decoration:none; background:#efefef; } ul.menu li:hover ul {} ul.menu ul { display: none; } ul.menu ul li { float: none; line-height:34px; margin:0; padding:0; display: inline-block;} ul.menu ul li a:hover{ } ul.menu ul li { top: -2px; left: 100%; } ul.menu li:hover ul { display:inline-block; position: absolute; top: 100%; left: 0; z-index: 598; width:1020px; background:red; }
<div class="" ="menu-main-container"> <ul class="menu"> <li><a href="#">menu 1</a> <ul> <li><a href="#">menu 1 submenu item 1</a></li> <li><a href="#">menu 1 submenu item 2</a></li> <li><a href="#">menu 1 submenu item 3</a></li> </ul> </li> <li><a href="#">menu 2</a> <ul> <li><a href="#">menu 2 submenu item 1</a></li> <li><a href="#">menu 2 submenu item 2</a></li> <li><a href="#">menu 2 submenu item 3</a></li> </ul> </li> <li><a href="#">menu 3</a> <ul> <li><a href="#">menu 3 submenu item 1</a></li> <li><a href="#">menu 3 submenu item 2</a></li> <li><a href="#">menu 3 submenu item 3</a></li> </ul> </li> </ul> </div>
it starting whitespace because positioning it's parent. remove this:
position: relative;
Comments
Post a Comment