Develop Reference

Superfish Child Drop Downs Falling Off Page

Superfish is a very common menu plugin, so I'm surprised I'm having difficutly rectifying this.
I have a pretty intense menu structure that involves several child menus. So much so, that a lot of them fall off of the page or out of the browser's view when their parent is hovered.
People have suggested applying a right: 0px; property in place of the left: 0px; property in the superfish.css file, but it looks like the JS script is writing it's own CSS properties to the element as in-line styles. In fact, it actually looks like it's measuring the width of the parent menu in order to apply the correct left: value.
The sub-menu's end up looking like this
<ul class="sub-menu" style="left: 16.18181818181818em;
float: none; width: 14.5em; display: block; visibility: visible;">
So, I guess what I'm getting at is... what applies these CSS properties if not the CSS file? Even when I apply a specific class for menus I want to 'drop-down' to the right instead of the left, the property gets overridden anyway.
Is there a way to rectify this, or just make it so once I get to the second level of drop downs (when drop downs start going to the left instead of below) they go to the right instead?

I was just dealing with the same issue. It looks like this "feature" fell off the road map :)
Anyways I found this Superfish Menu text off-screen
it solved it for me but YMMV as always.

if CSS comes from Javascript,
then you may use !important in your style sheet to over ride it.
Add a comment aside your rule in style sheet , so one may remenber or understand the use of
left:0!important;/* !important is here to overide style from js' suckerfish menu */ :)

I've solved this issue just doing this...
jQuery Superfish Menu Plugin - v1.7.4
just open Superfish.js and find the visibility change to display
example:
visibility: hidden to display : none
visibility: visible to display : block
superfish js edit file

CSS Background Position when using :target

Ok so I've done some looking around and couldn't find a good enough answer to this question.
Basically what I'm trying to do is minimize my websites header when a button is clicked.
Heres the CSS: http://emstectest.site44.com/style.css
I've been playing around trying to get this to work but here's the problem, I'm trying to make the background image, which is a dark blue divider colour which seperates the header and body move up when the expand link is clicked (using :target on the #header style).
But I've tried something like:
#header:target { background-position: center -300px; }
but the only thing that actually moves the background image is when I do:
body { background: url (PATH) repeat-x center -300px; }
Any help on this would be greatly appreciated. I'm holding back on using Javascript on this due to my lack of knowledge in the area; that and the fact that I want load times to be the main priority.
Another question as well as this would be: is there also a way to animate this process using -webkit- or would I have to use Javascripting again?
Thanks in advance.
- James

From the w3schools.com
Definition and Usage
URLs with an # followed by an anchor name, link to a certain element within a document. The element being linked to is the target element.
The :target selector can be used to style the current active target element.
Look at an example here
Your image has a fixed width of 440px so if you are trying to reduce the height if it you'll need to adjust it's proportions.

How do I make a DIV stay at the top of the screen no matter ow far down the page my visitor scrolls?

What I'm saying is, I have some extremely long pages on my website, which can make it annoying if my visitors need to scroll to the top of the page to be able to navigate to another page.
I'm not quite sure what I would call this but any Google search that contains the words 'DIV' and 'float' come up with completely unrelated results...
What I'm looking to do is create a DIV that stays at the top of the Screen (not to be confused with the page) so that if the user is at the bottom of the page, they can still see the navigation bar just floating at the top of the screen. What I can think of is to position the DIV relative to the position of the screen but I don't know how to code this.
I'm happy to use JavaScript (preferably in the form of jQuery), but if you know how to do this using CSS, I would favour your response.
This might help: I know a little bit of jQuery and JavaScript and I know a good deal of CSS and HTML.
Thanks in advance.

fixed position has exactly this purpose and this is pure CSS:
div {
position: fixed;
top: 0;
}

Try this:
<div style="position: fixed;"></div>

You should be able to use CSS Fixed Positioning
#eleID {
position: fixed;
top: 0;
}

Have the header/toolbar remain static at the top of the page during scrolls

On many sites now, say you have a toolbar/table-header that is midway in the page.
Once you start scrolling, you can't see the header or toolbar anymore so you can't perform actions on any rows you may have selected, or you can't see the name's of the headers of the columns.
Many sites do this now, which is great, when you start to scroll the toolbar/header is fixed at the top of the browser. This doesn't happend right away, only when you scroll down to the point where the header/toolbar would normally not be visible.
How can I do this? Is there a name for this functionality?
Gmail has this, if you scroll down when reading an email, the toolbar at the top is fixed at the top so you can label/move/spam the email.

Take a look at jQuery Waypoints - Sticky elements, should be what you're looking for.

Use this css:
.static{
position:fixed;
}
And then, put a class="static" to your header element.
Hope this helps. Cheers

You don't need Javascript to solve this problem — don't make it harder on yourself. Using fixed positioning forces the header to "hover" above your content, and when you scroll, remain at the top of your screen, not at the top of the page. You can use this CSS to make your header fixed.
.header {
position: fixed;
}
Make sure you assign the class "header" to your div. For design reasons, I'd suggest keeping your header at the very top of the screen and stretching all the way across. You can use this CSS to do so.
.header {
top: 0px;
left: 0px;
width: 100%;
}
Technically, you don't need to specify "top" or "left" positioning, but it ensures you don't have anything to go wrong if you do decide to change something like that later. You can take a look at other types of positioning at this site.

Creating a floating button

I'm working on a Firefox extension and am out of ideas on how to implement a floating button. I need a button that is overlayed on my page that I can show/hide and dynamically position just about anywhere on my page. I thought I could do something like a fancy CSS tool-tip except replace it with button functionality, but that idea failed because I couldn't pull my example apart well enough to understand what all I need to include, need to change, etc.
I've thought about using jQuery(though wouldn't mind avoiding, unless it makes this painfully easy) but will be looking more into that as a possibility now. If anyone can offer a tutorial link, ideas, sample code, anything to help get me moving in the right direction I will greatly appreciate it!
Thanks!
Edit: Clarification
I'm not entirely sure how to actually create the overlayed button. I tried to create a a floating div with some text in it, and nothing showed up, but I got no errors, which means I'm doing something wrong, but I have no idea what that is. http://www.fijiwebdesign.com/blog/css-tooltips-floating-html-elements.html If you take a look at that webpage you see that there is that floating "feedback" button, I would like to create something similar, only it wouldn't be anchored to the sides, but I could position it over text, etc.
#floatingBtn
{
position: absolute;
z-index: 10000;
top: 50%;
left: 50%;
}
Thats the CSS I used to try and float my div. I don't know if I'm creating the div in the wrong place or... I thought if I could get a floating div with some text, I could turn that into my button.

position: fixed;
Should make everything work out for you. Absolute positioning is relative to the parent element or to the html element if no parent was found.