cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen
user profile image

A prettied up version of my previous Marking sub-menued items pen.


  1. Hi, Ray, and thanks! @Pootmonkey

    I have a question coming up, but first, thanks! And I found your pen here by following the 'Edit On CodePen' button in the embedded pen in your article at from 2013. So thanks for everything in your article and here, and thank you for leading me to CodePen -- cool resource in itself!

    So I have forked your project, created my own account here, and have been working on tailoring your code for use in the website I manage for a not-for-profit educational club here in my hometown. I've learned (and reinforced) a number of good things here, and researched on my own to understand the workings of things that I didn't understand at first. (Like the ::before element border trick, using them to create triangles, nice!) I kept all of your original comments in my pen, just adding my own notes to them, so that you'd get first credit (with whoever looks at them). And I commented a good it of the CSS with my insights and helpful notes for coming back to it later :) .

    Now my first question: Do you know of any way to position a child to the LEFT of its parent with pure CSS, or can you figure one out? Similar to the way that you use "right: 100%" to position a sub-menu to the RIGHT of its parent. I have looked at the left and right properties and the CSS function calc(). But the problem there is that I can reference a parent's width, but not the width of the element being styled, to move the element its own width leftward. (Maybe that's because it's in the midst of being styled.) I could get around it by setting fixed widths for every UL element in my menu. I'd just prefer not to. And that leads into ...

    My second question: Sub-menus near enough to the right edge of the browser window will extend past its edge (and, yes, make the window scrollable, at least on my current pages). Usable, but not nice, not as "sexy" :) . My wanting to place some sub-menus to the left of their parents is my first idea for solving that problem. On the other hand, I would also need to figure out a way to detect when the menus would extend off the window's edge, anyway, to decide whether to style them to the left or the right. ... So have you ever come up with any solutions to this problem? [By the way, I am constrained to having my nav menu at the top of the screen; I can't just make it vertical at the left side and be done with it.]

    I don't know of any way to communicate privately through the website (other than 'hire me' buttons, which are meant for only that), but you are welcome to comment on my pen at in reply.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.