html - Div is not overlapping div below it -

-

i have 2 divs 1 of them navigation menu , other div under it, these divs touching each other. main menu has sub menu papers when hover of , works , doesn't move divs around or getting hidden div under main menu how fix it? html

<div id="mainmenu">         <ul id="yw2">             <li><a href="/photoshop/index.php?r=home">home</a></li>             <li><a href="/photoshop/index.php?r=site/page&amp;view=about">about us</a></li>             <li><a href="#">portofoloio</a>                 <ul>                     <li><a href="#">photography</a></li>                     <li><a href="#">videography</a></li>                 </ul>             </li>             <li><a href="/photoshop/index.php?r=home/#">wedding services</a></li>             <li><a href="/photoshop/index.php?r=home/#">wedding packages</a></li>             <li><a href="/photoshop/index.php?r=home/#">destination weddings</a></li>             <li><a href="/photoshop/index.php?r=home/#">contact us</a></li>         </ul>   </div><!-- mainmenu -->     <!-- breadcrumbs -->      <div class="span-19">         <div id="content">                 <link rel="stylesheet" type="text/css" href="/photoshop/css/rslides.css" />             <script src="/photoshop/scripts/responsiveslides.min.js"></script>              <script>                 $(function() {                     $(".rslides").responsiveslides({                         speed: 1000,                         timeout: 3000,                         pager: true,                         pause: true                     });                 });             </script>             <ul class="rslides">                 <li>                     <img class="carousel-item" src="images/upload/index/12769252" alt="scrolling image" />          </li>                 <li>                     <img class="carousel-item" src="images/upload/index/1374403352" alt="scrolling image" />            </li>                 <li>                     <img class="carousel-item" src="images/upload/index/170297090" alt="scrolling image" />         </li>                 <li>                     <img class="carousel-item" src="images/upload/index/62949888" alt="scrolling image" />          </li>             </ul>

css

/*mainmenu*/ #mainmenu {     text-align: center;     border-top: 2px solid #addccf;     border-bottom: 2px solid #addccf; }  #mainmenu ul {     padding:8px 20px 8px 20px;     margin:0px; } /*the primary menu*/ #mainmenu ul li {     position: relative;     display: inline; } /*the text of menu*/ #mainmenu ul li a, #mainmenu ul li ul li {     color: #454545;     font-size:14px;     font-weight:bold;     text-decoration:none;     padding:5px 8px; } /*when hover over*/ #mainmenu ul li a:hover, #mainmenu ul li.active {     color: #b6e37c;     text-decoration:none; } /*submenu css*/ #mainmenu ul li ul{     display: none;     position: absolute;     text-align: center;     padding:8px 20px 8px 20px;     border: 2px solid #addccf;     left: -40px;     width: 150px;     margin-top: 15%;     top: 100%;     z-index: 1; } #mainmenu ul li ul li a{     display: block; } /*whe users hovers show submenu*/ #mainmenu ul li:hover > ul{     display: block; } /*end of mainmenu*/ .span-19{     margin-top: 30px;     text-align: center;     width: 100%; }

edit: have recreated html , css in jsfiddle , works intend in website doesn't? idea might causing it?

div.thathastopopup {     z-index:1; }

documentation on z-index on mdn here.

in short, can use z-index put elements positioned absolute, relative or fixed on eachother. default z-index 0, , stacking order defined within direct parent.


Comments

Post a Comment

Popular posts from this blog

javascript - how to protect a flash video from refresh？ -

-
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>flash video refresh</title> </head> <body> <div id="playerzone"><embed height="496" width="580" flashvars="flvid=19742822&amp;createtime=2012-4-19 13:46:33" wmode="opaque" allowscriptaccess="always" allowfullscreen="true" quality="high" bgcolor="#000000" name="player" id="player" src="swf/mine.swf" type="application/x-shockwave-flash"></div> <a onclick="return test();" id="test">click me popup div,and hide scrollbar</a> </body> the code upon： for example,when click a#test button,popup div,it's no problem,but want hide scrollbar while div popup. i used $('html').css('overflow','hidden') in...
Read more

visual studio 2010 - Connect to informix database windows form application -

-
i trying figure out how connect ibm informix database. have been doing research , have found threads 5 years ago examples not working. i have installed latest sdk ibm informix. i have included ibm.data.informix.dll references in project. i have included using ibm.data.informix; i adding button , on click testing conenction. debug error "sql0035n file "c:\users\adam\documents\visual studio 2010\projects\test\test\msg\en_us\db2nmp.xml" cannot opened." this file not exist , dont see anywhere in program files (x86)\ibm informix client sdk directory. my on click code is private void button1_click(object sender, eventargs e) { const string host = "192.168.obfuscated"; const string servicenum = "1525"; //port? const string server = "serverobfuscated"; const string database = "dbobfuscatedy"; const string user = "myusername"; const string password = ...
Read more

android - Associate same looper with different threads -

-
Image
in application, want create multiple threads working on single queue. create queue know need call looper.prepare() . i want other threads create should associated looper created first thread, how can achieve this? use 1 of java thread safe queue class java.util.concurrent package instead of looper achieve goal. it's more common practice. share queue between threads , post task queue entry 1 thread can entry thread. blockingqueue can - in 1 thread call take() , block thread until thread put() entry queue. that's all. producer consumer pattern example blockingqueue or concurrentlinkedqueue about blockingqueue
Read more