how to create a hover dropdown panel for logout and update profile function?

jquery html css hover

10,445

Take a look at this, it is pure HTML and Css.

HTML code:

<body>
   <ul>
      <li><a href="#">Update</a></li>
      <li>
          <a>Username</a>
          <ul class="dropdown">
              <li><a href="#">Log out</a></li>
          </ul>
      </li>
   </ul>
</body>

Css code:

ul{
    padding: 0;
    list-style: none;
    background: #f2f2f2;
}
ul li{
    display: inline-block;
    position: relative;
    line-height: 21px;
    text-align: right;
}
ul li a{
    display: block;
    padding: 8px 25px;
    color: #333;
    text-decoration: none;
}
ul li a:hover{
    color: #fff;
    background: #939393;
}
ul li ul.dropdown{
    min-width: 125px; /* Set width of the dropdown */
    background: #f2f2f2;
    display: none;
    position: absolute;
    z-index: 999;
    left: 0;
}
ul li:hover ul.dropdown{
    display: block; /* Display the dropdown */
}
ul li ul.dropdown li{
    display: block;
}

10,445

Author by

Admin

Updated on June 14, 2022

Comments

Admin almost 2 years

I want to create a yahoo like logout function where in whenever I hover over the username it should display a panel containing logout and update profile function. Currently I am using this code but its not working as expected.

<ul>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><h1 id="hello"><em><?php echo $login_user;?></em></h1>
      <b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><i class="icon-arrow-up"></i><a href="#">Logout</a></li>
      <li><i class="icon-arrow-down"></i><a href="#">Update Profile</a>
      </li>
    </ul>
  </li>
</ul>

CSS

.dropdown-menu a {
  white-space: normal;
  left: 1000px;
  padding-bottom: 100px;
}

.dropdown-menu > li {
  position: relative;
}

.dropdown-menu > li > i {
  position: absolute;
  left: 0;
  top: 3px;
}

Admin over 8 years

Thanks thats works great. But caret and username are misplaced. How do I place it just next to username and also get rid of that bold dot before username which is there due to ul tag.
Help over 8 years

Take a look at the updated fiddle hope it helps. And dont forget to accept and up vote the answer ;) Link : jsfiddle.net/uzbssguj/3
Admin over 8 years

can you tell how to target the username in CSS because I want to adjust it in my already header and i am unable to target the username.
Admin over 8 years

Hey if I am trying to adjust the username through CSS its moving the entire header. So just wanted to know if u can add id to every list or main list so i can target to a whole username
Admin over 8 years

Not working. When I try to move the username even the other list logout move far
RiesvGeffen over 8 years

Can you show an image of how it looks? Or make a plunker with how is looks so I can help, because I don't really understand it.
Admin over 8 years

I know it is very difficult to understand. Just find it here. jsfiddle.net/stark143/wLh9wqs0 I just want to move the whole username to right side and it to be in order
RiesvGeffen over 8 years

@Stark FINALY GOT IT! Pretty easy but I got it, take a look. The only thing I added was text-align: right; to the #nav-ul
Admin over 8 years

Yes this works definitely with USERNAME but when I use php echo statement to output $username it just takes to right but not on top. so now the problem to be solved is take everything to top.
RiesvGeffen over 8 years

This must work, I don't really understand your problem because I don't know how it looks. But just try this
Admin over 8 years

Let us continue this discussion in chat.