css - Positioning last child drop-down menu in wordpress? -
the drop-down menu works fine on theme have little problem last-child submenu fix text position cannot move top nearby submenu , how remove transparency background last child submenu concept below: 
css drop-down menu
.navbar-default { box-shadow: 0 2px 10px rgba(0,0,0,0.67); background: #fff; background: url(data:image/svg+xml;base64,phn2zyb4bwxucz0iahr0cdovl3d3dy53my5vcmcvmjawmc9zd…ixiibozwlnahq9ijeiigzpbgw9invybcgjdg9wvg9cb3r0b21hcmfkawvudckilz48l3n2zz4=); background: -moz-linear-gradient(top, #fff 0, #e6e6e6 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(100%, #e6e6e6)); background: -webkit-linear-gradient(top, #fff 0, #e6e6e6 100%); background: -o-linear-gradient(top, #fff 0, #e6e6e6 100%); background: -ms-linear-gradient(top, #fff 0, #e6e6e6 100%); background: linear-gradient(to bottom, #fff 0, #e6e6e6 100%); width: 100%; height: 44px; border-width: 0 0 1px; border-style: solid; border-color: #fff; position: relative; margin-top: 5px; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: #e7e7e7; position: relative; z-index: 20; } .navbar-nav { background: url(img/logo.png) no-repeat scroll right/ 91% 100%; z-index: 0; position: absolute; left: 0; right: 0; height: 0 } .navbar-nav { display: block; } .navbar-nav li { display: block; /* margin: 0 47%; */ padding: 0; /* width: 180px; */ /* height: 138px; */ /* text-indent: -999em; */ direction: ltr; float: none; } .navbar-nav li:hover .dropdown-menu { opacity: 1; top: 105px; visibility: visible; } .navbar-default .navbar-nav>li>a { color: transparent; background: url(img/logo.png) no-repeat scroll right/ 91% 100%; display: block; margin: -33px auto 0 auto; width: 180px; height: 150px; /* text-indent: -999em; */ direction: ltr; float: none; } .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus { background: url(img/logo.png) no-repeat scroll right/ 91% 100%; color: transparent; display: block; margin: -33px auto 0 auto; width: 180px; height: 150px; direction: ltr; float: none; } .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus { color: transparent; } .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus { background: url(img/logo.png) no-repeat scroll right/ 91% 100%; color: transparent; display: block; margin: -33px auto 0 auto; width: 180px; height: 150px; direction: ltr; float: none; } .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus { color: transparent; background-color: transparent; } .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus { background: url(img/logo.png) no-repeat scroll right/ 91% 100%; color: transparent; display: block; margin: -33px auto 0 auto; width: 180px; height: 150px; direction: ltr; float: none; } .navbar-nav ul { } .nav .open>a, .nav .open>a:hover, .nav .open>a:focus { /* background-color: #eeeeee; */ border-color: #337ab7; } .navbar-nav>li>.dropdown-menu { margin: -1px 0 0 45%; border-top-right-radius: 0; border-top-left-radius: 0; } .dropdown-menu { /* background: url(img/submenu.png) no-repeat scroll right/ 91% 100%; */ position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 153px; padding: 1px 0; margin: 2px 0 0 0; list-style: none; font-size: 14px; text-align: center; background-color: #5c4d4a; border: 1px solid #ccc; border: 1px solid rgba(0,0,0,0.15); border-radius: 4px; -webkit-box-shadow: 0 6px 12px rgba(0,0,0,0.175); box-shadow: 0 6px 12px rgba(0,0,0,0.175); background-clip: padding-box; opacity: 0; top: 35px; visibility: hidden; -webkit-transition: .25s ease; -moz-transition: .25s ease; -ms-transition: .25s ease; -o-transition: .25s ease; transition: .25s ease; } .dropdown-menu li { display: block; background: url(img/submenu.png) no-repeat scroll right/ 104% 108%; padding: 10px 20px; clear: both; font-weight: normal; line-height: 1.428571; color: #fff; white-space: nowrap; } .dropdown-menu li a:hover, .dropdown-menu li a:focus { background: url(img/submenu.png) no-repeat scroll right/ 104% 108%; color: #ccc; text-decoration: none; filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#ff428bca', endcolorstr='#ff357ebd', gradienttype=0); -webkit-transition: .25s ease; -moz-transition: .25s ease; -ms-transition: .25s ease; -o-transition: .25s ease; transition: .25s ease; } .dropdown-menu li:last-child { display: block; background: url(img/submenu.png) no-repeat scroll right/ 104% 108%; padding: 10px 20px; clear: both; font-weight: normal; line-height: 1.428571; color: #fff; white-space: nowrap; } .dropdown-menu li:last-child a:hover, .dropdown-menu li:last-child a:focus { color: #000; text-decoration: none; filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#ff428bca', endcolorstr='#ff357ebd', gradienttype=0); -webkit-transition: .25s ease; -moz-transition: .25s ease; -ms-transition: .25s ease; -o-transition: .25s ease; transition: .25s ease; } .dropdown-menu ul { list-style: none; } for further info can check out my theme. before.
if want put text on top can change .dropdown-menu li:last-child a like:
.dropdown-menu li:last-child { padding-left: 20px; padding-right: 20px; padding-top: 10px; padding-bottom: 52px; } if want remove transparent background have menu shadow in .dropdown-menu must add rules @ bottom:
.dropdown-menu { ... border-bottom-right-radius: 77px; border-bottom-left-radius: 77px; }
Comments
Post a Comment