我無法點擊菜單上的元素當我添加第二個菜單

Question

首先大家好。我的標題的第一個版本是。

我的問題是，如果我添加第二個菜單（右側菜單），我的第一個菜單（左側菜單）丟失點擊attritube。我檢查了但我看不到問題。感謝您的幫助:)。

  <div id="navbar">     

      <div id="menu1"> 
       <ul> 
        <li> <a href="kisiselilan.html"> Kisisel İlan Ver </a> </li> 
        <li> <a href="firmakaydet.html"> Firma Kaydet </a> </li> 
       </ul> 
      </div> 

      <div id="logo"> 
       <a href="anasayfa.html"><img src="resimler/3.png" /></a> 
      </div> 

      <div id="menu2"> 
       <ul> 
        <li> <a href="kurumsalilanver.html"> Kurumsal İlan Ver </a> </li> 
        <li> <a href="iletisim.html"> İletisim </a> </li>   
       </ul> 
      </div> 

      <div id="navbar-cizgi"> 

       </div> 

CSS

div#navbar{background:url(file:///C|/Users/Arda/Desktop/201.png) repeat;width:100%;height:157px;border-bottom:4px solid #900;} 

/* LOGO */ 

div#logo img{position:absolute; width:200px;margin-top:-20px;margin-left:35%;} 

/* MENU1 */ 

div#menu1{position:absolute;} 
div#menu1 ul{margin-left:20%;margin-top:80px;} 
div#menu1 ul li {display:inline;padding:50px;} 
div#menu1 ul li a{font-weight:bold;text-decoration:none;color:#333;font-size:18px;border-bottom:2px dotted #900;} 

/* MENU2 */ 

div#menu2{position:absolute;} 
div#menu2 ul{margin-left:1000px;margin-top:80px;} 
div#menu2 ul li {display:inline;padding:50px;} 
div#menu2 ul li a{font-weight:bolder;text-decoration:none;color:#333;font-size:18px;border-bottom:2px dotted #900;} 

Answer 1

這是因爲絕對的元素是在另一個上。 嘗試用

display: inline-block; 

工作小提琴：https://jsfiddle.net/21aa87ua/

Answer 2

你的CSS是有點不清楚:)所以我更喜歡寫一個又一個。您可以使用下面的樣式使用您想要的寬度，高度和其他參數。

提示：要確保正確定位塊，請添加邊框以使其在渲染頁面上可見。祝你好運！ :)

div#navbar{ 
     position: relative; 
     width: 100%; 
     height: 150px; 
    } 
    div#menu1{ 
     position: absolute; 
     left: 100px; /*change to one you prefer*/ 
    } 
    div#menu2{ 
     position: absolute; 
     right: 100px; /*change to one you prefer*/ 
    } 
    div#logo{ 
     position: absolute; 
     width: 300px; 
     left: 0; right: 0; margin: auto; /*center absolute block*/ 
    } 
    .menu-lists li{ 
     display: inline-block; 
    }