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

Question

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;
}

i used it but it displays with button which i dont want.. I just want a login user name and panel display when i hover over it. — , Dec 03 '15 at 12:54
Possible duplicate of [How to make twitter bootstrap menu dropdown on hover rather than click](http://stackoverflow.com/questions/8878033/how-to-make-twitter-bootstrap-menu-dropdown-on-hover-rather-than-click) — hurricane, Dec 03 '15 at 12:58
Goldemowner- How can i show code also has php and a database connection. — , Dec 03 '15 at 13:01
I already posted an answers, I hope that is what you wanted. In case you still want to make a demo just leave the PHP code away and only add the needed code. — RiesvGeffen, Dec 03 '15 at 13:03

score 0 · Accepted Answer · answered Dec 03 '15 at 13:02

0

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;
}

answered Dec 03 '15 at 13:02

RiesvGeffen

1,539
2
11
29

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 – Dec 03 '15 at 14:11
Not working. When I try to move the username even the other list logout move far – Dec 03 '15 at 14:27
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. – RiesvGeffen Dec 03 '15 at 14:28
I know it is very difficult to understand. Just find it here. http://jsfiddle.net/stark143/wLh9wqs0/ I just want to move the whole username to right side and it to be in order – Dec 03 '15 at 14:35
@Stark FINALY GOT IT! Pretty easy but I got it, [take a look](http://plnkr.co/edit/lHyXbmPViZ8AfyKqgLn1?p=preview). The only thing I added was `text-align: right;` to the `#nav-ul` – RiesvGeffen Dec 03 '15 at 15:03
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. – Dec 03 '15 at 15:15
This must work, I don't really understand your problem because I don't know how it looks. But just try [this](http://plnkr.co/edit/lHyXbmPViZ8AfyKqgLn1?p=preview) – RiesvGeffen Dec 03 '15 at 15:18
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/96899/discussion-between-stark-and-goldenowner). – Dec 03 '15 at 15:28

score -1 · Answer 2 · answered Dec 03 '15 at 12:57

-1

Functionality you want is dropdown on hover. This can be achieved with a little bit of jquery. Follow the link and code to resolve your issue.

http://jsfiddle.net/uzbssguj/2/

    $('ul li.dropdown').hover(function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn(200);
}, function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(100).fadeOut(200);
});

This can also be achieve by CSS

ul li.dropdown:hover .dropdown-menu
{
  display:block;
}

-Thanks

answered Dec 03 '15 at 12:57

Help

1,156
7
11

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. – Dec 03 '15 at 13:05
Take a look at the updated fiddle hope it helps. And dont forget to accept and up vote the answer ;) Link : http://jsfiddle.net/uzbssguj/3/ – Help Dec 03 '15 at 13:11
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. – Dec 03 '15 at 13:35

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

2 Answers2