I created a drop down menu and added it to blogger. It is not working in Chrome or Safari. The problem is, the drop down menu appears when first rolled over, but disappears after the first sub menu item. This is not happening in Firefox or IE, only a problem in Safari and Chrome. Could it be a z-index issue? Any help is appreciated. I am adding the code below:
#navigation {
font-family: verdana;
font-size: 18px;
font-weight: bold;
padding: 0px;
margin: 0px;
list-style-type: none;
}
#navigation li {
position: relative;
float: left;
margin: 0px 0px 0px 0px;
z-index: 30;
}
#navigation li a {
display: block;
padding: 8px 13px;
-moz-border-radius-topleft: 0px;
-webkit-border-top-left-radius: 0px;
-moz-border-radius-topright: 0px;
-webkit-border-top-left-right: 0px;
background: #00ddf5;
color: #ffffff;
text-decoration: none;
}
#navigation li ul {
position: absolute;
left: -89px;
top: 0px;
display: none;
padding: 0px;
margin: -11px;
list-style-type: none;
z-index: 20
}
#navigation li.over ul li {
float: none;
margin: 0px!important;
top: 10px;
}
#navigation li.over a {
background: #a7f6ff;
}
#navigation li.over ul {
padding: 0px!important;
display: block;
background: #00ddf5;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-bottomright: 0px;
-webkit-border-bottom-left-right: 0px;
-moz-border-radius-topright: 0px;
-webkit-border-bottom-top-right: 0px;
}
#navigation li.over ul li a {
font-size: 18px;
padding: 0px 30px;
background: none;
white-space: nowrap;
}
#navigation li.over ul li a:hover {
background: #000000;
color: #ffffff;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
}
Related
I want to code this so the active and hover li's appear over the normal li. But what happens is the hover and active li's appear inside the normal li. When I add padding (to hover and active li's) in an attempt to duplicate the size of the normal li, the normal li remains visible and simply expands by the increase padding of the hover and active li and not covered as I need it to be.
Here is my CSS:
/***********HORIZONTAL NAVS***********/
.menu-horizontal {
margin: 3px 2px 0.75em;
}
.menu-horizontal ul.top-level {
background-color: #FFFFFF;
clear: none;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu-horizontal ul.top-level li {
background: #FEAB27;
border-radius: 7px 7px 0px 0px;
display: inline-block;
height: 28px;
padding: 0 25px;
}
.menu-horizontal ul.top-level {
display: inline-block;
float: left;
height: 23px;
margin-left: 173px;
padding-top: 5px;
text-align: center;
text-transform: none;
}
.menu-horizontal ul.top-level li a {
background: none repeat scroll 0 0 transparent;
color: #000000;
display: inline-block;
line-height: 24px;
text-decoration: none;
font-family: Verdana,'Magra','Gafata',sans-serif;
font-size: 102%;
font-weight: bold;
}
.menu-horizontal ul.top-level li.selected a, .menu-horizontal ul.top-level li a:hover {
background: #FDCC00;
border-radius: 7px 7px 7px 7px;
text-decoration: underline;
}
.menu-horizontal li ul.second-level {
display: block;
left: -999em;
margin: -1000px 0 0;
overflow: visible;
padding: 0 0 9px;
position: absolute;
text-align: left;
}
.menu-horizontal li:hover ul.second-level, .menu-horizontal li.hover ul.second-level {
left: auto;
}
Thanks!
I am not sure if I got your question right, but did you want something like this?
.menu-horizontal ul.top-level li.selected, .menu-horizontal ul.top-level li:hover {
background: #FDCC00;
border-radius: 7px 7px 7px 7px;
}
.menu-horizontal ul.top-level li a:hover, .menu-horizontal ul.top-level li.selected a {
text-decoration: underline;
}
http://jsfiddle.net/svSwA/
If you want to change another element as an A you have to put the :hover selector on it, or you have to use JavaScript.
I am using the theme twenty twelve for wordpress http://wordpress.org/extend/themes/twentytwelve and have changed the menu so that it looks good for the desktop. In the mobile version, the button for the menu shows up but when you click it appears my regular menu. I would like to style down the mobile menu without my normal menu is affected but can not find where to do it. My site is not online, so I can not give a link to my site
twenty twelve demo http://twentytwelvedemo.wordpress.com/
This is my destop menu that looks ok.
This is the mobile menu that I want to style without affect the desktop menu
Have changed the following css to style my desktop menu
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
border-bottom: 2px solid #f68a1f;
border-top: none;
margin: 0 0 2px 0;
padding: 0px;
padding-top: 50px;
width: 550px;
}
.main-navigation ul {
float: right;
margin: 0;
padding: 0;
list-style: none;
}
.main-navigation li a,
.main-navigation li {
list-style: none;
float: left;
width: 90px;
margin:0px;
}
.main-navigation li a {
color: #292A2B;
display: block;
padding: 5px 5px;
text-align:center;
text-decoration: none;
font-weight: normal;
font-size: 14px;
line-height: 30px;
border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
}
.main-navigation li a:hover {
color: #ffffff;
background-color: #f68a1f;
border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
}
.main-navigation li {
margin: 0 40px 0 0;
margin: 0 1rem 0 0;
position: relative;
}
.main-navigation li ul {
display: none;
margin: 0;
padding: 0;
position: absolute;
top: 100%;
z-index: 1;
}
.main-navigation li ul ul {
top: 0;
left: 100%;
}
.main-navigation ul li:hover > ul {
color: #ffffff;
background-color: #f68a1f;
border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
}
.main-navigation li ul li a {
color: #292A2B;
display: block;
padding: 5px 5px;
text-align:center;
text-decoration: none;
font-weight: normal;
font-size: 14px;
line-height: 30px;
border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
}
.main-navigation li ul li a:hover {
color: #ffffff;
background-color: #f68a1f;
border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
}
.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: #ffffff;
background-color: #f68a1f;
}
The entire css file from theme http://pastebin.com/SFaT4BCn
Do you use media queries? Try to use media queries to set styles for specific device resolutions.
Found /* =Media queries /* Minimum width of 600 pixels. */ in CSS and the theme use mobile first. Just moved my code to that section.
Having some problems getting the drop down menu position or mainly the background of it in place with the links from drop down menu, can't figure out what could be the problem... Here's the CSS code (menu li ul) image on how it looks -> http://i.imgur.com/9VjpW.jpg or jsFiddle http://jsfiddle.net/F5wCG/3/
.menu ul{
background-color: transparent;
height: 25px;
list-style: none;
margin: 0;
padding: 0;
position: relative;
clear: left;
float: right;
text-align: center;
right: 50%;
}
.menu li{
float: left;
padding: 0px;
position: relative;
left: 50%;
margin: 0px;
list-style: none;
}
.menu li a{ /* Where main link names are etc */
background: #333 url("images/seperator.gif") bottom right no-repeat;
color: #CCC;
display: block;
font-weight: normal;
line-height: 35px;
margin: 0px;
padding: 0px 25px;
text-align: center;
text-decoration: none;
}
.menu li a:hover, .menu ul li:hover a{
background-color: #2580A2;
background-image: url('images/hover.gif');
background-position: bottom center;
background-repeat: no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{ /* Drop down menu */
background-color: #333;
display: none;
height: auto;
border: 0px;
position: absolute;
width: 225px;
z-index: 200;
padding: 0px;
margin: 0px;
border: 0px;
}
.menu li:hover ul{
display: block;
}
.menu li li {
background: url('images/sub_sep.gif') bottom left no-repeat;
display: block;
float: none;
width: 220px;
}
.menu li:hover li a{
background: none;
}
.menu li ul a{
display: block;
height: 35px;
font-size: 12px;
font-style: normal;
margin: 0px;
padding: 0px 10px 0px 15px;
text-align: left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background: #2580A2;
background-image: url(images/hover_sub.gif);
background-position: center left;
background-repeat: no-repeat;
border: 0px;
color: #FFF;
text-decoration: none;
}
.menu p{
clear: left;
}
http://jsfiddle.net/F5wCG/4/
Basically remove
.menu li { left: 50% }
and add
.menu li a {left:0; }
If you look here under "About ISL" -> "Board of Trustees" you can see I have created a third level dropdown, but how can I properly align that drop down? Below you will see my css.
#menudiv {
width: 999px;
float: left;
clear: left;
height: 250px;
background: url(images/top_bg.png) no-repeat;
margin-top: 10px;
}
#mainmenu {
width: 948px;
height: 63px;
float: left;
margin-left: 16px;
margin-top: 5px;
border: 1px solid #D5D5D5;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.1);
background: url(images/nav_bg.gif) repeat;
}
.mainnav {
margin: 0;
padding: 0;
list-style: none;
}
.mainnav * {
margin: 0;
padding: 0;
list-style: none;
}
.mainnav ul {
position: absolute;
top: -999em;
display: none;
}
.mainnav li {
float: left;
position: relative;
z-index: 999;
height: 63px;
line-height: 55px;
margin-right: 0px;
border-right: 1px solid #D5D5D5;
}
.mainnav li.last {
border-right: none;
}
.mainnav a {
display: block;
font-size: 19px;
margin: 0;
color: #cc9900;
font-family: Copperplate,Arial,Helvetica,Sans serif;
font-weight: 600;
text-decoration: none;
padding: 3px 13px 3px 12px;
color: #555;
text-shadow: 0 1px 1px white;
}
.mainnav li:hover {
text-decoration: none;
border-bottom: solid 0px #ccc;
background: white;
}
.mainnav ul li {
width: 132px;
}
.mainnav li:hover ul,
ul.mainnav li.sfHover ul {
left: 0px;
top: 50px;
padding-top: 0px;
width: 132px;
border-bottom: solid 0px #eaeaea;
background: url(images/nav_dropdown_shadow.gif) repeat-x top;
padding: 6px 0 0px 0px;
margin: 13px 0 0 -1px;
border: 1px solid #D5D5D5;
-moz-border-radius-bottomleft: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomright: 3px;
-webkit-border-bottom-right-radius: 3px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.1);
width: 175px;
border-bottom-left-radius: 3px 3px;
border-bottom-right-radius: 3px 3px;
}
.mainnav li:hover li ul,
.mainnav li.sfHover li ul {
top: -999em;
}
.mainnav li li:hover ul,
ul.mainnav li li.sfHover ul {
left: 132px;
top: -8px;
}
.mainnav li:hover ul,
.mainnav li li:hover ul {
top: -999em;
}
.mainnav li li {
color: #555;
display: block;
padding: 0px;
height: auto !important;
border: none;
width: 175px;
background: url(images/nav_dropdown_bg.gif) repeat;
margin: 0;
}
.mainnav li li a:link,
.mainnav li li a:visited {
display: block;
height: auto !important;
line-height: 30px;
color: #333;
font-weight: normal;
font-family: arial,helvetica,sans-serif;
font-size: 12px;
border: none;
margin: 0;
padding-left: 10px;
overflow: hidden;
border-bottom: 1px solid #E3E3E3;
}
.mainnav li li :hover {
}
.mainnav li li a:hover {
background: none;
color: #555 ;
border-bottom: 1px solid #E3E3E3;
}
The problem is that the ul.sub-menu li ul.sub-menu is too far to the left and is covered by its parent. How can I fix the right alignment of these ul elements?
On line 211 in your mainmenu.css, adjust the left position of your submenu by something like 178px, that should place the submenu somewhere more comfortable.
This is the CSS for the dropdown menu I create, the problem is that the menu disappears as soon as I hover the children items.
It gets fixed If I set Height:30px and line-height: 30px but I do not want to adjust height. I want it to auto adjust. I can't get it to work in IE7. This is my CSS
#menu {
display: block;
width: 1000px;
height: 30px;
background: url(../images/modern/menu.png) no-repeat;
margin: 10px 0 0 0;
position: relative;
z-index: 10;
}
#menu ul {
float: left;
margin: 0 0 0 5px;
display: inline;
width: 795px;
}
#menu ul li {
position: relative;
float: left;
display: block;
position: relative;
}
#menu ul li a {
float: left;
display: block;
color: #fff;
font-weight: bold;
padding: 9px 10px 9px 10px;
background: url(../images/modern/menu_l.png) no-repeat right;
}
/* sub menu style */
#menu ul ul {
padding:0;margin:0;border:none;
float: none;
display: none;
position: absolute;
z-index: 10;
width: 190px;
top: 29px;
left: 0;
}
#menu ul ul ul {
top: 0;
left: 190px;
}
#menu ul ul li {
float: none;
display: block;
position: relative;
}
#menu ul ul li a {
padding:0;margin:0;border:none;
float: none;
display: block;
font-weight: bold;
position: static;
background: none;
color: #fff;
padding: 6px 10px 6px 10px;
background: #333;
border-bottom: 1px solid #444;
}
This fixes it but I really do not want to set height for child item:
#menu ul ul li a {
padding:0;margin:0;border:none;
float: none;
display: block;
font-weight: bold;
position: static;
background: none;
color: #fff;
padding: 6px 10px 6px 10px;
background: #333;
border-bottom: 1px solid #444;
height: 30px;
line-height: 30px;
}
Try zoom:1; to the thing you applied height:30px; to.