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?

enter image description here

.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

Popular posts from this blog

java - nested exception is org.hibernate.exception.SQLGrammarException: could not extract ResultSet Hibernate+SpringMVC -

sql - Postgresql tables exists, but getting "relation does not exist" when querying -

asp.net mvc - breakpoint on javascript in CSHTML? -