css - How to overlap Navigation Menu over slide image -
am trying make menu list overlap slide image using position absolute can't work out.
when try change position, menu mix up. slide image relative , menu list absolute.
<!doctype html> <head> <title>quantum pc shop</title> <link rel="stylesheet" type="text/css" href="quantumpcshop.css"> <link rel="stylesheet" type="text/css" href="mangapage.css"> <script src="jquery-2.1.4.min.js"></script> <link href="owl.carousel.css" rel="stylesheet"> <link href="owl.theme.css" rel="stylesheet"> </head> <body> <!--<<<<<<<<< nav menu >>>>>>>>>>--> <center> <div class="bodynav2"> <div class="menu"> <ul id="css3menu_middle"> <li>new arrival <ul><li>hdd</li> <li>purchase history</li> <li>messages</li> <li>wish list</li> </ul></li> </ul> <ul id="css3menu_middle"> <li>motherboard <ul><li>summary</li> <li>purchase history</li> <li>messages</li> <li>wish list</li> </ul></li> </ul> <ul id="css3menu_middle"> <li>hard disk <ul><li>summary</li> <li>purchase history</li> <li>messages</li> <li>wish list</li> </ul></li> </ul> <ul id="css3menu_middle"> <li>graphic card <ul><li>summary</li> <li>purchase history</li> <li>messages</li> <li>wish list</li> </ul></li> </ul> <ul id="css3menu_middle"> <li>cpu <ul><li>summary</li> <li>purchase history</li> <li>messages</li> <li>wish list</li> </ul></li> </ul> <ul id="css3menu_middle"> <li>psu <ul><li>summary</li> <li>purchase history</li> <li>messages</li> <li>wish list</li> </ul></li> </ul> <ul id="css3menu_middle"> <li>cooling system <ul><li>summary</li> <li>purchase history</li> <li>messages</li> <li>wish list</li> </ul></li> </ul> </div> </div> <center> <div class="bodycontentslide"><br> <div id="owl-demo" class="owl-carousel"> <div class="item"><img src="style1.jpg" alt="the last of us"></div> <div class="item"><img src="style2.jpg" alt="gta v"></div> <div class="item"><img src="style3.jpg" alt="mirror edge"></div> <div class="item"><img src="style4.gif" alt="the last of us"></div> <div class="item"><img src="style5.jpg" alt="gta v"></div> </div> <script src="owl.carousel.js"></script> <style> #owl-demo .item img{ display: block; width: 100%; height: auto; } </style> <script> $(document).ready(function() { $("#owl-demo").owlcarousel({ navigation : true, slidespeed : 300, paginationspeed : 400, singleitem : true }); }); </script> </div> </body> </html>div.headerarea { margin-top: -70px; height:10px; } div.hearderafterborder{ display: inline-block; margin-left:-20px; padding-top: 50px; } body { font-family: 'lucida grande', 'helvetica neue', helvetica, arial, sans-serif; /*padding: 20px 50px 150px;*/ font-size: 13px; text-align: center; /*margin-left:-1000px;*/ //background: url(wallabstrack.jpg); background-color: #f9f9f9; text-shadow: 0 -1px 0 #000; } ul#css3menu_middle{ text-align: center; display: inline; margin: 0; padding: 15px 4px 7px 0; list-style: none; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); } .sub1{ position: absolute; } ul#css3menu_middle li { font: bold 12px/18px sans-serif; display: inline-block; margin-right: -4px; position: relative; padding: 15px 54px; background: #ebffd6; cursor: pointer; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; height: 7px; top:0px; } ul#css3menu_middle li:hover { background: #555; color: #fff; } ul#css3menu_middle li ul { padding: 0; position: absolute; top: 38px; left: 0; width: 173px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; display: none; opacity: 0; visibility: hidden; -webkit-transiton: opacity 0.2s; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s; -o-transition: opacity 0.2s; -transition: opacity 0.2s; } ul#css3menu_middle li ul li { background: #555; display: block; color: #fff; text-shadow: 0 -1px 0 #000; } ul#css3menu_middle li ul li:hover { background: #666; } ul#css3menu_middle li:hover ul { display: block; opacity: 1; visibility: visible; } /*<<<<<<<<<<<<<<<<<<<<<< body content slide >>>>>>>>>>>>>>>>>>>> */ div.bodynav2{ } div.bodycontentslide{ height:500px; border: 0px solid; width:95%; align-content: center; }
i got answer. need z-index make menu overlap slideshow. using position absolute overlap image , not slideshow js.
sample:
#cssmenu, #cssmenu ul { line-height: 1; list-style: none outside none; padding: 0; z-index: 1000; }
Comments
Post a Comment