I was trying to make menu at the top that drops down another menu it works but it overlap the menu at the top I tried absolute value but the submenu it gone I think absolute wont work and i tried relative it didnt work as well.
what is the best way to fix this?
http://jsfiddle.net/TBEnf/ Here is the Jfiddle demo
Here is my code
<style>
.midbox {
margin:0px auto;
width:900px;
height:1000px;
background:#c0d8d8;
border-radius:10px;
box-shadow: 10px 10px 10px #969696;
}
.headerprofile {
width:900px;
height:30px;
background-color:skyblue;
border-top-left-radius:10px;
border-top-right-radius:10px;
box-shadow:0 1px -2px #70badb
}
.headerprofile .ULlist ul li:hover > ul{
display:block;
}
.headerprofile .ULlist ul ul li a {
padding: 15px;
position:relative;
}
.headerprofile .ULlist ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
.headerprofile .ULlist ul ul {
display: none;
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
.headerprofile .ULlist ul {
position:relative;
list-style:none;
padding:0 10px;
}
.headerprofile .ULlist ul li {
float:left;
}
.headerprofile .ULlist ul li a{
display: block; padding: 6px 10px;
color: #757575; text-decoration: none;
}
Just set position:relative on the parent li instead of the outer ul. The ul doesn't have an actual height because all the lis are floated.
.headerprofile .ULlist ul {
list-style:none;
padding:0 10px;
}
.headerprofile .ULlist ul li {
float:left;
position:relative;
}
I think this line will solve your problem
headerprofile .ULlist ul li:hover > ul
{
display:block;
margin-top:30px; /* add this line to your css*/
}
DEMO
You can fix this if you add: top: 30px; to your submenu.
Demo
Related
I'm concluding a design and I'm facing an issue which I'm not familiar with. I'm trying to make a menu expand from hidden to visible over 2 seconds on hover using a transition: height CSS element.
The issue is that the ul is obeying the transition and appearing visible within 2s, however the lis are completely ignoring the transition effect and instantly expanding on hover.
CSS syntax below:
#main_navbar_container{
margin-bottom:0;
background:white;
}
.navbar-collapse {
text-align:center;
}
#menu_container{
width:80%;
float:right;
display:block;
}
#primary_menu{
display:block;
float:left;
width:100%;
}
#primary_menu ul{
list-style: none;
margin: 0;
padding-left: 0;
}
#primary_menu a,
#primary_menu a:visited,
#primary_menu a:link{
color:#ea474b;
font-weight: 600;
display: block;
text-decoration: none;
padding: 15px 20px;
margin:auto;
}
#primary_menu a:hover{
color:#F9690E;
}
#primary_menu li{
float:left;
position:relative;
margin:0
}
#primary_menu ul ul {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
border-radius: 4px;
border: 1px solid #dadada;
background: #fff;
color: #8c9398;
float: right;
position: absolute;
top: 3.5em;
right: -999em;
z-index: 99999;
text-align: center
}
#primary_menu ul li:hover > ul {
right: 50%;
margin-right: -100%;
width: 200px;
}
.sub-menu li{
margin:0 15px !important;
}
#primary_menu ul li ul a{
color:#ea474b;
}
#primary_menu ul li ul:hover a{
color:#ea474b;
}
#primary_menu ul li ul li:hover a{
color:#F9690E;
}
#media (max-width: 1200px){
#main_navbar_container .container, #menu_container { width: 100%;}
#menu_container .navbar-collapse { padding: 0;}
#primary_menu{
width:100%;
margin:0;
}
#primary_menu li{
width:100%;
margin:5px 0 0 0;
}
#primary_menu ul li ul {
border-radius: 0 !important;
border-color: transparent !important;
display:hidden;
height:100px;
-webkit-transition: height 2s; /* Safari */
transition: height 2s;
}
#primary_menu ul li:hover{
background:none;
}
#primary_menu ul li:hover a{
font-color:black;
/*\color:rgb(207,0,15);*/
}
#primary_menu ul li:hover ul{
position:initial;
display:block;
background-color:rgb(238,238,238);
width:100%;
padding:0;
margin:0;
height:400px;
}
#primary_menu ul li:hover li:first-of-type{
border-top:1px solid rgb(238,238,238);
}
#primary_menu ul li:hover li:last-of-type{
border-bottom:1px solid rgb(238,238,238);
}
#primary_menu ul li:hover a:link,
#primary_menu ul li:hover a:visited{
color:#ea474b;
}
#menu-home-screen-menu{
margin-left:0;
}
}
Here is a fiddle: http://jsfiddle.net/x15jw967/
A few things help here. First, transition max-height instead of height to allow variation:
#primary_menu ul li ul {
...
max-height:0;
-webkit-transition: max-height 2s;
transition: max-height 2s;
}
#primary_menu ul li:hover ul {
...
max-height: 400px;
}
Then, set overflow to hidden so the outer content doesn't show:
#primary_menu ul li ul {
...
overflow: hidden;
}
Demo
Here's a simplified demo in which the close transition works also. You can add your styling back in and see what breaks it.
http://www.guytgunterappliances.com/product-category/shop/
My #container is currently at width:980px and my side has positioned itself to the bottom of the container div. Im trying to float it to the right of my container div. I have reduced the width of the container to 710px to fit the 270px sidebar then i float the sidebar. As you can see in the image, it stretches the sidebar.It runs over the container div as well.
SIDEBAR
*************************************************************************/
#sidebar{
position:relative;
z-index:10;
width:270px;
display:;
}
#sidebar,
#sidebar a,
#sidebar li,
#sidebar ul,
#sidebar ol{
color:#787878;
font-size:12px;
display:;
}
#sidebar a:hover{
}
#sidebar ul{
list-style:none;
padding:0;
margin:0;
}
#sidebar ul li.widget{
margin:0 0 0px 0;
border:1px solid #fff;
background: #e6e6e6;
}
#sidebar ul li.widget h2{
font-size:18px;
padding:13px 18px;
color:#45494e;
font-style:normal;
border:1px solid #cecece;
border-bottom:1px solid #fff;
}
#sidebar ul li ul{
border:1px solid #cecece;
border-bottom:none;
}
#sidebar ul li ul li{
border-bottom:1px solid #cecece;
padding: 10px 18px;
}
#sidebar ul li ul li:hover{
border-bottom:1px solid #cecece;
padding: 10px 18px;
background:#eee;
}
#sidebar ul li ul li ul{
padding:0 0 0 15px;
border:none;
}
#sidebar ul li ul li ul li{
border-bottom:none;
}
/* TEXT WIDGET */
#sidebar ul li div.textwidget{
padding: 10px 18px;
line-height:1.4em;
border:1px solid #cecece;
}
/* TAG CLOUD */
#sidebar ul li.widget_tag_cloud div{
padding: 10px 18px;
border:1px solid #cecece;
}
#sidebar ul li.widget_tag_cloud div a{
margin:0 10px 0 0;
}
/* CALENDAR */
#sidebar ul li.widget_calendar{
border:1px solid #fff;
}
#sidebar ul li.widget_calendar #calendar_wrap table#wp-calendar{
padding: 10px 18px;
width:100%;
border:1px solid #cecece;
border-top:none;
}
#sidebar ul li.widget_calendar #calendar_wrap table#wp-calendar a{
text-decoration: underline;
}
#sidebar ul li.widget_calendar #calendar_wrap table#wp-calendar caption{
padding: 5px 18px 0 18px;
border:1px solid #cecece;
border-bottom:none;
}
#sidebar ul li.widget_calendar #calendar_wrap table#wp-calendar tr td#next{
text-align:right;
}
/************************************************************************
# SIDEBAR END
There are few steps required to fix that issue:
you have two divs with id container on main page, the inner one and the outer one. Change id of one of those.
for the inner #container, add:
width: 710px;
float: left;
reduce width of #content and iframe to 710px or less.
finally, style #sidebar as #KaronatoR suggests:
width:270px;
display: block;
float: left;
Try so:
#sidebar {
width:270px;
display: block;
dloat: left;
}
My sidebar in working with woocommerce is positioned under my content div. when i shrink the content div to 710px and try to float:right the sidebar... it doesn't want to float correctly.
SUBJECT SITE
Any help would be appreciated.
# SIDEBAR
*************************************************************************/
#sidebar{
position:relative;
z-index:10;
width:270px;
display:;
}
#sidebar,
#sidebar a,
#sidebar li,
#sidebar ul,
#sidebar ol{
color:#787878;
font-size:12px;
display:;
}
#sidebar a:hover{
}
#sidebar ul{
list-style:none;
padding:0;
margin:0;
}
#sidebar ul li.widget{
margin:0 0 0px 0;
border:1px solid #fff;
background: #e6e6e6;
}
#sidebar ul li.widget h2{
font-size:18px;
padding:13px 18px;
color:#45494e;
font-style:normal;
border:1px solid #cecece;
border-bottom:1px solid #fff;
}
#sidebar ul li ul{
border:1px solid #cecece;
border-bottom:none;
}
#sidebar ul li ul li{
border-bottom:1px solid #cecece;
padding: 10px 18px;
}
#sidebar ul li ul li:hover{
border-bottom:1px solid #cecece;
padding: 10px 18px;
background:#eee;
}
#sidebar ul li ul li ul{
padding:0 0 0 15px;
border:none;
}
#sidebar ul li ul li ul li{
border-bottom:none;
}
/* TEXT WIDGET */
#sidebar ul li div.textwidget{
padding: 10px 18px;
line-height:1.4em;
border:1px solid #cecece;
}
/* TAG CLOUD */
#sidebar ul li.widget_tag_cloud div{
padding: 10px 18px;
border:1px solid #cecece;
}
#sidebar ul li.widget_tag_cloud div a{
margin:0 10px 0 0;
}
/* CALENDAR */
#sidebar ul li.widget_calendar{
border:1px solid #fff;
}
#sidebar ul li.widget_calendar #calendar_wrap table#wp-calendar{
padding: 10px 18px;
width:100%;
border:1px solid #cecece;
border-top:none;
}
#sidebar ul li.widget_calendar #calendar_wrap table#wp-calendar a{
text-decoration: underline;
}
#sidebar ul li.widget_calendar #calendar_wrap table#wp-calendar caption{
padding: 5px 18px 0 18px;
border:1px solid #cecece;
border-bottom:none;
}
#sidebar ul li.widget_calendar #calendar_wrap table#wp-calendar tr td#next{
text-align:right;
}
/************************************************************************
# SIDEBAR END
You have two divs with id="container" that means that anything you pass to #container in your css it will only be applied to the first one. So you should take this div #wrapper-containter #wrapper #container change it's id, and then apply the width to it and then float around whatever you need.
Hi I cannot figure out how to change the size of the child item of the CSS menu (The parent has an image background, the child should have a background color).
I tried something like:
ul > li > a:hover {
display:inline-block;
background:#000;
float:left;
width:120px;
height:25px;
}
but it is all mixed with other elements. Can you please help me figure it out?
HTML:
<div id="menu">
<ul>
<li><a id="menu1" href="#">Parent1</a></li>
<li>Parent2
<ul>
<li>Child1</li>
<li>Child2</li>
<li>Child3</li>
</ul>
</li>
<li>Parent3</li>
<li>Parent4</li>
<li>Parent5</li>
</ul>
</div>
CSS:
#menu {
position:absolute;
top:133px;
left:0px;
width:900px;
height:50px;
}
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
/*padding: 5px 15px 5px 15px;*/
background-image: url(../images/menu1.png);
white-space: nowrap;
width:178px;
height:50px;
}
ul li a:hover {
background: #BBBBBB;
}
li:hover ul {
display: block;
position: absolute;
left:0px;
}
li:hover li {
float: left;
font-size: 11px;
}
li:hover a {
background: #3b3b3b;
}
li:hover li a:hover {
background: #CCC;
}
Thank you very much for your help in advance!
Hope following changes will work for you. Here is the fiddle link. Followings are your css chagnes
#menu {
/*position:absolute;
top:0;
left:0px;*/
width:900px;
height:22px;
background-color:#000;
}
ul {
font-family: Arial, Verdana;
font-size: 14px;
line-height:22px;
margin: 0;
padding: 0;
list-style: none;
text-align:center;
}
ul li {
display: block;
float: left;
position:relative;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
/*padding: 5px 15px 5px 15px;*/
background-image: url(../images/menu1.png);
white-space: nowrap;
width:178px;
line-height:22px;
}
ul li:hover a {
background: #BBBBBB;
}
ul li ul {
display: none;
widht:200px;
position:absolute;
left:0;
top:22px;
}
ul li ul li {
float: none;
font-size: 11px;
}
ul li ul li a {
background: #3b3b3b;
background-image:none!important;
}
ul li ul li a:hover {
background: #CCC;
}
ul li:hover ul {
display: block;
position: absolute;
left:0px;
}
To add a background color to your child sub menu:
ul li ul li {
// rules
}
You can also add class to your list items to make it more manageable. For example, you can add a class to the ul of your child menu:
<li>Parent2
<ul class="sub-menu">
<li>Child1</li>
<li>Child2</li>
<li>Child3</li>
</ul>
</li>
Then you can simplify the css to:
.sub-menu li {
display:inline-block;
background:#000;
float:left;
width:120px;
height:25px;
}
It is good to retain the same width so that you can avoid that weird movement.
Try this
ul li ul li a:hover {
display:block;
background:#000;
float:left;
width:178px;
height:25px;
}
DEMO
I don't know how you want the result to look exactly but you could also use the + selector in your css like this:
ul > li > a:hover+ {
display:inline-block;
background:#000;
float:left;
width:120px;
height:25px;
}
The + selector as you see after a:hover means that the next element directly after the a:hover-tag will be selected and is this case it will be a ul
You can also specify the element with +ul if you want the ul to be a list and not a flat one like this:
ul > li > a:hover+ul {
display:inline-block;
background:#000;
float:left;
width:120px;
height:25px;
}
Like this you know that you will only affect the element next to the hovered one
Solution
ul > li:hover > li > a {
display:inline-block;
background:#000;
float:left;
width:120px;
height:25px;
}
It can be as per requirement
ul > li:hover li a { }
I'm having problem with submenu hiding behind the next line of menu.
vs
I've searched many topics and questions and basically everyone's saying that I need to add z-index > 100 to my sub-menu. I tried that everywhere, where sub-menu's present but nothing worked.
Do you have any idea how to make it work as it should?
Here's my code:
#header #nav{
float:right;
margin:0px;
position:relative;
z-index:100;
}
#header #nav > li {
display:inline-block;
margin:0;
position:relative;
z-index:100;
}
#header #nav > li > a{
color:#727272;
border:none;
background:none;
font-size:11px;
font-weight:700;
height:60px;
line-height:59px;
display:block;
padding:0 15px;
background:none center bottom;
position:relative;
}
#header #nav > li > a:hover{
color: #0073fe;
}
#nav li ul.sub-menu{
width:210px;
background:#fff;
position:absolute;
border:1px solid #ececec;
border-top:2px solid #0073fe;
margin:0;
top:96%;
padding:0 15px;
display:none;
-webkit-box-shadow: 0px 2px 50px 10px rgba(0, 0, 0, 0.05);
box-shadow: 0px 2px 50px 10px rgba(0, 0, 0, 0.05);
margin-top:2px;
}
#nav li ul.sub-menu > span{
position:absolute;
top:-6px;
left:30px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #0073fe;
}
#nav li ul.sub-menu > li{
margin:0;
width:100%;
display:block;
}
#nav li ul li a{
font-size:11px;
font-weight:700;
display:block;
padding:7px 0px;
color:#727272;
border:none;
border-bottom:1px solid #ececec;
}
#nav li ul li a:hover{
color: #0073fe;
}
#nav li ul li:last-child a{
border-bottom:none !important;
}
#nav li ul li ul.sub-menu{
margin-left: 190px !important;
margin-top: -35px !important;
}
.slogan{
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
font-size:34px;
line-height:35px;
text-align:center;
font-weight:300;
letter-spacing: -0.01em;
color:#000;
padding:0px 30px 30px;
}
So you want : submenu > menu; which means: #nav li ul.sub-menu > #header/#nav
The problem is that you set up your menu to a high z-index and not your submenu (and results in: submenu < menu).
z-index defines a "set a layers" where your element would be, if it's set higher than an other one, then it will appear on top of it.
You need to delete the z-index for #header #nav and #header #nav>li and instead put a high z-index to #nav li ul.sub-menu.
#nav li ul.sub-menu {
z-index: 50; //It doesn't have to be a hundred, 50 should do, or even 5...
}