fmz 14

I am working on the navigation for a site that has drop down menus. They drop down action works fine, but the mouse over action is limited to when you mouse over the link text. I would like it to be active over the entire list element.

Here is the html

   <ul class="dropdown">
<li><a href="#" id="home">Home</a></li>
<li><a href="#" id="about">About Us</a>
    <ul class="sub-menu">
        <li><a href="#">Our History</a></li>
        <li><a href="#">Our Process</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Financing</a></li>
        <li><a href="#">Testimonials</a></li>
        <li><a href="#">Subcontractors</a></li>
    </ul>
</li>
<li><a href="#"  id="personal">Personal Banking</a></li>
<li><a href="#"  id="commercial">Commercial Banking</a></li>
<li><a href="#"  id="service">Customer Service</a>
    <ul class="sub-menu">
        <li><a href="#">Our History</a></li>
        <li><a href="#">Our Process</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Financing</a></li>
        <li><a href="#">Testimonials</a></li>
        <li><a href="#">Subcontractors</a></li>
    </ul>
</li>
<li><a href="#"  id="investors">Investor Relations</a></li>
<li><a href="#"  id="contact">Contact Us</a></li>
</ul>

Here is the CSS:

ul.dropdown                         { position: relative;  }
ul.dropdown li                    { font-weight: bold; float: left; zoom: 1; background: #4e8997; height: 40px; }
ul.dropdown a:hover         { color: #fff; }
ul.dropdown a:active          { color: #ffa500; }
ul.dropdown li a                    { display: block; margin-top: 6px;  padding: 5px 8px;  color: #fff; }
ul.dropdown li.hover,
ul.dropdown li:hover            {  color: #fff; position: relative; }
ul.dropdown li.hover a         { color: #fff; background: #c29c5d; }

/*  LEVEL TWO */
ul.dropdown ul                      { width: 180px; visibility: hidden; position: absolute; top: 100%; left: 0; }
ul.dropdown ul li                   { height: 20px; font-size: 12px; font-weight: normal; background: #c29c5d; color: #fff; border-bottom: 1px solid #ccc; float: none; }           
ul.dropdown ul li a                 { border-right: none; width: inherit; display: inline-block; margin: 0; padding: 3px 10px; } /* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a:hover           { background-color: #a2834d; display: block;   }

Here is the link to the working sample

  • Your selectors are both redundant and confusing. ".hover" and ":hover" are two completely different things. Nathan Duran over 6 years ago

1 answer

1
point
This was chosen as the best answer

The easiest solution would be to set the height/width of the <a> tags in the list and set them to display: block as well. This would "expand" the elastic containing <li> and thus make the entire <li> clickable.

Answered over 6 years ago by Zack Doherty
  • You could improve many of your selectors, too. For example: rather than selecting the level two `<ul>`'s as `ul.dropdown ul`, you could simply select them as `.sub-menu`. This cuts down on file size and also makes your page render faster--not only that but Google takes into account page speed rankings in their searches, a higher page speed score helps you get to the top. Zack Doherty over 6 years ago