Submenus slide up too much as the window scroll down - css

I have a website which was built with Joomla. The website has a main menu with submenus. As the window is scrolled down a little bit, the submenus slide upwards more than expected as shown in the following picture (the wrong appearance).
the menu when the window is not scrolled down looks like the following (the correct appearance):
What could be the problem? where should I modify the configuration or the code?
here is some part of the css/s5_flex_menu.css. I hope it will help:
/* all menu links */
#s5_nav a, #subMenusContainer a{
text-decoration:none;
}
/* Just main menu links --[for non-javascript users this applies to submenu links as well]*/
#s5_nav a{
margin:0;
}
#subMenusContainer ul li {
padding:0px;
margin:0px;
}
/* Just sub menu links */
#subMenusContainer a, #s5_nav li li a{
text-align:left;
font-size:0.9em;
width:auto;
text-transform:uppercase;
color:#ffffff;
white-space: pre;
}
#subMenusContainer a:after, #s5_nav li li a:after {
content:"\a";
}
/* ----[ OLs ULs, LIs, and DIVs ]----*/
/* All ULs and OLs */
#nav, #s5_nav ul, #s5_nav ol, #subMenusContainer ul, #subMenusContainer ol {
padding: 0;
margin: 0;
list-style: none;
line-height: 1em;
}
/* All submenu OLs and ULs */
#s5_nav ol, #s5_nav ul, #subMenusContainer ul, #subMenusContainer ol {
left:0;
}
#subMenusContainer img {
margin-right:8px;
}

Related

curved corners on Horizontally Centered Drop-Down Menus

I think Matthew James Taylor is a hero for this beautiful bit of code:
http://matthewjamestaylor.com/blog/centered-dropdown-menus
However, no matter how I chop away at it – and I have, FOR YEARS – I can not make the menu work with curved corners.
So I am posting this here, because I don't see a solution on SO, and I think the community could prosper from this.
Details:
When hovered, the left-most and right-most menu items both revert to squared corners. I have tried adding a css class to correct this, but they still revert to squares when the user scrolls into the sub-menu area.
Here is my menu, in situ: http://hrmpowerwash.pro
Here is my css:
/* horizontal navigation bar */
/* Main menu settings */
#centeredmenu {
position:relative;
clear:both;
float:left;
z-index:1000; /* This makes the dropdown menus appear above the page content below — superceded only by alerts (z=99999) */
margin:1em 0 0 0;
padding:0;
width:100%;
font-size:90%; /* Menu text size */
text-transform:uppercase;
}
/* Top menu items */
#centeredmenu ul {
margin:0;
padding:0;
list-style:none;
float:right;
position:relative;
right:50%;
}
#centeredmenu ul li {
padding:0;
float:left;
position:relative;
left:50%;
top:1px;
}
#centeredmenu ul li a {
display:block;
margin:0;
padding:.6em .5em .4em;
font-size:1em;
line-height:1em;
text-decoration:none;
color:#FFF;
font-weight:bold;
}
/* These three classes add the white border to the top menu items. */
.leftmost {
border:#FFF 2px solid;
border-radius: 8px 0 0 8px;
background:#e68f1a;
}
.middle {
border:#FFF solid;
border-width:2px 2px 2px 0;
background:#e68f1a;
}
.rightmost {
border:#FFF solid;
border-width:2px 2px 2px 0;
border-radius:0 8px 8px 0;
background:#e68f1a;
}
#centeredmenu ul li.active a {
color:#fff;
background:#000;
}
#centeredmenu ul li a:hover { /* This is to change if we want a brand colour for menu hover instead of blue */
background:#36f; /* Top menu items background colour */
color:#fff;
border-bottom:1px solid #03f;
}
#centeredmenu ul li:hover a,
#centeredmenu ul li.hover a { /* This line is required for IE 6 and below */
background:#36f; /* Top menu items background colour */
color:#fff;
border-bottom:1px solid #03f;
}
/* Submenu items */
#centeredmenu ul ul {
display:none; /* Sub menus are hidden by default */
position:absolute;
top:2em;
left:0;
float:left;
right:auto; /*resets the right:50% on the parent ul */
width:10em; /* width of the drop-down menus */
}
#centeredmenu ul ul li {
left:auto; /*resets the left:50% on the parent li */
margin:0; /* Reset the 1px margin from the top menu */
clear:left;
float:left;
width:100%;
}
#centeredmenu ul ul li a,
#centeredmenu ul li.active li a,
#centeredmenu ul li:hover ul li a,
#centeredmenu ul li.hover ul li a { /* This line is required for IE 6 and below */
font-size:.8em;
font-weight:normal; /* resets the bold set for the top level menu items */
background:#eee;
color:#444;
line-height:1.4em; /* overwrite line-height value from top menu */
border-bottom:1px solid #ddd; /* sub menu item horizontal lines */
float:left;
width:100%;
}
#centeredmenu ul ul li a:hover,
#centeredmenu ul li.active ul li a:hover,
#centeredmenu ul li:hover ul li a:hover,
#centeredmenu ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
background:#36f; /* Sub menu items background colour */
color:#fff;
float:left;
}
/* Flip the last submenu so it stays within the page */
#centeredmenu ul ul.last {
left:auto; /* reset left:0; value */
right:0; /* Set right value instead */
}
#centeredmenu ul ul.last li {
float:right;
position:relative;
right:.8em;
}
/* Make the sub menus appear on hover */
#centeredmenu ul li:hover ul,
#centeredmenu ul li.hover ul { /* This line is required for IE 6 and below */
display:block; /* Show the sub menus */
}
As you can, see I have rounded the left- and right-most options of the main menu (by applying a class to the first and last #div ul li) but they disappear upon hovering.
In another version, I have added the following code to fix the hover of the top menu items, but it still reverts to square corners when the user descends into the sub-menu items:
/* These classes add rounded corners to the menu headers when they are hovered over */
.rightmost > a:hover {
border-radius:0 8px 8px 0;
}
.leftmost > a:hover {
border-radius:8px 0 0 8px;
}
Please advise, if this is even possible; and how it may be achieved. What am I overlooking?
Thanking all of you in advance.
You were very close, you just needed these 2 additional calls on your CSS:
.rightmost > a:hover, .rightmost:hover > a {
border-radius:0 8px 8px 0;
}
.leftmost > a:hover, .leftmost:hover > a {
border-radius:8px 0 0 8px;
}
Notice the .rightmost:hover > a and the .leftmost:hover > a that were added.
This now will keep the a rounded, even when the dropdown is hovered.
I also suggest adding -webkit-border-radius CSS to each for more browser compatibility.

CSS drop down menu won't center, despite usual tricks

Having a devil of a time getting my CSS dropdown menu to center. I know this is question has been asked before, but their solutions don't seem to be working. I've tried the margin:auto trick, changed the float:left to display:inline-block, and tried to put it in an invisible, centered superlayer. Nothing helped. :) What am I missing?
.nav ul ul {
display:none;
}
.nav ul li:hover > ul {
display:block;
}
.nav ul {
display:inline-block;
position: absolute;
padding: 0;
margin-left:auto;
margin-right:auto;
margin-top:0;
margin-bottom:0;
background:#fff8e0;
font-family: hofstad;
font-size:30px;
color:#6f0018;
padding-top:20;
padding-bottom:20;
list-style-type: none;
}
.nav ul li {
float:left;
margin-left:50;
margin-right:50;}
.nav ul li a {
;} !--main links, if they are links--!
.nav ul li:hover {
color:#980122;
}
.nav ul li:hover > ul {
margin:0;
padding-top:20;
padding-bottom:0;
padding-left:0;
padding-right:0;
}
.nav ul li:hover > ul li {
float:none;
margin-left:0;
margin-right:0;
padding-top:0;
padding-bottom:5;
padding-left:5;
padding-right:5;
}
.nav ul li:hover > ul li a {
color:#980122;
}
.nav ul li:hover > ul li a:hover {
color:#6f0018;
}
Its a little hard without seeing it in action to debug.
But it looks initially like your UL is positioned as "absolute" as soon as you do that it is pulled out of the main document flow.
Try playing around with which parent element has a "relative" position for it to anchor to.

MenuMatic selected menu item dissapears when selected Update

So when I select the menu item from my drop down list, it disappears when it loads the link. I have verified that the menu items are set to display on all pages. Is this a css setting ?
Thanks
CODE: added per request
/*
# ------------------------------------------------------------------------
# Templates for Joomla 2.5 / Joomla 3.x
# ------------------------------------------------------------------------
# Copyright (C) 2011-2013 Jtemplate.ru. All Rights Reserved.
# #license - PHP files are GNU/GPL V2.
# Author: Makeev Vladimir
# Websites: http://www.jtemplate.ru/en
# --------- http://code.google.com/p/jtemplate/
# ------------------------------------------------------------------------
*/
/* all menu links */
#nav a, #subMenusContainer a{
text-decoration:none;
display:block;
padding:10px 20px;
background-color:#fff ;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
/* Just main menu links --[for non-javascript users this applies to submenu links as well]*/
#nav a{
margin:0;
float:left;
}
/* Just sub menu links */
#subMenusContainer a, #nav li li a{
text-align:left;
}
/* All menu links on hover or focus */
#nav a:hover, #nav a:focus, #subMenusContainer a:hover, #subMenusContainer a:focus, #nav a.mainMenuParentBtnFocused, #subMenusContainer a.subMenuParentBtnFocused{
background-color:#3366FF ;
color:#FFF;
}
/* sub menu links on hover or focus */
#subMenusContainer a:hover,
#subMenusContainer a:focus,
#nav a.mainMenuParentBtnFocused,
#subMenusContainer a.subMenuParentBtnFocused,
#nav li a:hover,
#nav li a:focus{
background-color:#3366FF ;
color:#FFF;
}
/* Parent Sub Menu Links ---[javascript users only]*/
.subMenuParentBtn{
background: url(../images/arrow_right.gif) right center no-repeat;
}
/* Parent Sub Menu Links on hover or focus ---[javascript users only]*/
.subMenuParentBtnFocused{
background: url(../images/arrow_right_over.gif) right center no-repeat;
}
/* Parent Main Menu Links ---[javascript users only]*/
.mainMenuParentBtn{
background: url(../images/arrow_down.gif) right center no-repeat;
}
/* Parent Main Menu Links on hover or focus ---[javascript users only]*/
.mainMenuParentBtnFocused{
background: url(../images/arrow_down_over.gif) right center no-repeat;
}
/* ----[ OLs ULs, LIs, and DIVs ]----*/
/* Submenu Outer Wrapper - each submenu is inside a div with this class - javascript users only */
.smOW{
display:none;
position: absolute;
overflow:hidden;
/*the 2px left & right padding lets you have a 1px border
on the ul or ol inside since overflow is set to hidden*/
padding:0 2px;
margin:0 0 0 -2px;
}
/* All ULs and OLs */
#nav, #nav ul, #nav ol, #subMenusContainer ul, #subMenusContainer ol {
padding: 0;
margin: 0;
list-style: none;
line-height: 1em;
}
/* All submenu OLs and ULs */
#nav ol, #nav ul, #subMenusContainer ul, #subMenusContainer ol {
/*border around submenu goes here*/
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
background:#fff;
border:1px solid #3366FF;
left:0;
}
/* List items in main menu --[for non-javascript users this applies to submenus as well] */
#nav li {
/*great place to use a background image as a divider*/
display:block;
list-style:none;
position:relative;
float:left;
}
#subMenusContainer li{
list-style: none;
}
/* main menu ul or ol elment */
#nav{
display:block;
list-style:none;
margin:0 0 0 0;
z-index:5;
/* top:15px;*/
/* left:50%;*/
text-align: left;
display:block;
}
#subMenusContainer{ display:block; position:absolute; top:0; left:0; width:100%; height:0; overflow:visible; z-index:1000000000; }
/* --------------------------[ The below is just for non-javscript users ]--------------------------*/
#nav li li{ float:none; }
#nav li li a{ /* Just submenu links*/
position:relative;
float:none;
}
#nav li ul { /* second-level lists */
position: absolute;
width: 10em;
margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
margin-top:2.2em;
}
/* third-and-above-level lists */
#nav li ul ul { margin: -1em 0 0 -1000em; }
#nav li:hover ul ul { margin-left: -1000em; }
/* lists nested under hovered list items */
#nav li:hover ul{ margin-left: 0; }
#nav li li:hover ul { margin-left: 10em; margin-top:-2.5em;}
/* extra positioning rules for limited noscript keyboard accessibility */
#nav li a:focus + ul { margin-left: 0; margin-top:2.2em; }
#nav li li a:focus + ul { left:0; margin-left: 1010em; margin-top:-2.2em;}
#nav li li a:focus {left:0; margin-left:1000em; width:10em; margin-top:0;}
#nav li li li a:focus {left:0; margin-left: 2010em; width: 10em; margin-top:-1em;}
#nav li:hover a:focus{ margin-left: 0; }
#nav li li:hover a:focus + ul { margin-left: 10em; }
Thanks, updated comments
It can be here:
/* All menu links on hover or focus */
#nav a:hover, #nav a:focus, #subMenusContainer a:hover, #subMenusContainer a:focus, #nav a.mainMenuParentBtnFocused, #subMenusContainer a.subMenuParentBtnFocused{
background-color:#3366FF ;
color:#FFF; /* Try #AAF here */
}
/* sub menu links on hover or focus */
#subMenusContainer a:hover,
#subMenusContainer a:focus,
#nav a.mainMenuParentBtnFocused,
#subMenusContainer a.subMenuParentBtnFocused,
#nav li a:hover,
#nav li a:focus{
background-color:#3366FF ;
color:#FFF; /* Try #AAF here */
}
This CSS makes the color of the text white. THe background here is in not white but after in the CSS you have background:#fff; applied to #nav ul.
If this doesn't work you need to post your html, make a fiddle or post a live link.

Style Unordered List Independently From Parent Unordered List

I'm not sure if I formulated the question correctly, but let me try to explain what I want to achieve.
I'm trying to style navigation menu of a WordPress-based site.
I want the submenu links to be evenly arranged along the entire width of the website's <body> tag (960px wide). If the links of a particular submenu do not fit in one row, I want them to wrap around and arrange themselves in neat columns.
Finally, I want the submenu, when it drops down on hover, to push the rest of the website's content down.
Problem: the submenu unordered list affects the position of the links in the parent unordered list, moving the links around. Somehow, the only thing I could do to keep the parent menu links in place was to pull the submenus out of the way by applying margin-right:-965px;
Question: How should I modify my CSS to position both submenus all the way to the left, level with the edge of the main container?
(If necessary, I can assign custom classes to each submenu separately, for example: .submenu-about and .submenu-investors.)
Thank you in advance for your help!
Here's the complete CSS for the navigation menu:
.main-navigation ul {
list-style-type:none;
margin-top:45px;
}
.main-navigation ul {
display: inline-block;
width:70%;
float:right;
}
.main-navigation ul li {
float:left;
}
.main-navigation ul li a {
display:block;
margin:3px 0 3px 40px;
}
.main-navigation ul ul {
background:#efefef;
display:none;
}
.main-navigation li {
font-size: 13px;
}
.main-navigation li a {
outline: none;
text-decoration:none;
border-bottom: 0;
color: #6a6a6a;
text-transform: uppercase;
//white-space: nowrap;
}
.main-navigation li a:hover {
color: #000;
}
.main-navigation ul li:hover > ul {
margin:-1px -960px 3px 0;
display:block;
width:960px;
}
.main-navigation li ul li a {
font-size: 11px;
margin: 10px 0 10px 10px;
width:180px;
}
.main-navigation .menu-item > a,
.main-navigation .menu-ancestor > a,
.main-navigation .page_item > a,
.main-navigation .page_ancestor > a {
color: #9a9a9a;
font-weight:bold;
}
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
color: #636363;
font-weight:bold;
}
This Should do it
Add this to your css
.main-navigation ul li .sub-menu {position:absolute; left:0px;}
Found my own answer.
Remove the background from ul li:hover ul.
Set position:relative and the gray background for the ul li:hover >ul li.
Set individually the negative left margins for each submenu li item, to pull them left separately by different number of pixels.

ie7 dropdown menu(list)

Helo!
Dropdown in IE7 displayed not correct. When I put mouse over it's appears like inline block and it's too far to the right. When I put mouse over first element in ul, second one disappears. And near each element is weird angle, which is angle of that menu which appears after I put mouse over.
any help or advice will be appreciated!
http://jsfiddle.net/an4Ng/
My code is:
nav ul {
padding:0;
margin-right:15%;
margin-left:15%;
float:left;
position:absolute;
}
nav ul li{
float:left;
position:relative;
overflow:hidden;
z-index:200!important;
padding:5px 35px;
margin-top:5px;
display:block;
}
nav ul li a{
text-decoration:none;
font-family: BebasNeueRegular, Arial,calibri;
font-size:x-large;
color:#eee;
}
nav ul li:hover{
overflow:visible;
position:static;
}
nav ul li ul{
width: auto; height: auto;
display:block;
position:absolute;
border:3px solid gray;
background-color: black;
}
nav ul li ul li a{
text-decoration:none;
font-size:large;
margin-top:15px;
}
nav ul li ul li a:hover{
text-decoration:underline;
color:#caf9ff;
}
I just threw this together but how's this?
http://jsfiddle.net/PgVQC/3/
Obviously I haven't tested it in IE7 but it's how I tend to do my dropdown menus.
You might have to throw in a bit of jquery to get the menu to display in IE7, here's an example from a site I built a few weeks ago.
http://jsfiddle.net/9L4EC/2/

Resources