Hi I had to create a horizontal submenu for a website using wordpress. I played around with the CSS and am almost there I just need to align my links in the submenu to the centre. I tried:
text-align: center;
In the #access ul ul, But that didn't seem to work :S
The website is: http://dev.timson.me (Submenus on "Upcoming" & "Past Productions")
And the CSS is:
#access {
clear: both;
display: block;
float: left;
margin: 0 auto 6px;
padding-top: 8px;
width: 100%;
font-family: Stag;
display:block;
text-align:center;
}
#access ul {
font-size: 13px;
list-style: none;
margin: 0 0 0 -0.8125em;
padding-left: 0;
display:inline-block;
}
#access li {
float: left;
position: relative;
}
#access a {
color: #eee;
display: block;
line-height: 25px;
margin-top: -4px;
margin-bottom: -4px;
padding: 0 1.2125em;
text-decoration: none;
}
#access ul ul {
display: none;
float: left;
margin-top: 0;
position: fixed;
top: 264px;
left: 50%;
width: 1000px;
z-index: 99999;
margin-left:-500px;
text-align:center;
padding-top:5px;
padding-bottom:10px;
background: red;
}
#access ul ul a {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-bottom:10px;
}
#access ul li:hover > ul {
display: block;
}
Any help is greatly appreciated cheers.
Peter
First, add this rule
.sub-menu {
text-align: center;
}
Second, change
#access li {
float: left;
position: relative;
}
to
#menu-default > li {
float: left;
position: relative;
}
And third, add this rule
.sub-menu > li {
display: inline-block;
}
Related
I want to set my drop down menu in the middle of my page. I could make it both left aligned or centered, but now it is not working anymore.
#navigation {
margin-top: -50;
background: #000;
height: 3em;
list-style: none;
position: center;
color: #fff;
font-family: Arial;
font-size: 14px;
z-index: +1;
}
#navigation > li {
position: relative;
left:15%;
display: inline;
height: 100%;
margin-right: 0.5em;
padding: 0 1cm 0 1cm;
z-index: 2;
}
#navigation > li > a {
position: relative;
left:15%;
display: inline;
height: 100%;
color: #c60;
text-decoration: none;
line-height: 3;
font-weight: bold;
text-transform: uppercase;
z-index: 2;
}
#navigation > li > a:hover {
color: orange;
text-decoration: underline;
display: inline;
}
#navigation > li.sub {
position: relative;
display: inline;
}
#navigation > li.sub ul {
width: 10em;
margin: 0;
padding: 0.5em 0;
list-style: none;
background: #a40;
position: absolute;
left:50%;
display: inline;
top: -1000em;
z-index: +2;
}
#navigation > li.sub ul li {
width: 90%;
margin: 0 auto 0.3em auto;
display: inline;
z-index: +2;
}
#navigation > li.sub ul li a {
height: 100%;
display: block;
padding: 0.4em;
color: #fff;
font-weight: bold;
text-decoration: none;
}
#navigation > li.sub ul li a:hover {
background: #c60;
text-decoration: underline;
display: inline;
}
#navigation > li.sub:hover ul {
top: 3em;
z-index: +2;
}
This code used to make the menu centered but it's not working anymore.
Since you haven't provided a snippet of the HTML code for your navigation dropdown, I went ahead and did some detective work to figure it out. So given that the HTML structure is something like this:
<ul id="navigation">
<li class="sub">
<a>option</a>
<ul>
<li><a>sub-option</a></li>
<li><a>sub-option</a></li>
</ul>
</li>
<li class="sub">
<a>option</a>
<ul>
<li><a>sub-option</a></li>
<li><a>sub-option</a></li>
</ul>
</li>
<li>
<a>lonely option</a>
</li>
</ul>
I noticed that there were a few problems in your CSS, I've added comments below to discuss these. So this is your current CSS:
#navigation {
margin-top: -50; /* <-- missing measurement unit, px? em? */
background: #000;
height: 3em;
list-style: none;
position: center; /* <-- no such thing as 'center' */
color: #fff;
font-family: Arial;
font-size: 14px;
z-index: +1; /* <-- not a big deal but you can leave out the plus for positive integers. */
}
#navigation > li {
position: relative;
left:15%; /* <-- this one ... */
display: inline;
height: 100%;
margin-right: 0.5em;
padding: 0 1cm 0 1cm;
z-index: 2;
}
#navigation > li > a {
position: relative;
left:15%; /* <-- ... and this were the ones causing you grief */
display: inline;
height: 100%;
color: #c60;
text-decoration: none;
line-height: 3;
font-weight: bold;
text-transform: uppercase;
z-index: 2;
}
#navigation > li > a:hover {
color: orange;
text-decoration: underline;
display: inline;
}
#navigation > li.sub {
position: relative;
display: inline;
}
#navigation > li.sub ul {
width: 10em;
margin: 0;
padding: 0.5em 0;
list-style: none;
background: #a40;
position: absolute;
left:50%;
display: inline;
top: -1000em;
z-index: +2;
}
#navigation > li.sub ul li {
width: 90%;
margin: 0 auto 0.3em auto;
display: inline;
z-index: +2;
}
#navigation > li.sub ul li a {
height: 100%;
display: block;
padding: 0.4em;
color: #fff;
font-weight: bold;
text-decoration: none;
}
#navigation > li.sub ul li a:hover {
background: #c60;
text-decoration: underline;
display: inline;
}
#navigation > li.sub:hover ul {
top: 3em;
z-index: +2;
}
This is the current state of the navigation dropdown. Before I could solve your issue, I had to fix the following problems:
Removed the rule position: center; from #navigation {} as it is
not a valid rule and wasn't doing anything
Removed the rule left: 15% from #navigation > li {} and #navigation > li > a. Using these two rules to try and center was not only not truly centering the dropdown but causing it to break as well.
Removed the rule margin-top: -50; as it was not doing anything
Changed display: inline; to display: inline-block; in #navigation > li {}. This way height: 100%; would make the height of the li element the same height as the navigation bar.
Now with all that out of the way - all you need to do is, instead of using position: center you need to use text-align: center in #navigation {}. That will center your navigation.
Finally, here is the updated and working navigation dropdown demo and code.
It's not a new problem - when you hover over the dropdown menu, it disappears. I searched many topics and I know about child and sibling selectors, but I still can't find my mistake in my code.
Here's my code and a demo:
.navbar ul {
position: relative;
float: left;
}
.navbar ul > li {
display: inline-block;
margin: 0 28px 0 0;
vertical-align:top;
}
.navbar ul > li > a {
display: block;
color: #fff;
font-size: 17px;
text-decoration: none;
}
.navbar ul > li > a:after {
content: "|";
padding: 0 0 0 28px;
color: #000;
font-size: 17px;
}
.navbar ul > li:last-child a:after {
content: "";
}
/* DROPDOWN LIST */
.navbar ul ul {
position: absolute;
margin: 19px 0 0 0;
padding: 0;
top: 100%;
left: 0;
right: 0;
width: 100%;
height: 355px;
background-color: #00e1f5;
}
jsfiddle
Any suggestions?
the problem you mentioned is because you have a 19px margin between your dropdown and the li.
remove it and add padding to navbar > ul > li to fix it.
.navbar > ul {
position: relative;
float: left;
margin: 0;
}
.navbar > ul > li {
display: inline-block;
margin: 0 28px 0 0;
padding: 19px 0;
vertical-align:top;
}
.navbar ul > li > ul {
position: absolute;
margin: 0;
padding: 0;
top: 100%;
left: 0;
right: 0;
width: 100%;
height: 355px;
background-color: #00e1f5;
}
JSFiddle
and yes the triangle is not there anymore. I actually didn't try to fix it cause this menu has lots of serious issues and I think you need to rethink the whole structure.
I'm using the twentyeleven theme for wordpress 3.4.2. The default theme menu shows a dropdown on hover. What I'd like to do is have the current menu item's submenu displayed. What I've achieved thus far is diplaying the submenu by setting the css property display:visible.
This link, http://www.gq.com shows an example of what I'm trying to achieve.
The related CSS styles are as follows:
#access {
clear: both;
display: block;
float: left;
margin: 0px auto 15px;
width: 100%;
height: 36px;
}
#access ul {
font-size: 13px;
list-style: none;
margin: 0 0 0 -0.8125em;
padding-left: 0;
}
#access li {
float: left;
position: relative;
}
#access a {
display: block;
line-height: 2.8em;
padding: 0 1.2125em;
}
#access ul ul {
display: none;
float: left;
margin: 0;
position: absolute;
top: 2.9em;
left: 0;
width: 188px;
z-index: 99999;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul a {
border-bottom: 1px dotted #ddd;
color: #444;
font-size: 13px;
font-weight: normal;
height: auto;
line-height: 1.4em;
padding: 10px 10px;
width: 168px;
}
#access ul li:hover>ul {
display: block;
}
So basically I need to produce a menu like this in Wordpress:
Where the red bar is the width of the page and not fixed so can shrink with resize.
And the submenu is centred
I currently have:
And the CSS is:
#access {
clear: both;
display: block;
margin: 0 auto -10px;
width: 100%;
text-align:center;
}
#access ul {
font-size: 13px;
list-style: none;
margin: 0 0 0 -0.8125em;
margin-top: 0.3em;
padding-left: 0;
display:inline-block;
/*Font*/
letter-spacing:1px;
text-transform:uppercase;
color: #FFF;
}
#access li {
float: left;
position: relative;
}
#access a {
color: #eee;
display: block;
line-height: 2.333em;
margin: 0 1.2125em;
margin-bottom: 0.5em;
padding-top: 0.5em;
text-decoration: none;
/* Same colour as background */
border-bottom: 1px solid #000;
}
#access ul ul {
display: none;
position: inherit;
top: 0; left: 0;
margin: 0 auto;
width: 100%;
z-index: 9999;
float: left;
}
#access ul ul a {
color: #444;
font-size: 13px;
font-weight: normal;
height: auto;
line-height: 1.4em;
padding: 10px 10px;
display: inline-block;
}
#access ul ul li {
display: inline-block;
}
Any help
Check this jsfiddle created for you
I had defined a new division sub-menu-bg after the menu code and given a red background to it. Also i had edited your CSS to achieve correct horizontal drop-down menu.
Hope this will solve your problem.
Hi I had to create a horizontal submenu for a website using wordpress. I just have 1 more problem, when you scroll over the link when halfway down the page the submenu appears halfway down the page. I believe this to be because of:
position: fixed;
top: 264px;
left: 50%;
width: 1000px;
margin-left:-500px;
Is there a way to fix this?
The website is: http://dev.timson.me (Submenus on "Upcoming" & "Past Productions")
And the CSS is:
#access {
clear: both;
display: block;
float: left;
margin: 0 auto 6px;
padding-top: 8px;
width: 100%;
font-family: Stag;
display:block;
text-align:center;
}
#access ul {
font-size: 13px;
list-style: none;
margin: 0 0 0 -0.8125em;
padding-left: 0;
display:inline-block;
}
.sub-menu {
text-align: center;
}
#menu-default > li {
float: left;
position: relative;
}
.sub-menu > li {
display: inline-block;
}
#access a {
color: #eee;
display: block;
line-height: 25px;
margin-top: -4px;
margin-bottom: -4px;
padding: 0 1.2125em;
text-decoration: none;
}
#access ul ul {
display: none;
float: left;
margin-top: 0;
position: fixed;
top: 264px;
left: 50%;
width: 1000px;
z-index: 99999;
margin-left:-500px;
text-align:center;
padding-top:5px;
padding-bottom:10px;
background: red;
}
#access ul ul a {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-bottom:10px;
}
#access ul li:hover > ul {
display: block;
}
Any help is greatly appreciated.
Cheers,
Peter
Get rid of
position: fixed;
And that should do it.
I think you could clean up a lot of the css ultimately repairing your issue.
//Remove left margin
#access div {
position: relative;
width: 1000px;
}
ul, ol {
margin: 0;
}
//Remove left margin
#access ul {
display: inline-block;
font-size: 13px;
list-style: none outside none;
padding-left: 0;
}
//remove position relative, it is now located in the access div container.
#menu-default > li {
float:left
}
#access ul ul {
background: none repeat scroll 0 0 red;
display: none;
left: 0;
margin-top: 0;
padding-bottom: 10px;
padding-top: 5px;
position: absolute;
text-align: center;
top: 23px;
width: 1000px;
z-index: 99999;
}
You may need to adjust the vertical padding with the sub nav. Hope that helps.