CODEWITHSUNDEEP
cssruby-on-railsruby
Zack
Zack

Reputation: 671

How to wrap a list item in a link_to?

Currently, only the text is clickable and is taking the user to the specified route in the application, while clicking on any other part of the li dropdown results in nothing.

Here is the code:

<li id='dropdown'>
    <%= current_user.email %> ▾
        <ul id='dropdown-list'>
             <li> <%= link_to "My Account", current_user %> </li>
            <li><%= link_to "Log Out", session_path("current"), method: :delete %></li>
        </ul>
</li>

Here is the css:

#dropdown-list {
  padding: 0;
  position: absolute;
  top: 48px;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: 0px 2px 5px #bcbfc3;
  display: block;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}

#dropdown-list li { 
  background: #fff; 
  display: block; 
  color: #7D818A;
}
#dropdown-list li:hover{
 background-color: #ECECEE; 
}

#dropdown:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

Upvotes: 2

Views: 336

Answers (2)

tachyonflux
tachyonflux

Reputation: 20211

CSS Solution:

#dropdown-list>li>a{
  display: block;
}

Upvotes: 1

Alec Sanger
Alec Sanger

Reputation: 4562

You can wrap link_to by creating a block like this:

<%= link_to(current_user) do %>
...stuff to wrap here...
<%=end%>

I think you'll probably want something like this:

<li id='dropdown'>
    <%= current_user.email %> ▾
        <ul id='dropdown-list'>
          <%= link_to(current_user) do %>
             <li>My Account</li>
          <%= end %>
            <li><%= link_to "Log Out", session_path("current"), method: :delete %></li>
        </ul>
</li>

Upvotes: 2

Related Questions