html - Overflow hidden and position absolute menu -
i know these problems have been faced many others , there solutions available. none problems found similar me, had missed position:relative parent. have used position: relative , overflow:hidden parent, , position: absolute children, overflow hidden of parent hiding submenu in menu.
html
<head> <link rel='stylesheet' href="menu.css"> </head> <body> <div id="menu-container"> <ul id='menu'> <li><a href="#">home</a></li> <li><a href="#" class='drop'>s</a> <ul> <li><a href='#'>m</a></li> <li><a href='#'>p</a></li> <li><a href='#'>c</a></li> <li><a href='#'>b</a></li> </ul> </li> <li><a href="#" class='drop'>l</a> <ul> <li><a href='#'>1</a></li> <li><a href='#'>2</a></li> <li><a href='#'>3</a></li> <li><a href='#'>4</a></li> </ul> </li> </ul> </div> </body> menu.css
#menu-container{ margin: 60px; margin-bottom: -20px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; /* background color , gradients */ background-color: white;/* background-color: -moz-linear-gradient(top, #0272a7, #013953); background-color: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953)); /* borders */ border: 1px solid #002232; -moz-box-shadow:inset 0px 0px 1px #edf9ff; -webkit-box-shadow:inset 0px 0px 1px #edf9ff; box-shadow:inset 0px 0px 1px #edf9ff; padding: 0; z-index:20; position: relative; overflow: hidden; } #menu{ list-style:none; vertical-align: middle; /* rounded corners */ color: #2a6496; position: relative; margin: 0; padding:0; margin-left: 30px; } #menu li { float:left; display:block; text-align:center; position:relative; overflow: hidden; margin-right:30px; border:none; padding: 10px 15px 10px 15px; } #menu li:hover { /* background color , gradients */ /* background: linear-gradient(top, #f4f4f4, #e1e1e1); background: -moz-linear-gradient(top, #f4f4f4, #e1e1e1); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f4f4f4), to(#e1e1e1)); */ background: #428bca; /* rounded corners */ -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; } #menu li { font-family:arial, helvetica, sans-serif; font-size:14px; color: #2a6496; display:block; outline:0; text-decoration:none; } #menu li:hover > { color: white; } #menu li .drop { padding-right:21px; background:url("../../images/drop.png") no-repeat right 6px; -moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; } #menu li ul{ margin:4px auto; position:absolute; left:-999em; /* hides drop down */ text-align:left; /*padding:10px 5px 10px 5px;*/ padding: 0; border:1px solid #428bca; border-top:none; z-index: 999; width: 200px; /* gradient background */ background:white; /*background: -moz-linear-gradient(top, #eeeeee, #bbbbbb); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eeeeee), to(#bbbbbb)); overflow-x: hidden; */ -moz-border-radius: 0px 0px 5px 5px; -webkit-border-radius: 0px 0px 5px 5px; border-radius: 0px 0px 5px 5px; } #menu li ul li{ padding: 10px 10px 10px 10px; position: relative; z-index: 999; width: 100%; text-align: left; } #menu li ul li:hover{ background: #13967e; } #menu li ul a{ color: #2a6496; } #menu li ul li:hover a{ color: white; } #menu li .input, #menu li .input:hover{ background: white; } #menu li:hover ul { left: -1px; top:auto; } removing overflow hidden menu-container shows submenu menu-container doesnt contain menu.
can please me find doing wrong, submenu shows up. in advance time , efforts.
try remove overflow:hidden li , #menu-container. add #menu-container code
#menu-container:after{ content:''; display:block; clear:both; }
Comments
Post a Comment