Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Ruby

Posted by roberthopman
roberthopman
16,502 Points

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
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,629 Points
Thomas Dimnet
.a{fill-rule:evenodd;}techdegree seal-36
Thomas Dimnet
Python Development Techdegree Graduate 43,629 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

roberthopman
roberthopman
16,502 Points
roberthopman
roberthopman
16,502 Points

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