css3 - CSS drop-down menu: z-index issue -


i've got 2 problems css drop-down menu: jsfiddle

1) transitions: menu slide-down when mouse switches open it. opened menu should slide-up close. 

#nav ul li ul {     -webkit-transition:height .5s ease-in;     -moz-transition:height .5s ease-in;     -o-transition:height .5s ease-in;     -ms-transition:height .5s ease-in;     transition:height .5s ease-in; }

this doesn't seem work; possibly under wrong "ul li" selector, though tried others.

2) bring parent item ("menu1", "menu2") on top of menu item list covers top border of first child. is, there should no border between "menu1" , "item1" since "menu1" doesn't have bottom border, looks since "item1" on top of it.

tried playing z-index, can't working. neither transitions.

i realize menu bit convoluted , has more css necessary.

what it? jsfiddle

#nav ul {      padding: 0;      margin: 0;      list-style: none;  }    #nav ul li {      display: inline-block;      border: 1px solid #fff;      border-bottom: 0;      border-radius: 5px;      margin: 0 15px;      position: relative;      -webkit-transition: border-color 0.2s ease-in;      -moz-transition: border-color 0.2s ease-in;      -o-transition: border-color 0.2s ease-in;      -ms-transition: border-color 0.2s ease-in;      transition: border-color 0.2s ease-in;  }    #nav ul li {      color: #8799b3;      display: block;      padding: 10px 6px;      border: 0;      -webkit-transition: color 0.2s ease-in;      -moz-transition: color 0.2s ease-in;      -o-transition: color 0.2s ease-in;      -ms-transition: color 0.2s ease-in;      transition: color 0.2s ease-in;  }    #nav ul li:hover {      color: #415161;      border-color: #e9e9e9;  }    #nav ul li a:hover {      color: #415161;  }    #nav ul li ul {      opacity: 0;      visibility: hidden;      text-decoration: none;      line-height: 1;      color: #8799b3;      background: #fff;      position: absolute;      top: calc(100% - 5px);      left: -1px;      z-index: 1000;      width: 165px;      border: 0;  }    #nav ul li:hover ul {      opacity: 1;      visibility: visible;  }    #nav ul li ul li {      border: 0;      display: block;      font-size: 14px;      margin: 0;      -webkit-transition: background 0.2s ease-in;      -moz-transition: background 0.2s ease-in;      -o-transition: background 0.2s ease-in;      -ms-transition: background 0.2s ease-in;      transition: background 0.2s ease-in;  }    #nav ul li ul li:hover {      border: none;      color: #415161;      background: #f7f9fb;  }    #nav ul li ul li {      padding: 10px;      border: none;      color: #8799b3;      border-left: 1px solid #e9e9e9;      border-right: 1px solid #e9e9e9;      border-bottom: 1px solid #e9e9e9;  }    #nav ul li ul li:first-child {      border-top: 1px solid #e9e9e9;      border-radius: 0 5px 0 0;  }    #nav ul li ul li:last-child {      border-bottom: 1px solid #e9e9e9;      border-radius: 0 0 5px 5px;  }    #nav ul li ul {      -webkit-transition: opacity 0.2s ease-in;      -moz-transition: opacity 0.2s ease-in;      -o-transition: opacity 0.2s ease-in;      -ms-transition: opacity 0.2s ease-in;      transition: opacity 0.2s ease-in;  }
<div id="nav">      <ul>          <li>              <a href="#">menu1</a>              <ul>                  <li><a href="menu.html">item1</a></li>                  <li><a href="menu.html">item2</a></li>                  <li><a href="menu.html">item3</a></li>                  <li><a href="menu.html">item4</a></li>              </ul>          </li>          <li>              <a href="#">menu2</a>              <ul>                  <li><a href="menu.html">item1</a></li>                  <li><a href="menu.html">item2</a></li>                  <li><a href="menu.html">item3</a></li>                  <li><a href="menu.html">item4</a></li>              </ul>          </li>          <li>              <a href="#">menu3</a>              <ul>                  <li><a href="menu.html">item1</a></li>                  <li><a href="menu.html">item2</a></li>                  <li><a href="menu.html">item3</a></li>                  <li><a href="menu.html">item4</a></li>              </ul>          </li>      </ul>  </div>


-

Comments

Post a Comment

Popular posts from this blog

OpenCV OpenCL: Convert Mat to Bitmap in JNI Layer for Android -

there several posts converting mat bitmap using utils.mattobitmap() function. i'm assuming function can called in java layer after importing utils class. i want transfer data memory address pointed uint32_t* bmpcontent; in code below. jniexport void jnicall java_com_nod_nodcv_nodcvactivity_runfilter( jnienv *env, jclass clazz, jobject outbmp, jbytearray indata, jint width, jint height, jint choice, jint filter) { int outsz = width*height; int insz = outsz + outsz/2; androidbitmapinfo bmpinfo; if (androidbitmap_getinfo(env, outbmp, &bmpinfo) < 0) { throwjavaexception(env,"gaussianblur","error retrieving bitmap meta data"); return; } if (bmpinfo.format != android_bitmap_format_rgba_8888) { throwjavaexception(env,"gaussianblur","expecting rgba_8888 format"); return; } uint32_t* bmpcontent; if (androidbitmap_lockpixels(env, outbmp,(void**)&bmpcontent)...
Read more

android - org.xmlpull.v1.XmlPullParserException: expected: START_TAG {http://schemas.xmlsoap.org/soap/envelope/}Envelope -

i trying hit soap api in application login purpose , getting above mentioned error , can 1 tell me going wrong , first time soap apis. here code hit soap :- vector<object> args = new vector<object>(); hashtable<string, object> hashtable = new hashtable<string, object>(); hashtable.put("email", "mss.siddhart28@gmail.com"); hashtable.put("password", "siddharth"); args.add(hashtable); soapserializationenvelope envelope = new soapserializationenvelope( soapenvelope.ver11); envelope.dotnet = true; envelope.xsd = soapserializationenvelope.xsd; envelope.enc = soapserializationenvelope.enc; (new marshalhashtable()).register(envelope); httptransportse androidhttptransport = new httptransportse( "http://tempuri.org/", 15000); androidhttptransport.debug = true; string result = ""; try { soapobject request = new soapobject("http:...
Read more

python - How to remove the Xframe Options header in django? -

i have made page has iframe . inside iframe want show multiple different links article facebook, or news, or youtube video or other possible url. but, due xframe header, unable so. referred following link: https://docs.djangoproject.com/en/1.8/ref/clickjacking/ , django xframeoptionsmiddleware (x-frame-options) - allow iframe client ip but didn't help. my settings.py file's middleware_classes is: middleware_classes = ( 'django.contrib.sessions.middleware.sessionmiddleware', 'django.middleware.common.commonmiddleware', 'django.middleware.csrf.csrfviewmiddleware', 'django.contrib.auth.middleware.authenticationmiddleware', 'django.contrib.auth.middleware.sessionauthenticationmiddleware', 'django.contrib.messages.middleware.messagemiddleware', 'django.middleware.clickjacking.xframeoptionsmiddleware', ) from http://django-secure.readthedocs.org/en/latest/middleware.html , found using ...
Read more