CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
user3284233
user3284233

Reputation:

When i click into text it works but when i click beside text it doesn't work in dropdown menu?

i have made my own drop down menu but problem is when i click in text it links to other place successfully but when i click beside text it doesn't link to other place, can you please help me what's wrong here?? help would be appreciated!!

here is my pic:

enter image description here

and here is my source code for drop-down menu..

<style>
    ul {
        text-align: left;
        display: inline;
        margin: 0;
        padding: 15px 4px 17px 0;
        list-style: none;
        -webkit-box-shadow: 0px 2px 7px 0px rgba(50, 50, 50, 0.75);
        -moz-box-shadow:    0px 2px 7px 0px rgba(50, 50, 50, 0.75);
        box-shadow:         0px 2px 7px 0px rgba(50, 50, 50, 0.75);
    }
    ul li {
        font: bold 12px/18px Throw My Hands Up in the Air;
        font-size: 15px;
        display: inline-block;
        margin-right: -4px;
        position: relative;
        padding: 15px 20px;
        background: #D00000;
        cursor: pointer;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        -ms-transition: all 0.2s;
        -o-transition: all 0.2s;
        transition: all 0.2s;
    }
    ul li:hover {
        background: #555;
        color: #fff;
    }
    ul li ul {
        padding: 0;
        position: absolute;
        top: 48px;
        left: 0;
        width: 150px;
        -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 li ul li {
        background: #555;
        display: block;
        color: #fff;
        text-shadow: 0 -1px 0 #000;
    }
    ul li ul li:hover { background: #666; }
    ul li:hover ul {
        display: block;
        opacity: 1;
        visibility: visible;
    }

    #header{
        background-color: #D00000;
        text-align: center;
        position: fixed;
        top: 0%;
        left: 0%;
        right: 0%;
        height: 8%;
        -webkit-box-shadow: 0px 3px 12px 0px rgba(50, 50, 50, 0.75);
        -moz-box-shadow:    0px 3px 12px 0px rgba(50, 50, 50, 0.75);
        box-shadow:         0px 3px 12px 0px rgba(50, 50, 50, 0.75);
    }

    #left_box{
        background-color: #ffffff;
        position: fixed;
        width: 20%;
        top: 10%;
        left: 0%;
        height: 100%;
    }

    a{
        font-size: 15px;
    }

    .box
    {
        width: 80%;
        padding:10px;
        border:2px solid gray;
        position: fixed;
        top: 12%;
        left: 15%;
        height: 50%;
    }

</style>
<body>
<div id="header">
    <ul><li><a href="home.php" style="text-decoration: none; color: #000000;">Home</a></li>
        <li>Notification</li>
        <li>
            Profile
            <ul>
                <li>All members</li>
                <li><a href="profile.php" style="text-decoration: none; color: #ffffff">My profile</a></li>
            </ul>
        </li>
        <li>
            Settings
            <ul>
                <li><a href="setting.php" style="text-decoration: none; color: #ffffff">Settings</a></li>
                <li><a href="logout.php" style="text-decoration: none; color: #ffffff">Logout</a></li>
                <li>About</li>
            </ul>
        </li>
    </ul>
</div>

Upvotes: 0

Views: 69

Answers (3)

Silverandrew
Silverandrew

Reputation: 96

Bad form to put anything besides inline elements in anchor tag. Easiest solution?

Specify a width for all your menu dropdown elements as they are the same width already..

#header li > ul > li > a { width: 125px; }

should make all nested dropdowns same width.

Ensure you have

 a { display: block; }

as well...

Upvotes: 0

Tom McQuarrie
Tom McQuarrie

Reputation: 1147

The a tag is an inline element, so by default it's only the width of the text. Add display: block; to the link to make it 100% width:

ul li a { display: block; }

Upvotes: 3

Helpful
Helpful

Reputation: 706

The problem is the only the text is considered the actual "link", because it's the innerHTML of the <a> tag. You may have to alter the CSS a little, but try wrapping the <li> tag in the <a> tag so you get <a href="link"><li>Link Name</a>. Then clicking anywhere on the <li> element should activate the link.

Upvotes: 0

Related Questions