Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

Ruby

RoR styling question: a simple sass dropdown menu with slim views...

I have this code in the _navbar.html.slim

ul
  li
    = link_to 'Homepage', root_path 
  li
    = link_to 'Latest'
  li
    = link_to 'Contact'
  - if !user_signed_in?
    li
      = link_to "Log In", new_user_session_path
    li
      = link_to "Sign Up", new_user_registration_path
  - else
    li
      = link_to current_user.has_profile? ? current_user.full_name : current_user.email 
      ul
        li 
          = link_to "Edit Profile", edit_user_registration_path
        li
          = link_to "Log out", destroy_user_session_path, method: :delete

so it's a ul with a couple of list items and another ul with 2 list items I want those list items to be vertically showing instead of horizontally...

here's the .sass file. Can't seem to find the proper way to code the final fix:

ul
 list-style: none
 margin: 0
 padding: 0
 overflow: hidden
 background-color: #111
 position: relative

ul li
 display: inline-block
 background-color: #C00
 a
  color: white
  text-decoration: none
  display: block
  padding: 10px 15px
  &:hover
   background-color: #333

ul ul
 display: none
 position: absolute

ul li:hover > ul
 display: inline-block
 position: relative
 float: left

if you need more info, please let me know.

Thank you so much

Alexandre Babeanu
Alexandre Babeanu
10,947 Points

have you tried changing inline-block to block?

2 Answers

Thomas Dimnet
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Thomas Dimnet
Python Development Techdegree Graduate 43,623 Points

Hi Robert,

Here is a coupe of things you can try:

  • Have you been trying to select your second ul with: ul + ul instead of your regular rules?
  • Could you try to work on it with display: flex at first instead of inline positioning or float positioning?

If my suggestions do not work, could you make us a screeshot of what you are trying to do?

Thomas

it works now with:

ul
 list-style: none
 margin: 0
 padding: 0
 overflow: hidden
 background-color: #111
 position: relative

ul li
 display: inline-block
 background-color: #C00
 a
  color: white
  text-decoration: none
  display: block
  padding: 10px 15px
  &:hover
   background-color: #333

ul ul
 display: none
 position: absolute

ul li:hover > ul
 display: block
 position: relative
 float: left

ul ul li
 display: block
 background-color: #00C
 padding: 6px