CODEWITHSUNDEEP
htmlcss
s4m
s4m

Reputation: 21

make <li> as whole <a> (link) vertical menu

any idea to make LI as whole link? 

#nav{
position: relative;
width: 120px;
}
#nav a {
display: inline;
width: 100%
text-decoration: none;
}
#nav ul{
list-style-type: none;
}
#nav ul li{
background: #c0c0c0;
border-bottom: 1px dotted #404040;
}
#nav ul ul{
position: absolute;
left: 81px;
display: none;
}
#nav ul ul li{
background: #c0c0c0;
}
#nav ul li:hover ul{
display: inline;
}

here's the link: jsfiddle

options I tried:

  1. a {display: block; } -->this worked, but the second UL drops down.
  2. a {display: inline-block;} -->second UL issue is fixed but LI is not a link.
  3. a {display: inline-block; width: 100%; height: 100%; } --> same as 2.

thanks in advance.

Upvotes: 1

Views: 407

Answers (5)

Venkatachalam Subramanian
Venkatachalam Subramanian

Reputation: 63

try like this 

            #navbar ul li {
            display: inline;
            position: relative;
            }

            #navbar ul li ul  {
            position: absolute;
            visibility: hidden;
            }

            #navbar ul li:hover>ul {
            visibility: visible;
            position: absolute;
            display: block;
            }

            <div id="navbar">
                <ul>
                    <li><a href="link">1</a></li>
                    <li><a href="#">2</a>
                        <ul>
                            <li><a href="link">x</a></li>
                            <li><a href="link">y</a></li>
                            <li><a href="link">z</a></li>
                        </ul>
                    </li>
                    <li><a href="link">3</a></li>
                </ul>
            </div>

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

Try

#nav{
    position: relative;
    width: 120px;
}
#nav a {
    display: inline-block;
    text-decoration: none;
    width: 100%;
    background-color: lightblue;
}
#nav ul{
    list-style-type: none;
}
#nav ul li{
    background: #c0c0c0;
    border-bottom: 1px dotted #404040;
    position: relative;
}
#nav ul ul{
    position: absolute;
    left: 43px;
    display: none;
    top: 0;
}
#nav ul ul li{
    background: #c0c0c0;
}
#nav ul li:hover ul{
    display: inline;
}

Demo: Fiddle

Upvotes: 0

Peter Rasmussen
Peter Rasmussen

Reputation: 16922

It's because of the padding that it doesn't work. The element is actually overlapping the others.

#nav ul ul{
    position: absolute;
    top:0px;
    left: 80px;
    display: none;
    padding-left:0px;
}

You can find the full demo here: Working Demo

Upvotes: 2

Harshit Tailor
Harshit Tailor

Reputation: 3281

you need to change this css

    #nav a {
    display: block;
    text-decoration: none;
    }

you can check here

http://jsfiddle.net/wX2ss/30/

Upvotes: 0

Kevin Bowersox
Kevin Bowersox

Reputation: 94429

#nav a {
    display: block;
    text-decoration: none;
    float: left;
    width: 80px;
}

#nav ul li{
    background: #c0c0c0;
    border-bottom: 1px dotted #404040;
    overflow:hidden;
}

Working Example: http://jsfiddle.net/wX2ss/16/

Upvotes: 0

Related Questions