I have a problem which isn't really big or something,but it annoys me as hell.The problem is underlining of child elements of my sub-menu,and what i mean by that is http://imgur.com/a/BqEza .Yep,that right there drives me crazy.It shows instantly when i hover on my parent element,in my menu.I started to coding like 2 weeks ago,so my question might be stupid,but please if somebody know how to remove it and fix my padding on parent element,to write it here.
Here is the Code.
.mobile-menu{
position:fixed;
width:70%;
height:100%;
background:white;
z-index:1000;
}
.mobile-menu ul{
top:10.2%;
position:relative;
color:black;
text-align:left;
font-weight:bold;
}
.mobile-menu li{
position:relative;
border-bottom:1px solid black;
padding-top:4%;
padding-bottom:4%;
}
.mobile-menu li:hover{
background:#000;
color:#fff;
}
.mobile-menu ul li ul{
display:none;
background:#fff;
padding:0;
border:none;
}
.mobile-menu ul li:hover ul{
display:block;
}
<div class="mobile-menu">
<ul class="mobile-menu-ul">
</ul>
</div>
instead of applying bgcolor to li add it to a
remove this code from ur css file
.mobile-menu li:hover {
background: #000;
color: #fff;
}
.mobile-menu li {
position: relative;
border-bottom: 1px solid black;
padding-top: 4%;
padding-bottom: 4%;
}
and add this to ur css file
.mobile-menu li a {
display: block;
padding: 4% 0;
}
.mobile-menu > ul> li:hover > a, .mobile-menu > ul> li:hover > .sub-menu > li:hover > a, .mobile-menu > ul .sub-menu .sub-menu > li:hover > a{
background-color: #111;
color: #fff;
}
Related
I need help with my dropdown menu.
What I want to achieve is to hide my sub menu as well as my sub child menu. Also, I want to the sub list item to only show only if I hover to the list items that I want.
Thank you in advance. Your help very much appreciated!
This is my CSS:
#access ul ul a { color: #fff; }
#access { position:relative; float:left; height:19px; margin-left:15px; }
#access ul {list-style-type:none; margin:0px; padding:0px;}
#access li {float: left;position: relative; }
#access a { height:19px; display: block; padding:3px 15px 0 15px; text- decoration: none;font-size: 14px; font-family:'LeagueGothicRegular'; color: #ffffff;}
#access ul ul { display: none; float: left; margin: 0; position: absolute; top: 10px; left: 0; width: 150px; z-index: 99999; }
#access ul ul ul { left: 100%; top: 0; }
#access ul ul a {
margin-top:1px;
background: #000000;
color: #ffffff;
font-size: 14px;
font-weight: normal;
height: 19px;
line-height: 1.4em;
padding:2px 15px 0 15px;
width: 157px;
text-decoration: none; font-family:'LeagueGothicRegular', Abadi MT Condensed , Charcoal, sans-serif; color: #ffffff;}
#access li a:hover { color: #ed1c24; }
/* I believe HERE is the problem */
#access li:hover ul { display: block; color: #ffffff;}
#access a:focus {color: #ed1c24;}
#access .current_page_ancestor > a { color:#ed1c24;}
I managed to solve my problem. This worked for me.
#access ul li:hover > ul {
display: block;
}
The line you mention does in fact affect your menu. Don't use display:block unless you want to show it, and position:relative also may throw off the positioning.
This is a fairly simplistic solution for it. You will have to change the classes to work with the ones that wordpress uses. I don't have a copy which I can use at the moment to be more helpful.
ul.menu {
background:#222;
color:#FFF;
padding:0;
margin:0;
}
ul.menu a {
text-decoration:none;
display:inline-block;
padding: 10px;
color:inherit;
}
ul.menu li {
display:inline-block;
position:relative;
}
ul.menu li:hover {
background:#777;
color:#00F;
}
ul.menu > li.submenu > ul.menu {
display:none;
position:absolute;
top:100%;
left:0;
}
/* For submenus put them on the right side */
ul.menu > li.submenu > ul.menu ul.menu {
display:none;
position:absolute;
top:0;
left:100%;
}
ul.menu > li.submenu:hover ul.menu,
ul.menu > li.submenu li.submenu:hover ul.menu {
display:block;
}
<ul class="menu">
<li class="submenu">Test
<ul class="menu">
<li class="submenu">Test 2
<ul class="menu">
<li>Test 3
</ul>
</li>
</ul>
</li>
</ul>
I have this css menu with sub items, how can i keep the menu item active (have a different background color) when hovering over the sub items?
current CSS code:
#nav {
background-color:#F36F25;
margin:14px 0 0 0;
width: 100%;
height:35px;
left:0;
}
#nav>li {
float:left;
list-style:none;
}
#nav li:hover ul {
position:absolute;
display:block;
}
#nav li a {
display: inline-block;
padding: 8px;
margin:0;
background: #F36F25;
text-decoration: none;
color: #FFFFFF;
border-right:1px solid #F36F25;
}
#nav li a:hover, #nav li a.active {
background: #666666;
cursor:pointer;
}
#nav li ul {
position:absolute;
display: none;
list-style:none;
margin:0;
}
#nav li ul li {
margin-top:0;
margin-right:0;
margin-bottom:0;
margin-left:-40px;
}
#nav li ul li a {
background-color: #F36F25;
color:#FFFFFF;
border:1px solid #F36F25;
width:145px;
}
#nav li ul li a:hover {
background-color: #666666;
border:1px solid #f36f25;
}
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
here is a fiddle with the fulle code too: http://jsfiddle.net/dumJd/
Try this code here on line 25:
#nav li:hover > a, #nav li a.active {
background: #666666;
cursor:pointer;
}
I have a CSS Menu with sub menu links but if there is text below the menu, the sub menu displays under the text and i cannot hover over the links
here is the CSS:
.vertical-nav {
height:auto;
list-style:none;
width: 100%; /******* MODIFIED ********/
margin: 20px 0 0 0;
}
.vertical-nav li {
height: 25px;
margin: 0;
padding: 5px 0;
background-color: #666;
border: none;
text-align: center;
display: inline-block;
float: left;
width: 100px; /******* MODIFIED ********/
}
.vertical-nav li:hover {
background-color:#f36f25;
color:#FFFFFF;
}
.vertical-nav li a {
font-family:Calibri, Arial;
font-size:18px;
font-weight:bold;
color:#ffffff;
text-decoration:none;
}
.vertical-nav li.current {
background-color:#F36F25;
}
.vertical-nav li.current a {
color:#FFFFFF;
}
vertical-nav ul li ul {
display:none;
list-style-type:none;
width:125px;
padding:0px;
margin-top:3px;
margin-left:-5px;
}
vertical-nav ul li:hover ul {
display:block;
}
vertical-nav ul li:hover ul li {
background-color:#555555;
width:125px;
height:30px;
display:inline-block;
}
vertical-nav ul li ul li:hover {
background-color:#333333;
}
vertical-nav ul li ul li a {
color:#FFF;
text-decoration:underline;
}
vertical-nav ul li ul li a:hover {
text-decoration:none;
}
.vertical-nav li ul {
display: none;
margin-top: 10px;
padding: 0;
}
.vertical-nav li:hover ul {
display: block;
}
.vertical-nav li:hover .sub-menu
{
display: table;
}
.sub-menu li
{
width: 100%;
min-width: 180px;
white-space: nowrap;
display:table-row;
}
.sub-menu li a
{
display:inline-block;
padding: 0 10px;
}
and a jsFiddle: http://jsfiddle.net/7z2sE/
how can i make the sub menu links display over any text that is below...
I've updated the fiddle http://jsfiddle.net/7z2sE/1/
add position:relative;z-index:1; to .sub-menu li
To do what you are after use absolute positioning and give the text a z-index that is higher than the element behind it.
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 have a dropdown bar -
<div class="buttonContainer">
<ul>
<li>
<a class="menu1one" href="">Dashboard</a>
</li>
</ul>
<ul>
<li>
<div class="noLink">Tasks</div>
<ul>
<li>View</li>
<li>Edit</li>
<!--[if lte IE 6]></a><![endif]-->
</ul>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li>
<div class="noLink">Dictionaries</div>
<ul>
<li>Needs</li>
<li>Activities</li>
</ul>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li>
<div class="noLink">Admin</div>
<ul>
<li>User Accounts</li>
</ul>
<!--[if lte IE 6]></a><![endif]-->
</li>
</ul>
</div>
CSS -
/*dropdown menu*/
.menu { float:left; width:100%; font-family: arial; border-top:1px solid #4c597f; background-color: #1079b5; min-width:950px; }
.menu .buttonContainer { padding:0 0 0 200px; }
.menu ul { padding:0; margin:0; list-style-type:none; }
.menu ul li { margin:0; float:left; position:relative; background-color:#153d71; }
.menu ul li a, .menu ul li a:visited { float:left; display:block; text-decoration:none; color:#ddf; padding:0px 16px; line-height:25px; height:30px; }
.menu ul li a:hover { background-color:#9fc1ed; color: #153d71;}
.noLink { display:block; color:#ddf; padding:0px 16px; line-height:25px; height:30px; }
.menu ul li:hover { width:auto; }
.menu ul li ul { display: none; }
/* specific to non IE browsers */
.menu ul li:hover ul { display:block; position:absolute; top:30px; left:0; width:154px; border-bottom:1px solid #000; }
.menu ul li:hover ul.endstop { left:-92px; }
.menu ul li:hover ul li ul { display: none; }
.menu ul li:hover ul li a { display:block; background:#1079b5; color:#000; height:auto; line-height:15px; padding:4px 16px; width:120px; border:1px solid #000; border-bottom:0; }
.menu ul li:hover ul li a.drop { background:#ccd no-repeat 3px 8px; }
.menu ul li:hover ul li a:hover { background-color: #153d71; color: #FFFFFF; }
.menu ul li:hover ul li a:hover.drop { background: #ccd no-repeat 3px 8px; }
.menu ul li:hover ul li:hover ul { display:block; position:absolute; left:153px; top:-1px; }
.menu ul li:hover ul li:hover ul.left { left:-153px; }
/* IE6 */
.menu ul li a:hover ul { display:block; position:absolute; top:30px; t\op:33px; background:#153d71; left:0; border-bottom:1px solid #000; }
.menu ul li a:hover ul.endstop { left: -92px; }
.menu ul li a:hover ul li a { display:block; background:#153d71; color:#000; height:1px; line-height:15px; padding:4px 16px; width:154px; w\idth:120px; border:1px solid #000; border-bottom:0; }
.menu ul li a:hover ul li a.drop { background:#ccd url('') no-repeat 3px 8px; padding-bottom:4px; }
.menu ul li a:hover ul li a ul { visibility:hidden; position:absolute; height:0; width:0; }
.menu ul li a:hover ul li a:hover { color:#000; background: #ccd url('') no-repeat 3px 8px; }
.menu ul li a:hover ul li a:hover.drop { background: #ccd url('') no-repeat 3px 8px; }
.menu ul li a:hover ul li a:hover ul { visibility:visible; position:absolute; top:0; color:#000; left:153px; }
.menu ul li a:hover ul li a:hover ul.left { left:-153px; }
The dropdown menu is working well or showing up on hover in IE7 but not responding in Firefox.
Could anybody help me with this please?? I tried position : relative for inner li a:hover and it shows the menu but extends the whole div till its end. What is to be changed here?
Also, i don't want to use javascript/jquery for this.
-thanks
EDITED - I have found the solution to get it to work. I added 'position: absolute;' attribute to the .menu{} in the css. That made it work... Thanks.
I just tested on IE7 its working fine to me
http://jsfiddle.net/vcN5g/
I have found the solution to get it to work. I added 'position: absolute;' attribute to the .menu{} in the css. That made it work... Thanks.