I got a problem when using native dropdown menu of wordpress, my menu drops the elements on the left side, but I want to move its on the right side.
Here is the css code
div#navigation
{
float: left; position:
relative; left: 50%;
margin-bottom: 35px;
}
select.mobile_menu { display: none; }
div#navigation ul {
margin: 0;
padding: 0;
float: left;
position: relative;
left: -50%;
}
div#navigation ul li {
float: left;
position: relative;
margin: 0px;
margin-left: 50px;
padding-top: 12px;
padding-bottom: 10px;
font-family: 'Vollkorn', 'Times New Roman', serif;
}
div#navigation ul li:first-child { margin-left: 0px; }
div#navigation ul li ul.sub-menu {
display: none;
float: none;
position: absolute;
top: 50px;
z-index: 10000;
background: #F8F8F8;
border: 1px solid #CCC;
border-bottom: 0px;
}
div#navigation ul li:hover ul.sub-menu { display: block; }
div#navigation ul li ul.sub-menu li {
position: relative;
float: none;
margin: 0px;
border-bottom: 1px solid #CCC;
font-size: 14px;
}
div#navigation ul li ul.sub-menu li a {
display: block;
width: 200px;
height: 23px;
line-height: 23px;
text-align: center; }
div#navigation ul li ul.sub-menu li ul.sub-menu {
display: none;
position: absolute;
left: -202px;
}
div#navigation ul li ul.sub-menu li:hover ul.sub-menu {
display: block;
top: -1px;}
div#navigation ul li ul.sub-menu li ul.sub-menu li ul.sub-menu { display: none; }
div#navigation ul li ul.sub-menu li ul.sub-menu li:hover ul.sub-menu {
display: block;
top: -1px;
}
This is my own web and the problem as the
photo
.What should I change in the css ?
I solved , only change the left argument -200px to 200px
div#navigation ul li ul.sub-menu li ul.sub-menu { display: none; position: absolute; left:200px;
Related
This is the menu I'm talking about
I'm having this problem that I can't solve... why it doesn't center?
I've already tried a lot of stuff here on this website, but I can't understand it all, can someone help me with the problem and try to explain to me how to center it?
.menu {
font: 16px 'Dosis', sans-serif; font-weight: 600;
list-style: none;
margin: 0;
padding: 0;
float: left;
border: none;
}
.menu li { position: relative; float: left; }
.menu li a {
color: #FFF;
text-decoration: none;
list-style: none;
display: block;
margin: 0;
padding: 14px 11px 0 11px;
height: 36px;
}
.menu li a:hover { color: #FC0; background: #F60 url(../imgs/bg-menu2.png) repeat-x; }
.menu li ul {
position: absolute;
margin: 0;
padding: 0;
top: 50px;
left: 0px;
background: #F60;
display: none;
float: left;
z-index: 999;
}
.menu li:hover ul ul { display: none; }
.menu li:hover ul, .menu li ul li:hover ul, .menu li.over ul, .menu li ul li.over ul { display: block; }
.menu li ul li { display: block; width: 200px; }
li.border0 { border: none; }
.menu li ul li ul { z-index: 998; top: 0px; left: 200px; }
body { behavior: url(csshover.htc); }
<ul class="menu">
<li>INÍCIO</li>
<li>PROGRAMAÇÃO</li>
<li>HOSPEDAGEM</li>
<li>SUBMISSÃO</li>
<li>LOCAL</li>
<li>INSCRIÇÃO</li>
<li>CONTATO</li>
</ul>
You need to set text-align: center for .menu and unfloat a menu items:
(I've added background: teal; for visibility of white words)
.menu {
font: 16px 'Dosis', sans-serif; font-weight: 600;
text-align: center;
list-style: none;
margin: 0 auto;
padding: 0;
background: teal;
}
.menu li {
display: inline-block;
position: relative;
}
.menu li a {
color: #FFF;
text-decoration: none;
list-style: none;
display: block;
margin: 0;
padding: 14px 11px 0 11px;
height: 36px;
}
.menu li a:hover { color: #FC0; background: #F60 url(../imgs/bg-menu2.png) repeat-x; }
.menu li ul {
position: absolute;
margin: 0;
padding: 0;
top: 50px;
left: 0px;
background: #F60;
display: none;
float: left;
z-index: 999;
}
.menu li:hover ul ul { display: none; }
.menu li:hover ul, .menu li ul li:hover ul, .menu li.over ul, .menu li ul li.over ul { display: block; }
.menu li ul li { display: block; width: 200px; }
li.border0 { border: none; }
.menu li ul li ul { z-index: 998; top: 0px; left: 200px; }
body { behavior: url(csshover.htc); }
<ul class="menu">
<li>INÍCIO</li>
<li>PROGRAMAÇÃO</li>
<li>HOSPEDAGEM</li>
<li>SUBMISSÃO</li>
<li>LOCAL</li>
<li>INSCRIÇÃO</li>
<li>CONTATO</li>
</ul>
My CSS Menu pops the browser's horizontal scroll bar on and off as I hover over menu items. I've tried various combinations of css to deal with overflow using;
overflow-x:hidden;
and
overflow-y: auto;
But these just cut off my drop down elements in the menu and puts in a scroll bar inside my menu.
Here's my source code for the menu:
/* Main Menu*/
#menu {
font-family: 'sharetech', sans-serif;
float: right;
height: auto;
font-size: 18px;
padding: 0;
margin: 14px 0 0 0;
}
#menu a {
display: block;
line-height: 1em;
text-decoration: none;
color: gray;
padding: 2px 10px;
}
#menu:after, #menu ul:after {
content: '';
display: block;
clear: both;
}
#menu ul, #menu li {
list-style: none;
margin: 0;
padding: 0;
}
#menu ul {
position: relative;
z-index: 597;
}
#menu ul li {
float: left;
min-height: 1px;
vertical-align: middle;
}
#menu ul li.hover,
#menu ul li:hover {
position: relative;
z-index: 599;
cursor: default;
}
#menu ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
#menu ul ul li {
float: none;
}
#menu ul ul ul {
border-top: 0 none;
top: 0;
left: auto;
right: -99.5%;
}
#menu ul li:hover > ul {
visibility: visible;
}
#menu ul ul {
bottom: 0;
left: 0;
margin-top: 0;
border-top: 4px solid #1b9bff;
text-transform: none;
min-width: 190px;
}
#menu ul ul a{
background: #1b9bff;
color: #FFF;
border: 1px solid #0082e7;
border-top: 0 none;
line-height: 150%;
padding: 10px 10px;
}
#menu ul ul li {
font-weight: normal;
position: relative
}
#menu > ul > li > a {
line-height: 48px;
}
#menu ul ul li:first-child > a {
border-top: 1px solid #0082e7;
}
#menu ul ul li:hover > a {
background: #35a6ff;
}
#menu ul ul li:last-child > a {
border-radius: 0 0 3px 3px;
box-shadow: 0 1px 0 #1b9bff;
}
#menu ul ul li:last-child:hover > a {
border-radius: 0 0 0 3px;
}
#menu ul ul li.has-sub > a:after {
position: absolute;
top: 50%;
right: 15px;
margin-top: -8px;
}
#menu ul li:hover > a, #menu ul li.active > a {
background: #1b9bff;
color: #FFF;
}
#menu ul li.has-sub > a:after {
margin-left: 5px;
}
#menu ul li.last ul {
left: auto;
right: 0;
}
#menu ul li.last ul ul {
left: auto;
right: 99.5%;
}
You were right Nix, it was in the pseudo classes. I figured it was, here's what was missing;
#fmenu ul ul li {
float: none;
width: 190px; <----set width
}
I defined a set width here and it solved the problem.
demo
I've tried but third level menu problem with two > 2 > a not showing at right is not getting drop down menu?
#header-menu ul.menu li {
display: block;
position: relative;
float: left;
}
#header-menu ul.menu li a{
padding: 10px !important;
}
#header-menu li ul {
display: none;
}
#header-menu ul.menu li a {
/*white-space: nowrap;*/
}
#header-menu ul.menu li > ul a{
margin: 0;
padding: 10px !important;
display: block;
}
#header-menu ul.menu li a:hover {
/*background: #617F8A;*/
color: #0B6AAD;
}
#header-menu li:hover > ul {
display: block;
position: absolute;
top: 22px;
left: 0;
width: 250px;
/*display: table;*/
margin: 0;
padding: 0;
/*border: 6px solid #666666;
border-radius: 12px;
box-sizing: border-box;*/
}
#header-menu li:hover li {
float: none;
font-size: 11px;
}
#header-menu li:hover a {
background: #617F8A;
}
#header-menu li:hover li a:hover {
/*background: #95A9B1;*/
}
#header-menu ul.menu ul li a{
border-bottom: 1px dashed #666666;
}
#header-menu ul.menu ul li:last-child a{
border-bottom: none;
}
#header-menu ul.menu ul li:hover > ul{
position: absolute;
right: -250px;
top: 0;
width: 250px;
display: inline;
}
Please note: I couldn't edit the html markup.
I have found a possible solution to your problem:
Add a class to the ul sub-menu:
<ul class="sub_menu">
<li>a not showing at right</li>
<li>b</li>
</ul>
</li>
Add this css:
ul.sub_menu {
left: 250px;
top: 0px;
display: block;
position: absolute;
width: 200px;
z-index: 1000;
}
And modify your css rule:
#header-menu li:hover > ul {
display: block;
position: absolute;
left: 250;
width: 250px;
/*display: table;*/
margin: 0;
padding: 0;
/*border: 6px solid #666666;
border-radius: 12px;
box-sizing: border-box;*/
}
Remove this rule:
#header-menu ul.menu ul li:hover > ul{
position: absolute;
right: -250px;
top: 0;
width: 250px;
display: inline;
}
Maybe with a jsFiddle is more comprehensive ;) : http://jsfiddle.net/damoiser/6ax6s/2/
Replace your right: -250px; with left: 250px; it works fine. demo
I am unable to get rid of a gap between my nav bar and my submenu dropdown menu. You can view the issue here.
My css is here:
nav#nav{
float: left;
font: 14px/16px 'MuseoSlab500Regular', arial, helvetica, sans-serif;
margin-right: auto;
z-index: 99999;
/*background-image: url(../images/2blkbg.png);*/
/*background-repeat: repeat-x;*/
padding-left: 30px;
/*background-position: left bottom;*/
background-color: #000;
height: 53px;
display: block;
position: relative;
margin-top: 15px;
margin-bottom: 15px;
}
#nav ul{
list-style: none;
margin: 0;
padding: 0;
}
#nav ul li{
float: left;
margin-right: 0;
margin-bottom: 0;
padding-top: 0;
padding-right: 49px;
padding-bottom: 0;
padding-left: 0;
}
#nav ul a,#nav li.current-menu-ancestor a{
display: block;
height:83px;
line-height: 53px;
border-top-width: 0px;
border-top-style: solid;
border-top-color: #fff;
}
#nav ul .current_page_item a, #nav ul .current-menu-item a, #nav ul > .current-menu-parent a{
color:#a0ce4e;
text-decoration:none;
border-color:#a0ce4e;
}
#nav ul li{
position: relative;
}
#nav ul ul{
display: none;
position: absolute;
top: 0px;
left: 0;
width: 170px;
background: #edebeb;
z-index: 100000;
border-top: 3px solid #a0ce4e;
z-index: 99999;
}
#nav ul li:hover ul{
display: block;
}
#nav ul li ul li{
display: block;
float: none;
margin: 0;
padding: 0;
background-image: url(../images/blkbg.png);
background-repeat: repeat-x;
}
#wrapper #nav ul li ul li a{
background: url(../images/subnav_sep.jpg) repeat-x bottom left;
border: 0;
height: 30px;
text-indent: 20px;
font: 13px/30px 'PTSansRegular', Arial, Helvetica, sans-serif;
color: #333333 !important;
}
#wrapper #nav ul li ul li a:hover,#wrapper #nav ul li ul li.current-menu-item a{
background-color:rgba(255,255,255,0.5);
}
#nav ul ul ul{
display:none !important;
}
#nav ul ul li:hover ul{
display:block !important;
top:-3px;left:170px;
}
#nav select{
max-width:100%;
display:none;
}
#nav > li > a,#nav li.current-menu-ancestor a {
height:83px;
line-height:83px;
}
#nav ul ul {
top:86px;
}
Set the top and that will remove the excess of gap:
#nav ul ul {
top:86px;
}
Good you posted the url, since problem is not in the css you included. The problem is in this class:
#nav ul ul {
top:86px;
}
This top-offset should be set to 53px, the same height as your menu bar (nav#nav):
#nav ul ul {
top:53px;
}
This css-class actually is not in your css-stylesheet, but in your page itself. It is included in the <head></head>.
So I'm working on a drop menu and I'd like each menu item to have an auto width. i.e. the background to expand to the width of the menu item rather than having an overall fixed width for all the UL. I thought that giving the ul li an auto width would sort it but it seems not. What am I missing?
<ul id="nav">
<li><a class="last" href="#">MENU ▼</a>
<ul>
<li>Short</li>
<li>Very Long</li>
</ul>
</li>
#nav {
height: 1;
list-style-type: none;
padding-top: 1.25em;
margin-top: 0em;
}
#nav li {
float: right;
position: relative; padding: 0;
}
#nav li a {
display: block;
font-size: 14px;
padding: 0 1em;
margin-bottom: 1em;
color: #333;
text-decoration: none;
border-left: 1px solid #333;
}
#nav .last, #nav li ul li a {
border-left: none;
}
#nav li a:hover, #nav li a:focus {
color: #666;
}
#nav li ul {
opacity: 0;
position: absolute;
right: 0em;
list-style-type: none;
padding: 0; margin: 0;
}
#nav li:hover ul {
opacity: 1;
}
#nav li ul li {
float: none;
position: static;
width: auto;
height: 0;
line-height: 0;
background: none;
text-align: right;
margin-bottom: .75em;
}
#nav li:hover ul li {
height: 25px;
line-height: 2.5em;
}
#nav li ul li a {
background: #222;
}
#nav li ul li a:hover {
color: #666;
}
Your #nav li style is being applied to all child li elements, so you need to use the ">", which selects only the immediate child.
Here is updated CSS which fixes the problem. I also commented out some other CSS that was interfering:
#nav {
height: 1;
list-style-type: none;
padding-top: 1.25em;
margin-top: 0em;
}
#nav > li { /* Added ">" */
float: right;
position: relative;
padding: 0;
}
#nav li a {
display: inline-block; /* was block */
font-size: 14px;
padding: 0 1em;
margin-bottom: 1em;
color: #333;
text-decoration: none;
border-left: 1px solid #333;
}
#nav .last, #nav li ul li a {
border-left: none;
}
#nav li a:hover, #nav li a:focus {
color: #666;
}
#nav li ul {
opacity: 0;
/*position: absolute;
right: 0em; */
list-style-type: none;
padding: 0; margin: 0;
}
#nav li:hover ul {
opacity: 1;
}
#nav li ul li {
/*float: none;
position: static;
width: auto;*/
height: 0;
line-height: 0;
background: none;
text-align: right;
margin-bottom: .75em;
}
#nav li:hover ul li {
height: 25px;
line-height: 2.5em;
}
You are using display: block for your links. That causes them to fill the available space. That's why they are all the same width. And float: right is contributing to the general narrowness. Use inline-block instead of block and prevent the link wrapping by using white-space: nowrap:
Demo: http://jsfiddle.net/neJty/2/