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.
Related
I want to create a horizontal menu, which starts right on the top of the page, meaning I do not want to be any margin above it, but I do not know how to do that. I tried with top: 0; margin:auto;, but it does not work... my CSS code is right here:
.menu1
{
position: absolute;
top: 0;
margin:auto;
left: 0;
right: 0;
width: 100%;
}
.menu1 ul
{
list-style-type: none;
padding: 0;
overflow: hidden;
height: 30px;
background-color: purple;
}
.menu1 li
{
float:left;
margin-right: 10px;
}
.menu1 li a
{
display: block;
color: white;
text-align: center;
padding: 8px 10px;
text-decoration: none;
}
.menu1 li a:hover
{
text-decoration: underline;
}
Add margin:0; in .menu1 ul
and everything will be fine.
See the code below
thanks
.menu1
{
position: absolute;
top: 0;
margin:auto;
left: 0;
right: 0;
width: 100%;
}
.menu1 ul
{
list-style-type: none;
padding: 0;
overflow: hidden;
height: 30px;
background-color: purple;
margin:0;
}
.menu1 li
{
float:left;
margin-right: 10px;
}
.menu1 li a
{
display: block;
color: white;
text-align: center;
padding: 8px 10px;
text-decoration: none;
}
.menu1 li a:hover
{
text-decoration: underline;
}
<div class="menu1">
<ul>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
</ul>
</div>
body, html, .menu { margin:0 auto; }
Add in style may it helps you
*{margin:0px 0px; padding:0px 0px;}
You have two options.
1: *{margin:0px 0px; padding:0px 0px;}
2: Use Reset CSS
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 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;
}