Utility Stylesheet: hnav_floated.css

Here’s another utility stylesheet for you: hnav_floated.css.

This isn’t a complex stylesheet, but it’s something I can share with you now so I figured I would.

Basically, it takes an unordered list and transforms it to a horizontal menu/list. So what’s the big deal, my previous hnav.css already does that.

Well, as I work on this new layout, I want to do CSS-based drop-down menus from a horizontal menu. The problem with any CSS-based drop-down menu is that you need to make sure the drop-down menu is either overlapping or immediately next to the menu item that triggers the drop-down. If there is even 1 pixel of space between the two, when your mouse moves over that 1px gap, the drop-down will disappear because of the loss of focus (loss of :hover state).

So positioning that drop-down menu is key.

Drop downs triggered from an inline element (which is what I use in hnav.css.) are not consistently positioned relative to the parent (:hover triggered) element across browser platforms.

As a result, I need to turn those inline elements into block elements. The way to do that and still keep the menu items on a single line is to use floats.

This is what hnav_floated.css does. It floats the list items to create a horizontal menu. It’s a far less complex stylesheet, but requires a little more HTML markup.

Drop-down Menus

I’m working on a utlity stylesheet for CSS-based drop-down menus as well. I want it to be fairly comprehensive with several styles that can be used to determine where a drop-down menu pops relative to the parent element. (straight down, down and to the left, down and to the right, maybe more).

I keep calling the drop-down menus “pops” in my own head, because they are more pop-ups than drop-downs (at least in my head).

How do you differentiate between pop-ups and drop-downs?


One thought on “Utility Stylesheet: hnav_floated.css

  1. First off great work Ruthsarian, you obviously haven’t shown off the new layout or drop down menu but I know it will be top notch and I will personally test it out across the board for you in a variety of browsers. To me when it comes to a drop down menu yes it can be considered a popup but I think most people would never call it a popup because we associated that with new windows. If you ask me what naming I use, I have always used drop down menus. Never did it ever occur to me actually to think of it as a popup menu. But its no biggie.

    My website utilizes your Skidoo Too layout so please check it out when you get the chance. I have a few different layouts to choose from in my Layouts area. I’m also redesigning the marketing campaign forms for my company’s website. I really want to use your Gargoyles layout but I’m wondering is there anyway to get the logo box and the left column to appear on the right side of the layout instead??? I look forward to your latest work! Your biggest fan.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s