How me doing dropdown menu for pages and child pages on wordpress 4.0, but wp_page_menu not working, wp_list_pages('title_li=') ?> show menu but not show child pages. please help?
Try this:
ul.menu { list-style: none outside none; padding: 0; margin: 0 10px; float: left; font-size: 13px;}
ul.menu li { float: left; margin: 0; padding: 0 15px 0 0; position: relative; }
ul.menu li a { padding: 9px 5px; color: rgb(255, 255, 255); display: block; text-decoration: none; float: left; display: block;}
ul.menu li:hover { background: #A6CB1B; }
.current-cat { background: #8BBF47; }
ul.menu li span { width: 11px; height: 10px; float: left; background: url('/*url of your background or write color anme*/') -561px -78px no-repeat; margin: 11px 0 0 0;}
ul.menu li ul.children {z-index:99; list-style: none outside none; position: absolute; left: 0; top: 31px; background: none repeat scroll 0% 0% rgb(51, 51, 51); margin: 0; padding: 0; display: none; float: left; width: 170px; border-bottom: 1px solid #F8C92D;}
ul.menu li ul.children li { margin: 0; padding: 0; clear: both; width: 170px; border-top: 1px solid #F8C92D;}
html ul.menu li ul.children li a { float: left; width: 145px; background: url('images/narga-sprites.png') -578px -162px no-repeat #A6CB1B; padding-left: 20px; }
html ul.menu li ul.children li a:hover { background: url('/*url of your background or write color anme same as above*/') -578px -162px no-repeat #7BAF36; }
NOTE: This code is untested.Make sure to do necessary changes as per your needs.
Related
IS it possible to align menu item center? Actually my website has a lot many menus, So menus are appearing on second line from left so I want to show them as center aligned.Any suggestions?
Please find below my Css. This is edited style sheet of default twenty ten wordpress theme. I am using full width layout.
Thanks.
#access {
background:#cc0000;
margin: 0 auto;
width: 100%;
padding: 0px 0px;
border-top:2px solid #eb9999;
border-bottom:12px solid #000000;
clear:both;
margin-bottom:5px;
}
#access .menu-header,
div.menu {
font-size: 13px;
margin: 0 auto;
width: 1024px;
}
#access .menu-header ul,
div.menu ul {
list-style: none;
margin: 0;
}
#access .menu-header li,
div.menu li {
float: left;
position: relative;
}
#access a {
color: #aaa;
display: block;
line-height: 20px;
padding: 0 10px;
text-decoration: none;
}
#access ul{display:inline-block;}
#access ul ul {
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
display: none;
position: absolute;
top: 38px;
left: 0;
float: left;
width: 180px;
z-index: 99999;
}
#access ul ul li {
min-width: 180px;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul a {
background: #333;
line-height: 1em;
padding: 10px;
width: 160px;
height: auto;
}
I'm working on a css/html site and I have this problem: in my style.css I got two divs, one for sidebar and one for content. I would like the sidebar to be, well, at the side, but when both are present the content always goes below the sidebar, unless I put that in position:absolute. In that case I have a problem when small screens are used, 'cause they get one over the other.
I paste the code, hope you can help!
/* This is for content */
article, aside, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
#modal {
position: relative;
width: 100%;
display: inline-block;
display: table;
display: table-cell;
float: none;
border: 1px solid #CCC;
box-shadow: 0 1px 5px #CCC;
border-radius: 5px;
font-family: verdana;
margin: 25px auto;
text align: center;
background-color: #f2f2f2;
overflow: auto;
}
#modal header {
background: #f1f1f1;
background-image: -webkit-linear-gradient( top, #f1f1f1, #CCC );
background-image: -ms-linear-gradient( top, #f1f1f1, #CCC );
background-image: -moz-linear-gradient( top, #f1f1f1, #CCC );
background-image: -o-linear-gradient( top, #f1f1f1, #CCC );
box-shadow: 0 1px 2px #888;
padding: 10px;
}
#modal h1 {
padding: 0;
margin: 0;
font-size: 16px;
font-weight: normal;
text-shadow: 0 1px 2px white;
color: #323232;
text-align: center;
}
#modal section {
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
font-size: 12px;
line-height: 175%;
color: #333;
text-align: center;
}
while this is the sidebar
/*sidebar */
#sidebar{
position: static;
margin-top: 15px;
max-width: 150px;
}
#sidebar ul,
#sidebar ul li,
#sidebar ul ul {
list-style: none;
margin: 0;
padding: 0;
border: 0;
top: 5%;
}
#sidebar ul {
position: static;
top: 90px;
z-index: 1000;
}
#sidebar ul li {
min-height: 1px;
line-height: 1em;
vertical-align: middle;
}
#sidebar ul li.hover,
#sidebar ul li:hover {
position: relative;
z-index: 599;
cursor: default;
}
#sidebar ul ul {
margin-top: 1px;
visibility: hidden;
position: absolute;
top: 1px;
left: 99%;
z-index: 598;
width: 100%;
}
#sidebar ul ul li {
float: none;
}
#sidebar ul ul ul {
top: 1px;
left: 99%;
}
#sidebar ul li:hover > ul {
visibility: visible;
}
#sidebar ul li {
float: none;
}
#sidebar ul ul li {
font-weight: normal;
}
/* Custom CSS Styles */
#sidebar {
font-family: 'Lato', sans-serif;
font-size: 18px;
width: 180px;
}
#sidebar ul a,
#sidebar ul a:link,
#sidebar ul a:visited {
display: block;
color: #000000;
text-decoration: none;
font-weight: 300;
}
#sidebar > ul {
float: none;
}
#sidebar ul {
background: #a0a0a0;
}
#sidebar > ul > li {
border-left: 3px solid #000000;
}
#sidebar > ul > li > a {
padding: 10px 20px;
}
#sidebar > ul > li:hover {
border-left: 3px solid #9b1a1c;
}
#sidebar ul li:hover > a {
color: #9b1a1c;
}
#sidebar > ul > li:hover {
background: #f6f6f6;
}
/* Sub Menu */
#sidebar ul ul a:link,
#sidebar ul ul a:visited {
font-weight: 400;
font-size: 14px;
}
#sidebar ul ul {
width: 180px;
background: none;
border-left: 20px solid transparent;
}
#sidebar ul ul a {
padding: 8px 0;
border-bottom: 1px solid #eeeeee;
}
#sidebar ul ul li {
padding: 0 20px;
background: #fff;
}
#sidebar ul ul li:last-child {
border-bottom: 3px solid #000000;
padding-bottom: 10px;
}
#sidebar ul ul li:first-child {
padding-top: 10px;
}
#sidebar ul ul li:last-child > a {
border-bottom: none;
}
#sidebar ul ul li:first-child:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: -20px;
top: 13px;
border-left: 10px solid transparent;
border-right: 10px solid #fff;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
}
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; }
Afternoon,
I have an issue with my CSS. The third dropdown is placed incorrectly and I have no solution.
Here is what I want:
Before:
http://i53.tinypic.com/2qu85z8.png
After:
http://i51.tinypic.com/241k1on.png
Here is the CSS:
ul.dropdown, ul.dropdown li, ul.dropdown ul {
list-style: none outside none;
}
ul.dropdown {
background: url("../img/nav_bg.png") no-repeat scroll left top transparent;
float: left;
padding: 0 0 3px;
position: relative;
width: 970px;
z-index: 100;
}
ul.dropdown li {
float: left;
font-size: 1.2em;
font-weight: bold;
line-height: 1.2em;
margin: 0;
padding: 0;
position: relative;
}
ul.dropdown li a {
color: #000000;
display: block;
padding: 7px 0;
}
ul.dropdown li a:hover {
color: #0971BA;
}
ul.dropdown li a span {
border-right: 1px solid #D6DBE0;
display: block;
padding: 8px 12px;
}
ul.dropdown li a.active {
color: #0971BA;
}
ul.dropdown li.drop a span {
background: url("../img/nav_icons.png") no-repeat scroll right 13px transparent;
min-height: 0;
padding: 8px 25px 8px 12px;
}
ul.dropdown li.drop:hover {
margin: 0 0 0 -1px;
text-align: left;
}
ul.dropdown li.drop a {
background: url("../img/nav_sub_bg.png") repeat-x scroll 0 -999em transparent;
}
ul.dropdown li.drop:hover a {
background: url("../img/nav_sub_bg.png") repeat-x scroll 0 0 #0653AE;
min-height: 0;
}
ul.dropdown li.drop:hover a span {
background-position: right -12px;
border: medium none;
color: #FFFFFF;
padding: 8px 26px 8px 13px;
}
ul.dropdown ul {
left: 0;
margin: 0 0 0 -1px;
overflow: hidden;
padding: 8px 0 0;
position: absolute;
top: 36px;
visibility: hidden;
width: 182px;
z-index: 102;
}
ul.dropdown li ul li {
float: none;
font-size: 12px;
text-shadow: #000 0px 1px 0px;
font-weight: bold;
min-height: 0;
padding: 0;
}
ul.dropdown li.hover, ul.dropdown li:hover {
position: relative;
z-index: 103;
}
ul.dropdown li.drop:hover ul li a {
background: url("../img/nav_sub_bg.png") repeat-x scroll 0 -54px transparent;
color: #FFFFFF;
display: block;
height: 14px;
min-height: 0;
padding: 7px 12px;
}
ul.dropdown li.drop:hover ul li a:hover {
background-position: 0 -92px;
min-height: 0;
}
ul.dropdown li.drop:hover ul li a span {
background: none repeat scroll 0 0 transparent;
display: inline;
padding: 0;
}
ul.dropdown li.drop:hover ul li.lastChild {
height: 30px;
}
ul.dropdown li.drop:hover ul li.lastChild a {
padding: 7px 12px 9px;
}
ul.dropdown li.drop:hover ul li.lastChild a {
background-position: 0 -130px;
}
ul.dropdown li.drop:hover ul li.lastChild a:hover {
background-position: 0 -168px;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
ul.dropdown li.home a {
background: url("../img/nav_icons.png") no-repeat scroll 14px -36px transparent;
display: block;
min-height: 0;
}
ul.dropdown li.home a:hover {
background-position: 14px -69px;
}
ul.dropdown li.home a:active {
background-position: 14px -102px;
}
ul.dropdown li.home a span {
cursor: pointer;
display: block;
min-height: 0;
padding: 8px 19px 8px 20px;
text-indent: -999em;
}
change the left position of the second and further dropdowns from 0.. usually 100% works if there's already a width on the ul elements
ul.dropdown ul ul {left: 100%;}
which should overrule the left: 0; in this:
ul.dropdown ul {
left: 0;
margin: 0 0 0 -1px;
overflow: hidden;
padding: 8px 0 0;
position: absolute;
top: 36px;
visibility: hidden;
width: 182px;
z-index: 102;
}
NOTE you might also have to overrule (by adding to the extra rule) top: 36px; to top: 0;
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.