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
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>
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;
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.
I have set,
#navi ul li:hover { background-color: red; opacity: 1.0; filter: alpha(opacity=100); }
but it doesn't work.
Here is the code: http://jsfiddle.net/mylvis/jEyTy/
<div id="navi">
<ul>
<li>1</li>
<li>2
<ul>
<li><a>1.1</a></li>
<li><a>1.2</a></li>
<li><a>1.3</a></li>
</ul>
</li>
<li>3</li>
<li>4</li>
</ul>
</div>
#navi { width: 100%; height: 40px; margin-top: 10px; position: relative; background-color: #0071BC; opacity: 0.75; filter: alpha(opacity=75); font-family: 'Russo One', sans-serif; z-index: 100; }
#navi ul { padding: 0; margin: 0; display: inline-table; text-align: center; position: relative; z-index: 100; }
#navi ul:after { content: ""; clear: both; display: block; }
#navi ul li { display: block; padding: 10px 20px 11px 20px; list-style: none; position: relative; float: left; }
#navi ul li a { font-size: 12pt; color: #F7931E; text-transform: uppercase; }
#navi ul li:hover { background-color: red; opacity: 1.0; filter: alpha(opacity=100); }
#navi ul li:first-child { margin-left: 10px; }
#navi ul li:last-child { margin-left: 210px; }
#navi ul ul { display: none; position: absolute; top: 100%; left: 0; background-color: #0071BC; opacity:0.75; filter:alpha(opacity=75); z-index: 100; }
#navi ul ul li { float: none; position: relative; font-size: 11pt; }
#navi ul ul li:first-child { margin: 0; }
#navi ul ul li:last-child { padding-bottom: 10px; margin: 0; }
#navi ul li:hover > ul { display: block; z-index: 100; }
Child elements inherent the opacity of their parents when using opacity. You can get around this by using RGBA colors which allow you to specify the opacity along with the color all in one statement.
Try this jsFiddle example
#navi {
width: 100%;
height: 40px;
margin-top: 10px;
position: relative;
background-color: rgba(0,113,188,.75);
font-family:'Russo One', sans-serif;
z-index: 100;
}
#navi ul {
padding: 0;
margin: 0;
display: inline-table;
text-align: center;
position: relative;
z-index: 100;
}
#navi ul:after {
content:"";
clear: both;
display: block;
}
#navi ul li {
display: block;
padding: 10px 20px 11px 20px;
list-style: none;
position: relative;
float: left;
}
#navi ul li a {
font-size: 12pt;
color: #F7931E;
text-transform: uppercase;
}
#navi ul li:hover {
background-color: rgba(255,0,0,1);
}
#navi ul li:first-child {
margin-left: 10px;
}
#navi ul li:last-child {
margin-left: 210px;
}
#navi ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: rgba(0,113,188,.75);
z-index: 100;
}
#navi ul ul li {
float: none;
position: relative;
font-size: 11pt;
}
#navi ul ul li:first-child {
margin: 0;
}
#navi ul ul li:last-child {
padding-bottom: 10px;
margin: 0;
}
#navi ul li:hover > ul {
display: block;
z-index: 100;
}
As mylvis said, you can't set something back to being fully opaque if its parent has any level of transparency.
RGBA would be my first choice but if I had to use opacity I would set the initial transparency level on LIs themselves so that it is possible to reset it back to 1.0 again.
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/