html - Drop menu misbehaving. Possibly z-index? -


i have 2 drop menus. "choose state" menu , "select carrier" menu. here's thing: want drop menus behave "state" menu, in moves content below downwards. however, want them "carrier" menu, in looks 2 separate menus when click on it. here fiddle code reference: http://jsfiddle.net/steveserrano/rc7fhhhu/

note: difference between 2 menus "state" positioned "relative" z-index of 9999. "carrier" positioned "absolute" z-index of 9999. i'm lost. need help. :)

<div class="state_box">                     <input type="checkbox" id="state-tgl" onblur="closemenu(this)">     <label id="state-tgl-label" for="state-tgl">         <span class="collapse_tiny">choose state</span>         <span class="collapse expand_tiny inline">state</span>         <img src="/images/template2014/dropdown-black.svg" style="vertical-align:middle; width:10px;">     </label>      <ul id="state_drop-menu">         <li><a href="http://www.pia.org/ct"><span class="collapse_tiny">connecticut</span></a></li>         <li><a href="http://www.pia.org/nh"><span class="collapse_tiny">new hampshire</span></a></li>         <li><a href="http://www.pia.org/nj"><span class="collapse_tiny">new jersey</span></a></li>         <li><a href="http://www.pia.org/ny"><span class="collapse_tiny">new york</span></a></li>     </ul> 




<div class="carrier_box">                     <input type="checkbox" id="carrier-tgl" onblur="closemenu(this)">     <label id="carrier-tgl-label" for="carrier-tgl">         <span class="collapse_tiny">select carrier</span>         <span class="collapse expand_tiny inline">state</span>         <img src="/images/template2014/dropdown-black.svg" style="vertical-align:middle; width:10px;">     </label>     <ul id="carrier_drop-menu">         <li><a href="http://www.pia.org/ct"><span class="collapse_tiny">carrier 1</span><span class="collapse expand_tiny inline">conn.</span></a></li>         <li><a href="http://www.pia.org/nh"><span class="collapse_tiny">carrier 2</span><span class="collapse expand_tiny inline">n.h.</span></a></li>         <li><a href="http://www.pia.org/nj"><span class="collapse_tiny">carrier 3</span><span class="collapse expand_tiny inline">n.j.</span></a></li>         <li><a href="http://www.pia.org/ny"><span class="collapse_tiny">carrier 4</span><span class="collapse expand_tiny inline">n.y</span></a></li>     </ul>

css code:

.state_box{ margin-bottom:-9px; background-color:rgba(6, 0, 0, 0.09); padding-left:10px; padding-right:10px; padding-bottom:7px; padding-top:15px; width:160px; } .state_box ul{ margin:0; padding:0; list-style-type: none; } .state_box ul li{ display:inline; } .state_box ul ul{ display:inline; }  .state_box ul li a{ text-decoration:none; padding-left:16px; color:#000; font-family:'raleway', arial, helvetica, sans-serif; font-weight:500; font-size:23px; font-size:2.3rem; text-transform:uppercase; vertical-align:-8px; color:#939598; } .state_box ul li a.first_state{ padding-left:0px; }  .state_box ul li .third_level{ color:#a7a9ac; font-size:18px; font-size:1.8rem; vertical-align:-5px; } .state_box ul li .fourth_level{ color:#bcbec0; font-size:14px; font-size:1.4rem; vertical-align:-3px; } .state_box ul li a:hover{ color:#808285; } .state_box ul li .selected_state{ font-size:36px; font-size:3.6rem color:#000000; text-transform:uppercase; vertical-align:text-top; color:#000; font-family:'raleway', arial, helvetica, sans-serif; }  #state-tgl{ position:absolute; /* ie 8 */ -ms-filter: "progid:dximagetransform.microsoft.alpha(opacity=0)";    /* real browsers */ opacity:0; } #state-tgl-label{ font-size:28px; font-size:1.8rem; color:#000000; font-family:'raleway', arial, helvetica, sans-serif; /*font-weight:500;*/ display:block; }  #state-tgl-label img{ float:right; margin-top:5px; }  #state_drop-menu{ position:relative; z-index:9999; background-color:rgba(6, 0, 0, 0.09); /*border:solid 2px black;*/ width:200px; padding-top:8px; padding-bottom:8px; display:none; max-height:0px; transition: max-height 0.25s ease; margin-left:-10px; margin-top:10px; } #state_drop-menu li{ display:block; padding:0px; margin:0px; width:100%;  } #state_drop-menu li a{ font-size:36px; font-size:1.8rem; color:black; padding:0px; margin:0px; display:block; padding-left:8px; padding-right:8px; } #state_drop-menu li a:hover{ color:white; background-color:black; }  #state-tgl:checked ~ #state_drop-menu{ display:block; max-height:1000px; }  /*########### carrier drop menu ############*/ .carrier_box{ margin-bottom:-9px; background-color:rgba(6, 0, 0, 0.09); padding-left:10px; padding-right:10px; padding-bottom:7px; padding-top:15px; width:320px; } .carrier_box ul{ margin:0; padding:0; list-style-type: none; } .carrier_box ul li{ display:inline; } .carrier_box ul ul{ display:inline; } .carrier_box ul li a{ text-decoration:none; padding-left:16px; color:#000; font-family:'raleway', arial, helvetica, sans-serif; font-weight:500; font-size:23px; font-size:2.3rem; text-transform:uppercase; vertical-align:-8px; color:#939598; } .carrier_box ul li a.first_carrier{ padding-left:0px; }  .carrier_box ul li .third_level{ color:#a7a9ac; font-size:18px; font-size:1.8rem; vertical-align:-5px; } .carrier_box ul li .fourth_level{ color:#bcbec0; font-size:14px; font-size:1.4rem; vertical-align:-3px; } .carrier_box ul li a:hover{ color:#808285; } .carrier_box ul li .selected_carrier{ font-size:36px; font-size:3.6rem color:#000000; text-transform:uppercase; vertical-align:text-top; color:#000; font-family:'raleway', arial, helvetica, sans-serif; }  #carrier-tgl{ position:absolute; /* ie 8 */ -ms-filter: "progid:dximagetransform.microsoft.alpha(opacity=0)";    /* real browsers */ opacity:0; } #carrier-tgl-label{ font-size:28px; font-size:1.8rem; color:#000000; font-family:'raleway', arial, helvetica, sans-serif; /*font-weight:500;*/ display:block; }  #carrier-tgl-label img{ float:right; margin-top:5px; }  #carrier_drop-menu{ position:absolute; z-index:9999; background-color:rgba(6, 0, 0, 0.09); /*border:solid 2px black;*/ width:320px; padding-top:8px; padding-bottom:8px; display:none; max-height:0px; transition: max-height 0.25s ease; margin-left:-10px; margin-top:10px; } #carrier_drop-menu li{ display:block; padding:0px; margin:0px; width:100%;  } #carrier_drop-menu li a{ font-size:36px; font-size:1.8rem; color:black; padding:0px; margin:0px; display:block; padding-left:8px; padding-right:8px; } #carrier_drop-menu li a:hover{ color:white; background-color:black; }  #carrier-tgl:checked ~ #carrier_drop-menu{ display:block; max-height:1000px; }  #charts{ margin-top:50px; }

this should start: move background-color .state-box , move onto:

#state-tgl-label {     background-color:rgba(6, 0, 0, 0.09); }

that way label gets background color, , not whole surrounding div. reason need keep position: relative using position: absolute takes out of flow of document, prevents desired effect of moving other elements of page down when opened.

here's quick fiddle: http://jsfiddle.net/rc7fhhhu/1/

updated fiddle: http://jsfiddle.net/rc7fhhhu/2/

i've removed margin-left: -10px ul element, , moved padding onto #state-tgl-label element. should pretty close looking for.


Comments

Post a Comment

Popular posts from this blog

1111. appearing after print sequence - php -

morning, i have code takes string of shoe sizes, explodes , puts in table. code works , info displayed correctly on page after table there few 1's after table. i'm confused this. so table looks (in columns of 3 on webpage) available in following sizes: 3 4 5 6 9 10 111 here's codes, purpose of example $x = 3|4|6|10|9 function get_sizes_pipe($x) { $counter = 0; $splits = explode("|",$x); asort($splits); $x = print "<table class='greentable'>"; $x .= print "<thead><tr><th scope='col' colspan='3' abbr='starter'>available in following sizes:</th></tr></thead><tbody><tr>"; foreach ($splits $split) { $entry = print "<td>".$split."</td>"; if($counter == 2){ $entry .= print "</tr><tr>"; $counter =0; } else { $counter++; ...
Read more

java - WARN : org.springframework.web.servlet.PageNotFound - No mapping found for HTTP request with URI [/board/] in DispatcherServlet with name 'appServlet' -

this question has answer here: why spring mvc respond 404 , report “no mapping found http request uri […] in dispatcherservlet”? 3 answers i trying making simple bbs i'm encountering following error, warn : org.springframework.web.servlet.pagenotfound - no mapping found http request uri [/board/] in dispatcherservlet name 'appservlet' i have tried solve error many times, have failed. how can solve error? here web.xml, controllerand , servlet-context. my web.xml <?xml version="1.0" encoding="utf-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xsi:schemalocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <filter> <filter-nam...
Read more

Ruby on Rails, ActiveRecord, Postgres, UTF-8 and ASCII-8BIT encodings -

weirdest error, who’s challenge try , me? spent hours yesterday on , it’s magic. can't believe happening , it's driving me crazy. btw, using: rails 4.2.3 ruby 2.2.3 pg 0.18 encoding.default_internal = encoding.default_external = utf-8 config.encoding = 'utf-8' it has postgres, activerecord , encodings! turns out we’ve been getting these errors whenever create new users on database special characters: encoding::undefinedconversionerror: "\xc3" ascii-8bit utf-8 \xc3 may vary depending on characters. weird part we’ve set since beginning utf-8. makes no sense , digged it, , used script: user.all.each |user| user.attributes.each |name, value| if value.is_a? string puts user.email + name.encoding.to_s + value.encoding.to_s end end end and output of 1 of users, users same: dr_lottahelp@blahblah.comutf-8utf-8 dr_lottahelp@blahblah.comutf-8ascii-8bit dr_lottahelp@blahblah.comutf-8ascii-8bit dr_lottahelp@blahblah.comutf-8asci...
Read more