I have a superfish menu on my site.
I am trying to find a way to center the sub-menu under it's parent. Right not the sub-menu is aligned left.
My website
My menu css:
/* Custom Styles */
.sf-menu { float:left }
/* 1st level links, no hover, no visits */
.sf-menu li {
}
.sf-menu li a {
color:#3E4245;
line-height:18px;
text-decoration:none;
text-shadow:0 1px 0 #fff;
margin:0;
padding:6px 12px;
}
/* 1st level links, hover */
.sf-menu li a:hover {
color: #7B9EBB
}
/* 1st level links, while hovering over sub menu */
.sf-menu li.sfHover a {
color:#7B9EBB
}
/* 1st level current page */
.sf-menu .current-menu-item a {
color: #7B9EBB;
}
.sf-menu .current-menu-item {
background:#fefefe;
border: 1px solid #ddd;
border-color: rgba(0,0,0,.15);
border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;
background: #f5f5f5;
background: -moz-linear-gradient(100% 100% 90deg, #f5f5f5, #fff);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#f5f5f5));
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.03);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.03);
box-shadow: 0 1px 1px rgba(0,0,0,.03);
}
/* 1st level down triangles with pure css*/
.sf-menu li .sf-sub-indicator {
}
/* Drop-down */
.sf-menu li ul {
background: #fff; margin:5px 0 0; padding:10px 0 0; position: absolute; left: -999em; width: 180px; border: 1px solid #e3e3e3; z-index:9999;
}
.sf-menu li ul, .sf-menu li ul ul {
background: #FFF;
border: 1px solid #e3e3e3;
/* Border Radius */
border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;
/* Box Shadow */
-moz-box-shadow: 0 2px 2px rgba(0,0,0,.03);
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.03);
box-shadow: 0 2px 2px rgba(0,0,0,.03);
margin: 0;
padding:10px 0 0 0;
}
.sf-menu li ul ul { border-radius: 0 4px 4px 4px; -moz-border-radius: 0 4px 4px 4px; -webkit-border-radius: 0 4px 4px 4px; }
.sf-menu li ul ul {
margin-top: -1px
}
.sf-menu li li, .sf-menu li li li {
border:0;
border-bottom: 1px solid #dedede
}
.sf-menu li li:last-child, .sf-menu li li li:last-child {
border-bottom: none
}
.sf-menu li li a, .sf-menu li li li a {
padding: 8px 15px;
color: #666 !important;
font-size: 0.8em;
}
.sf-menu li li a:hover, .sf-menu li li li a:hover {
font-weight: bold;
}
/* Drop-down Arrow */
.sf-menu li li:first-child {
background: url('../images/nav-indicator.png') no-repeat scroll center top transparent;
margin-top: -18px;
padding-top: 10px
}
.sf-menu li li li:first-child { background: none }
I would suggest using a negative left parameter on line 29 of your superfish css file.
.sf-menu li#menu-item-34:hover ul,
.sf-menu li#menu-item-34.sfHover ul {
left: -48px;
}
.sf-menu li#menu-item-21:hover ul,
.sf-menu li#menu-item-21.sfHover ul {
left: -64px;
}
.sf-menu li#menu-item-20:hover ul,
.sf-menu li#menu-item-20.sfHover ul {
left:4px;
}
In SUPERFISH JS onshow:
var $this = this.addClass(o.hoverClass),
$ul = $this.children(o.popUpSelector);
var mainbtn_w = this.width()/2;
var sub_w = $ul.width()/2;
$ul.css('left', "-"+(sub_w-mainbtn_w)+"px");
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
Despite the fact my original account mysteriously disappeared, here's my question for the geniuses over on this site:
For a long time now, I've been 'attempting' to build a response Wordpress theme from scratch so that I can keep all of my ideas on one website. The issue happens to be with the navigation menu. I have a bit of CSS doing the justice on mobile platforms under 600px in width. However, on screens larger than 600px, I have the navbar set so that it's fixed on the webpage and maintains its position when scrolling up and down. When a screen smaller than 600px visits the site, I have it set so that the navbar should change from a fixed to relative position. Despite what I'd changed in my stylesheet, I can't seem to make the navbar switch from a fixed to relative state.
Image of the issue:
http://i.gyazo.com/9e8ac2c12d279bba4e5ff98418c9b0ed.png
When normally on the page over 600px:
http://i.gyazo.com/b54486fb441717e79ed9bd3b44ba2710.png
Here's the code. As you can see, when set to resize under 600px, the position should stay relative, but it doesn't:
.main-navigation {
position: fixed;
float: left;
width: 100%;
display: block;
clear: both;
font-family: 'Open Sans', sans-serif;
background: url('nav-bg.png') repeat center;
color: #fff;
-webkit-box-shadow: 0 3px 6px 0px black;
-moz-box-shadow: 0 3px 6px 0px black;
box-shadow: 0 3px 6px 0px black;
z-index: 999999;
}
.main-navigation ul {
list-style: none;
margin: 0;
padding-left: 0;
}
.main-navigation li {
float: left;
}
.main-navigation a {
display: block;
padding: 2.5em 3.5em;
font-size: 14px;
font-size: 1.4rem;
text-decoration: none;
line-height: 1.4em;
color: white;
color: hsl(0, 0%, 100%);
}
.main-navigation ul ul {
position: absolute;
left: 0;
z-index: 99999;
display: none;
float: left;
padding: 0;
background-image: url('nav-bg2.png');
}
.main-navigation ul ul ul {
left: 100%;
top: 0;
}
.main-navigation ul ul a {
width: 200px;
}
.main-navigation ul ul li {}
.main-navigation li:hover > a {
color: #fff;
color: hsl(0, 0%, 100%);
background: #313131;
opacity: 0.4;
}
.main-navigation ul ul :hover > a {}
.main-navigation ul ul a:hover {
background: #313131;
background: hsl(0, 0%, 19%);
}
.main-navigation ul li:hover > ul {
display: block;
}
.main-navigation ul ul li:hover > ul {
display: block;
}
.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a:hover,
.main-navigation .current-menu-item > a:hover {
-moz-box-shadow: inset 0 0 15px #000000;
-webkit-box-shadow: inset 0 0 15px #000000;
box-shadow: inset 0 0 15px #000000;
color: #fff;
}
.main-navigation .current_page_ancestor {
-moz-box-shadow: inset 0 0 15px #000000;
-webkit-box-shadow: inset 0 0 15px #000000;
box-shadow: inset 0 0 15px #000000;
}
.main-navigation ul ul .current_page_parent,
.main-navigation .current_page_parent .current_page_item > a {
-moz-box-shadow: inset 0 0 15px #000000;
-webkit-box-shadow: inset 0 0 15px #000000;
box-shadow: inset 0 0 15px #000000;
}
/* Menu Resize */
.menu-toggle {
display: none;
}
#media screen and (max-width: 600px) {
.menu-toggle {
display: block;
height: 3.75em;
padding: 0 1em;
font-weight: normal;
font-size: 14px;
font-size: 1.4rem;
text-decoration: none;
line-height: 3.75em;
color: white;
background-image: url('nav-bg2.png');
position: relative;
}
.main-navigation.toggled .nav-menu {
display: block;
border-top: 1px solid;
border-top-color: #fff;
border-top-color: hsla(0, 0%, 100%, .5);
}
.main-navigation ul {
display: none;
text-align: center;
padding-left: 0;
background-image: url('nav-bg2.png');
}
.main-navigation li {
float: none;
}
.main-navigation li a {
padding: 1.3em 2em;
}
.main-navigation li li a {
padding-left: 4em;
}
.main-navigation li li li a {
padding-left: 6em;
}
.main-navigation li:hover > a {
background: #313131;
background: hsl(0, 0%, 19%);
}
.main-navigation ul ul,
.main-navigation ul ul ul {
position: relative;
top: inherit;
left: 0;
display: block;
float: none;
background-image: url('nav-bg2.png');
}
.main-navigation ul ul a { width: 100%; }
.main-navigation ul a:hover,
.main-navigation ul ul a:hover {
background: #4d4d4d;
background: hsl(0, 0%, 30%);
}
.main-navigation .current_page_ancestor { background: inherit; }
.main-navigation ul ul .current_page_parent {
color: inherit;
background: inherit;
}
.main-navigation .current_page_item > a,
.main-navigation .current_page_item > a:hover,
.main-navigation .current_page_item li:hover,
.main-navigation .current_page_parent .current_page_item > a {
-moz-box-shadow: inset 0 0 15px #000000;
-webkit-box-shadow: inset 0 0 15px #000000;
box-shadow: inset 0 0 15px #000000;
}
}
You never set the position back to relative for .main-navigation - you do so for .menu-toggle (which I assume is your dropdown button?)
Try adding this:
#media screen and (max-width: 600px){
.main-navigation {
position: relative;
float: none;
}
}
Humans needed... My CSS drop down menu will not show up in ie8 and flashes then shuts on iPhone 5 browsers (responsive design)..using code from a themeforest template. without further adieu here is the code.
HTML
<div id="navigation">
<ul>
<li>Home</li>
<li>About
<ul>
<li>Leadership</li>
<li>Giving</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</li>
</ul>
</div>
CSS
/* Main Navigation
==========================*/
#navigation {
float: right;
}
#navigation ul, #navigation li {
list-style:none;
padding:0;
margin:0;
display:inline;
}
#navigation ul li{
float:left;
position:relative;
}
#navigation ul li a {
font-family: Arial, sans-serif;
display: inline-block;
color: #888;
padding: 40px 6px 10px 6px;
margin: 0 5px;
text-decoration: none;
font-size: 14px;
border-bottom: 3px solid transparent;
}
#navigation ul li a:hover{
border-bottom: 3px solid #555;
}
#navigation ul ul {
opacity: 0;
margin: -3px 0 0 5px;
filter: alpha(opacity=0);
position: absolute;
top:-99999px;
left: 0;
background: #fff;
border: 1px solid #dddddd;
border-top: 3px solid #555;
z-index: 999;
}
#navigation ul ul li a:hover {
border-bottom: 1px solid #ddd;
}
#navigation ul ul li a {
padding: 8px 0;
display: block;
width: 130px;
margin: 0 16px;
font-family: Arial, sans-serif;
font-weight: normal;
font-size: 12px;
border-bottom: 1px solid #dddddd;
border-top: 1px solid transparent;
}
#navigation ul ul ul {
position:absolute;
top:-99999px;
left:100%;
opacity: 0;
margin: -3px 0 0 0;
z-index: 999;
}
#navigation ul ul ul li a {
border-bottom: 1px solid #dddddd !important;
border-top: 1px solid transparent;
}
#navigation ul ul li:last-child a, #navigation ul ul li:last-child a:hover {
border-bottom: 1px solid transparent
}
#navigation ul ul ul li:last-child a {
border-bottom: 1px solid transparent !important
}
#navigation ul li:hover>ul{
opacity: 1;
position:absolute;
top:99%;
left:0;
}
#navigation ul ul li:hover>ul{
position:absolute;
top:0; left:100%;
opacity: 1;
z-index:497;
background: #fff border: 0;
}
#navigation ul li:hover > a {
color: #444;
}
#navigation ul ul li:hover > a {
border-top: 1px solid transparent;
color: #444;
}
#current {
font-weight: bold !important;
color: #444 !important;
border-bottom: 3px solid #555 !important;
}
Your problem appears to be with the line:
filter: alpha(opacity=0);
To get this to work in IE8, you need to include the line:
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
Alternatively, removing the line entirely doesn't seem to break anything. You might need to play around with different browsers and see what happens.
There's a more in-depth discussion on opacity in IE8 here: Opacity in web pages?
I'm afraid I can't help you on the iPhone side of things.
You also appear to have a bug in your code:
#navigation ul ul li:hover>ul{
position:absolute;
top:0; left:100%;
opacity: 1;
z-index:497;
background: #fff border: 0;
}
You're missing a semi colon after #fff on the last line. Use the W3C CSS Validator to help you trap bugs like this.
I am about read to pull my hair out! Whenever you over over the dropdown navigational menu, the hover image drops below where it should be and stretches. Then the dropdown area disappears when you try to mouse to it. You can see this in action at http://pauldrayton.com/sites/waterdamagesegeorgia/. I've tried playing with the z-index to see if that could be the issue, but I have yet to figure it out!
Here's the CSS. Any help would be appreciated.
#access {
display: block;
float: left;
margin: 0 ;
margin-right:24px;
margin-top:-30px;
border-bottom: 2px solid #CCC ;
width: 990px;
z-index: 100;
}
#access .menu-header,
div.menu {
font-size: 14px;
margin-left: 12px;
}
#access .menu-header ul,
div.menu ul {
list-style: none;
float:right;
position:relative;
margin: 0 0;
margin-right:24px;
}
#access .menu-header ul.sub-menu li {
box-shadow: 3px 3px 3px #999;
-moz-box-shadow: 3px 3px 3px #999;
-webkit-box-shadow: 3px 3px 3px #999; }
#access .menu-header li,
div.menu li {
float: right;
position: relative;
padding:0px;
background:url(images/mantra_menu.png) top left no-repeat;
height: 27px;
margin-right:10px;
z-index: 101;
}
#access li.current_page_item {
background:url(images/mantra_menu_current.png) top left no-repeat;
border-bottom:none;
}
#access li.current-menu-item {
background:url(images/mantra_menu_current.png) top left no-repeat;
border-bottom:none;
}
#access a {
color: #FFFFFF;
display: block;
height: 27px;
margin-left:10px;
padding-right: 10px;
padding-top:4px;
padding-right:25px;
text-decoration: none;
font-weight:normal !important;
background:url(images/mantra_menu.png) top right no-repeat;
position:relative;
right:-10px;
z-index: 102;
white-space:nowrap;
}
#access .menu-header li:hover,
div.menu li:hover, #access a:hover {
color:#0C85CD ;
}
#access ul ul {
display: none;
position: absolute;
top: 29px;
right: 0px important;
float: right;
z-index: 104;
background:url(images/mantra_menu_down.png) 0px 0px no-repeat;
padding:12px 0px 0px;
/*border-bottom:1px solid #CCC;*/
margin-top:-30px;
}
#access ul ul li {
display:block !important;
background:#FFF !important;
/* border-left:1px solid #CCC;
border-right:1px solid #CCC;*/
margin-left:0 !important;
margin-right:0px !important;
/*padding-left:10px;
padding-right:10px;*/ /* disabled for submenu width fix */
padding-top:6px;
z-index: 105;
}
#access ul { }
#access ul li { }
#access ul li ul {
display: none; /* submenu width fix */ }
#access ul ul li { /* level 2 */
border: 0;
width: 100%; /* submenu width fix */
border-left: 1px solid #EEE;
border-right: 1px solid #EEE;
border-bottom: 1px solid #EEE;
white-space: pre;
}
#access ul ul ul li { /* level 3 */
border: 0;
/* width: 100%;*/
width: auto;
display: block;
float: none;
border-top: 1px solid #EEE;
border-right: 1px solid #EEE;
border-bottom: 1px solid #EEE;
white-space: pre; /* submenu width fix */
z-index: 106;}
#access ul ul a { display: block; padding: 3px 20px 0 10px !important;
/* submenu width fix */ }
#access ul ul a, #access ul ul ul a {
margin:0 !important;/*padding:0 !important;*/
left:0 !important;
color:#5F5B5B;
border-bottom:none;
background:none !important;
}
#access ul ul li:hover, #access ul ul ul li:hover {
background:#FCFCFC !important;
}
#access ul ul ul {
left: 100%;
top: 0;
background:url(images/mantra_menu_right.png) 0px 0px no-repeat;
padding:0px 0px 0px 12px;
z-index: 107;
/*border:1px solid #CCC;*/
}
#access li:hover > a {
color:#0E85CD ;
}
#access ul ul :hover > a {
color:#0E85CD;
}
#access ul li:hover > ul {
display: block;
z-index: 108;
}
#access ul li.current_page_item > a,
#access ul li.current-menu-item > a{
color: #000 !important;
background:url(images/mantra_menu_current.png) top right no-repeat;
}
#access ul ul li.current_page_item ,
#access ul ul li.current-menu-ancestor,
#access ul ul li.current-menu-item ,
#access ul ul li.current-menu-parent {
color: #000 !important;
background:#FFF !important;
}
* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
color: #5F5B5B ;
background:url(images/mantra_menu_current.png) top right no-repeat;
}
I made the following changes:
#menu-main-navigational {
position:relative;
}
#access .menu-header ul {
position:absolute;
}
and it worked for me
Give the .sub-menu element a position of absolute instead of relative. The relative causes it to force its parent element to expand. You will also need to give it a fixed width as it will no longer resize to its parent. And edit out any rules that override that property on the element.
The website I'm working on has a menu that includes a logo image as a background for the last link. For some reason that image doesn't appear in IE, even though it shows up fine in all other browsers.
Here's the site:
http://www.cybart.com/bscg/
I would appreciate it if someone could take a look at my CSS and suggest the Internet Explorer version:
#access {
left:70%;
top:140px;
margin-left:-600px;
width: 280px;
z-index:999;
position:relative;
float:left;"
}
#access ul {
-moz-box-shadow: 0 0 5px -1px #888;
-webkit-box-shadow: 0 0 5px -1px #888;
box-shadow: 0 0 5px -1px #888;
}
#access ul,
#access ul ul {
list-style-type:none;
width: 250px;
}
#access ul ul {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
display:none;
}
#access ul li:hover > ul {
display: block;
}
#access ul li:last-child {
height:77px;
background: url(images/aba/ABALinkRed.jpg) no-repeat top left;
text-indent: -3000px;
-moz-box-shadow: 0 0 5px -1px #888;
-webkit-box-shadow: 0 0 5px -1px #888;
box-shadow: 0 0 5px -1px #888;
}
#access ul li:last-child a {
background:transparent;
height:77px;
}
#access ul ul li:last-child {
background:transparent;
height:32px;
text-indent: 0px;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#access ul ul li:last-child a {
background:#fff;
background: rgba(255, 255, 255, 0.85);
height:18px;
}
#access ul a,
#access ul ul a {
display:block;
padding: 7px 0 7px 10px;
background:#fff;
background: rgba(255, 255, 255, 0.85);
text-decoration:none;
color:black;
}
#access ul ul {
padding-left:40px;
margin-left:-20px;
}
#access ul ul a {
margin-left: -20px;
padding-left:20px;
width:230px;
}
#access ul a:hover,
#access ul ul a:hover {
color: #CA0000;
}
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
color: #CA0000;
}
It works in IE9, so I assume you're using IE8.
This is how you're adding the image:
#access ul li:last-child {
background: url(images/aba/ABALinkRed.jpg) no-repeat top left;
}
The reason it doesn't work is that :last-child is not supported in IE until version 9, see: http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx#pseudoclasses
I am having a problem with my website, www.diaplasisgym.com. The problem is the sub menu. It is working fine in Firefox, Chrome and Safari, but if you open it with IE the slide bar is hiding the submenu. How i can fix this?
Here the code of the menu and submenu:
#mainMenu {
position:absolute;
bottom:-80px;
left:0px;
background:url(images/menu.png) no-repeat;
width: 961px;
height:98px;
}
#mainMenu ul li {
float:right;
height:70px;
}
#mainMenu ul li a {
font-weight:bold;
display:block;
color:#ffffff;
padding:25px 20px 0;
font-size:15px;
}
#mainMenu ul li a span {
font-size:10px;
color:#999;
}
#mainMenu ul li a:hover {
text-decoration:none;
color:#2fc8ff;
}
#mainMenu.ddsmoothmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
#mainMenu.ddsmoothmenu ul li {
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
* html #mainMenu.ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to
behave correctly*/ display:
inline-block;
}
/*1st sub level menu*/
#mainMenu.ddsmoothmenu ul li ul{
position: absolute; l
eft: 0;
display: none; /*collapse all sub menus to begin with*/ visibility: hidden;
width:auto;
padding-bottom:7px;
background:
url(images/secondarydropdown.png)
repeat-y; box-shadow: 3px 6px 7px 1px
rgba(0, 0, 0, 0.5);
-moz-box-shadow:3px 6px 7px 1px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 3px 6px 7px 1px rgba(0, 0, 0, 0.5);
border-radius:8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-top-left-radius: 0px;
-moz-border-radius-topleft: 0px;
-webkit-border-top-left-radius: 0px;
border-top-right-radius: 0px;
-moz-border-radius-topright: 0px;
-webkit-border-top-right-radius: 0px;
border: 1px solid #232323;
border-top:none; /*border-bottom:1px solid #222;*/
}
/*Sub level menu list items (undo
style from Top level List Items)*/
#mainMenu.ddsmoothmenu ul li ul li{
float: none;
display: list-item;
padding:0;
height:3%;
}
/* Sub level menu links style */
#mainMenu.ddsmoothmenu ul li ul li a, #mainMenu.ddsmoothmenu ul li ul li a:hover{
text-align:left;
/*background:#000;*/
line-height:20%;
font-size:13px;
padding: 22px 5px 15px 28px;
color: #ffffff;
font-family:
Century Gothic, Arial, sans-serif;
text-shadow: 1px 1px 1px rgba(0, 0, 0,0.3);
background: url(images/secondary-dropdown-bullet.png)
no-repeat 15px 20px; z-index:9999;
}
#mainMenu.ddsmoothmenu ul li ul li a:hover {
color:#1FA2E1;
}
#mainMenu.ddsmoothmenu ul li ul li a.last, #mainMenu.ddsmoothmenu ul li
ul li a.last:hover {
border:none;
}
/* Holly Hack for IE \*/
* html #mainMenu.ddsmoothmenu{
height: 1%;
} /*Holly Hack for IE7 and below*/
Here's the answer for IE 7
paste this in your stylesheet
/* IE 7 Fix */
#header{z-index:1001 !important;}
#content{z-index:100 !important;}