CODEWITHSUNDEEP
jqueryhtmlcss
Arda Zaman
Arda Zaman

Reputation: 127

I can't clicking element on menu When I add second menu

Firstly Hi everyone. The first version of my header is that. enter image description here

My problem is that, If I add the second menu (right menu), my first menu(left menu) is lose the clicking attritube. I examined but I can't see the problem. Thanks for helping :). 

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

Upvotes: 0

Views: 55

Answers (2)

egurb
egurb

Reputation: 1216

Your CSS is a bit unclear :) So I preferred write another one. You can play with width, height and other parameters you want using the style below.

TIP: To make sure you are positioning block correctly add a border to make it visible on rendered page. Good luck! :) 

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

Upvotes: 1

ghyjek
ghyjek

Reputation: 138

That's because absolute elements are one on another. Try with 

display: inline-block;

Working fiddle: https://jsfiddle.net/21aa87ua/

Upvotes: 3

Related Questions