Geek Answers Handbook

Show drop-down menu only when hovering an inch

I want to show the drop-down menu only when hoveredone word on li (.$user->user_login.). I currently smoke on the whole li, but I do not want to hover over hello. When I hovering the username, I should get a drop-down menu. Not when I hang "Hello"

This is my code:

<ul class="top_login">
    <li><a href="<?php echo wp_logout_url( site_url() ); ?>" title="Logout">Logout</a></li>
    <li><a style="color: #20dae6;"> <?php $user=wp_get_current_user(); echo "Hello  <span style='color:#464646'>".$user->user_login."</span>"; ?> </a> 
        <ul class="profile_tab">
            <li><a href="<?php echo site_url(); ?>register-profile/">Edit Profile</a></li>
            <li><a href="<?php echo site_url(); ?>/manage-bookings/">Manage Subscriptions</a></li>
        </ul>
    </li>
</ul>

This is my css :

ul.top_login li {float:right;text-align:right;width:auto;position:relative;margin:0 5px;}

ul.top_login li a {color:#20dae6;font-weight:600;text-transform:uppercase;cursor:pointer;}

/*SUB MENU*/

ul.profile_tab {background:#00777F;left:0;position:absolute;text-align:left;width:200px;z-index:999;display:block;}

ul.profile_tab li {height:22px;line-height:20px;display:block;float:left;text-align:left;margin:0;}

ul.top_login ul {display:none;}

ul.top_login li:hover ul {display:block;}

This is the rendered HTML we get:

<ul class="top_login">
   <li>
      <a title="Logout" href="http://localhost/iseasserver/wp-login.php?action=logout&redirect_to=http%3A%2F%2Flocalhost%2Fiseasserver&_wpnonce=2846506c7c">Logout</a>
   </li>
   <li>
      <a style="color: #20dae6;">
      Hello
      <span style="color:#464646">admin</span>
      </a>
      <ul class="profile_tab">
         <li>
            <a href="http://localhost/iseasserver/pie-register-profile/">Edit Profile</a>
         </li>
         <li>
            <a href="http://localhost/iseasserver/manage-bookings/">Manage Subscriptions</a>
         </li>
      </ul>
   </li>
</ul>

How should I do it?

Thanks in advance.

enter image description here

+4
source share
2 answers

You can do it with jQuery, see below code

$(document).ready(function(){
    $('.top_login li a span').hover(function(){
        $(".profile_tab").toggle();
        });
});

hover , menu profile_tab, moves out, menu hide, hover toggle.

:

0

, .

 .top_login li a:hover span {color:blue;}

EDIT:

jQuery . , CSS. . , , .

CSS

ul.top_login li:hover ul {display:block;}


ul.top_login li span:hover ul {display:block;}

HTML, .

 <ul class="top_login">
   <li><a href="<?php echo wp_logout_url( site_url() ); ?>" title="Logout">Logout</a> </li>
   <li><a style="color: #20dae6;"> <?php $user=wp_get_current_user(); echo "Hello  <span style='color:#464646'>".$user->user_login.?> 
      <ul class="profile_tab">
        <li><a href="<?php echo site_url(); ?>register-profile/">Edit Profile</a></li>
        <li><a href="<?php echo site_url(); ?>/manage-bookings/">Manage Subscriptions</a></li>
      </ul>
     </span></a> 
   </li>
  </ul>

DEMO

+2

More articles:


All Articles