I'm working on this page:
I'm trying to get the first dropline items to display a little further down from the main menu; say approximately half the distance as there is between the first and second droplines. The reason being that when mousing over the first dropline, it's very easy to have the mouse go back to the main menu.
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/pro_dropline7.html
Copyright (c) 2005-2008 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
#dropline {position:relative; font-size:13px; height:40px; background:url(http://test.garlandcountydemocrats.org/MASTER_files/back.gif);}
#dropline, #dropline ul {padding:0; margin:0; list-style:none; width:1080px;}
#dropline table {border-collapse:collapse; margin:-1px -10px; 0 0; padding:0; width:0; height:0; font-size:13px;}
#dropline li {float:left; height:40px; margin-right:1px;}
#dropline li a {float:left; display:block; height:40px; line-height:19px; padding:0 20px 0 10px; font-family:arial, sans-serif; font-size:13px; color:#fff; text-decoration:none; font-weight:bold; text-align:center;}
#dropline li a.down {background:background:url(http://test.garlandcountydemocrats.org/MASTER_files/down.gif) no-repeat right center;}
#dropline li ul li a.down {font-size:15px; color:#ff0; font-weight:normal;}
#dropline li a:hover {white-space:nowrap; color:#444;}
#dropline li a.down:hover {white-space:nowrap; color:#444; background:background:url(http://test.garlandcountydemocrats.org/MASTER_files/down-over.gif) no-repeat right center;}
#dropline li:hover > a {color:#4AEF03;}
#dropline li:hover > a.down {color:#4AEF03; background:url(http://test.garlandcountydemocrats.org/MASTER_files/down-over.gif) no-repeat right center;}
#dropline li ul {position:absolute; top:38px; left:-9999px; z-index:10; background:url(http://test.garlandcountydemocrats.org/MASTER_files/sub-back.png) left top;}
#dropline li ul.floatRight li {float:right;}
#dropline :hover ul,
#dropline :hover ul :hover ul,
#dropline :hover ul :hover ul :hover ul,
#dropline :hover ul :hover ul :hover ul :hover ul,
#dropline :hover ul :hover ul :hover ul :hover ul :hover ul {left:0; background:url(http://test.garlandcountydemocrats.org/MASTER_files/sub-back.png) left bottom;}
#dropline :hover ul ul,
#dropline :hover ul :hover ul ul,
#dropline :hover ul :hover ul :hover ul ul,
#dropline :hover ul :hover ul :hover ul :hover ul ul {left:-9999px; top:38px; background:transparent;}
I've tried several different variations on the css code shown below without success. I'm a total newbie so any help will certainly be appreciated. Thanks in advance. Hozey
Just add padding-top to #dropline li ul
CSS:
#dropline li ul {position:absolute; padding-top:14px; top:38px; left:-9999px; z-index:10; background:url(http://test.garlandcountydemocrats.org/MASTER_files/sub-back.png) left top;}
Demo: http://jsfiddle.net/CGctj/1/
Related
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;
}
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.
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.
The submenu links show up white in safari on my macbook.
They should show black, as they do in every browser (ie, ff, chrome) on Windows 7.
This happens on my site: http://www.impactshred.com
Why don't the style work in Safari?
Try updating this:
#navigation ul li.hover ul li a,
#navigation ul ul li a,
#navigation ul ul li a:visited
To use :link
#navigation ul li.hover ul li a:link,
#navigation ul ul li a:link,
#navigation ul ul li a:visited
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/