Question

Please check this fiddle: http://jsfiddle.net/cZTjd/1/

I need to make the dropdown list fully clickable. Currently, it opens the link only when we click on the text and not on the other parts of the same link. Some list item may contain only one or two letters. So it’s not good if we allow only to click on the text. Is there anyway to solve this problem without changing the anchor tag position and by simply editing the css?

.top-header{
    height:40px;
    background:#383838;
    padding:0 30px;
}
.top-active-link{
    height: 39px;
    background: #545454;
    padding: 12px;
}
.top-header-links-right .simple{color:#fff;}
.top-header-links-right .simple:hover{text-decoration:none;}
.top-header-links-right{
    float:right;
    position:relative;
    top:-15px;
}
.top-header-links-left{
    list-style:none;
    float:left;
    position:absolute;
    line-height:8px;
    left:-10px;
    top:-15px;
    z-index:999;
}
.top-header-links-left li a:hover{
    text-decoration:none;
}
.top-header-links-left li:hover >.top-header-links-left-drop ul{
    display:block;
}
.top-header-links-right li:hover >.top-header-links-right-drop ul{
    display:block;
}
.top-header-links-left .top-header-links-left-drop, .top-header-links-left .top-header-links-right-drop{
    z-index:99;
}
.top-header-links-left .top-header-links-left-drop ul{
    padding:0;
    z-index:99;
    display:none;
    position:absolute;
    background:#383838;
    list-style:none;
    width:200px;
    box-shadow: 0px 1px 3px #C2C2C2;
    border-radius: 0;
    top:39px;
    margin-left:-5px;
}
.top-header-links-right .top-header-links-right-drop ul{
    padding:0;
    z-index:99;
    display:none;
    position:absolute;
    background:#383838;
    list-style:none;
    width:200px;
    box-shadow: 0px 1px 3px #C2C2C2;
    border-radius: 0;
    top:39px;
    right:95px;
}

.top-header-links-left .top-header-links-left-drop ul li, .top-header-links-right .top-header-links-right-drop ul li{
    padding:0;
    height:30px;
    line-height:30px;
}
.top-header-links-left .top-header-links-left-drop li, .top-header-links-right .top-header-links-right-drop li{
    list-style:none;
    border-bottom:1px solid #4B4B4B;
    display:list-item;
    width:100%;
}
.top-header-links-left .top-header-links-left-drop li:hover, .top-header-links-right .top-header-links-right-drop li:hover{
    background:#545454;
    cursor:pointer;
}
.top-header-links-left .top-header-links-left-drop li a, .top-header-links-right .top-header-links-right-drop li a{
    position:relative;
    left:10px;
    padding:3px;
    color:#fff;
    line-height:30px;
}
.top-header-links-left .top-header-links-left-drop li:hover, .top-header-links-right .top-header-links-right-drop li:hover{
    text-decoration:none;
}
.blog-count{
    position: relative;
    height: 12px;
    width: 8px;
    border-radius: 2px;
    background: #6CB535;
    top: -5px;
    left: 3px;
    color: white;
    font-size: 11px;
    line-height: 12px;
    padding-left: 3px;
    display: inline-block;
}
.blog-count a{
    color:#fff;
    text-decoration:none;
}
.blog-count:hover{
    cursor:pointer;
    background:#549b1e;
}
.top-header-links-right ul{
    list-style:none;
    line-height:8px;
    position: relative;
    right: -20px;
}
.top-header-links-left li, .top-header-links-right li{
    float:left;
    color:#fff;
    text-transform:uppercase;
    font-size:11px;
    margin-right:20px;
    letter-spacing:1px;
    -webkit-transition: text-shadow 0.2s linear;
    -moz-transition: text-shadow 0.2s linear;
    -ms-transition: text-shadow 0.2s linear;
    -o-transition: text-shadow 0.2s linear;
    transition: text-shadow 0.2s linear;
    height:39px;
    line-height:40px;
    width:auto;
    padding:0 5px;
    cursor:pointer;
}
.top-header-links-right li{
    height:39px;
    line-height:39px;
}
.top-header-links-left a, .top-header-links-right a{
    color:#fff;
    text-decoration:none;
}
.top-header-links-left li:hover, .top-header-links-right li:hover{
    text-decoration:none;
    background:#545454;
}
.top-header-links-right li:last-child:hover{
    background:#6bb533;
}
.top-header-links-right .top-header-links-right-drop ul li:last-child:hover{
    background:#545454;
}

​

<div class="top-header">
            <ul class="top-header-links-left">
                <li><a href="#">tools</a>
                    <div class="top-header-links-left-drop">
                        <ul>
                            <li><a href="#">go.htm file</a></li>
                            <li><a href="#">simple bookmarlet</a></li>
                            <li><a href="#">sidebar</a></li>
                            <li><a href="#">import links (beta)</a></li>
                            <li><a href="#">API</a></li>
                        </ul>
                    </div>
                </li>
                <li><a href="#">blog</a>
                    <span class="blog-count"><a href="#">9</a></span>
                </li>
                <li><a href="#">settings</a></li>
                <li><a href="#">support</a></li>
            </ul>
        </div>​

Answer 1

The A has to be a block element to be able to set a height/width. The code below should do what you want.

li a {
    display: inline-block;
    height: 100%;
    width: 100%;
}