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;
    }

当我添加第二个菜单时，我无法单击菜单上的元素

2 个答案: