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;
}
Related
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;
}
I have a menu bar that has three items with drop down menus. When I hover my mouse over the menu bar itself, the drop down menu shows up, but when I move the mouse away to hover over something in the actual drop down menu, it disappears. I assume I'm missing something in my css code, but I'm not sure what. Here's what I have:
body {
background: url(background.jpg);
font-family:Georgia;
margin:10;
padding:10;
}
.main {
width:1000px;
margin:0 auto;
background: #000;
color:#fff;
}
.main > div {
height:200px;
margin:10px;
}
div.bottom {
height:0;
clear:both;
margin:0;
}
.main .head {
height:100px;
color:#fff;
line-height: 100px;
}
h1 {
font-size: 30px;
font-weight: bold;
margin:0;
}
h5 {
color:#000;
}
.main .page {
min-height:500px;
height:auto;
}
.main .foot {
height:70px;
text-align: center;
line-height: 70px;
}
.span_1 {
width:800px;
}
.span_2 {
width:990px;
}
div.menu {
height:50px;
line-height: 50px;
background:#000;
color:#fff;
}
.menu a:link,
.menu a:visited {
color:#000;
text-decoration: none;
padding:0 10px;
}
.menu ul,
.menu li,
.menu h5,
.menu .mega-drop {
list-style:none;
margin: 0;
padding: 10;
background:#fff;
}
.menu li {
position: relative;
}
.menu > ul > li {
float:left;
border-right:solid 1px;
}
.menu > ul > li > ul {
position: absolute;
left:0;
top:60px;
width:400px;
z-index:1;
display:none;
}
.menu > ul > li > .mega-drop {
position: absolute;
left:0;
top:60px;
z-index:1;
width:400px;
display:none;
}
.menu > ul > li > .mega-drop > .mega-drop-column {
float:left;
width:200px;
}
.menu > ul > li > ul > li > ul {
position: absolute;
left:400px;
top:0;
width:400px;
z-index:1;
display:none;
}
.menu li:hover {
background: #3f0;
}
.menu li:hover > ul,
.menu li:hover > .mega-drop {
display: block;
}
you have to do something like this
<div id="menubar"> <- here is your hover to show the menu
<div id="navpoint1">...</div>
<div id="navpoint2">...</div>
<div id="navpoint3">...</div>
...
</div>
now you are "the whole time" hover 'menubar' and the dropdown will not dissappear
This happened to me and tried several methods. I altered the following code and worked a charm! It was strange because it only happened on the index page!!
Was this...
#nav li ul {
width:100%;
margin:0;
padding:0;
display: none;
position: absolute;
top: 100%;
background-color: #39F;
background: rgba(51, 153, 255, .9);
}
Changed to...
#nav li ul {
width:100%;
margin:0;
padding-top:.2em;
display: none;
position: absolute;
top: 100%;
background-color: #39F;
background: rgba(51, 153, 255, .9);
z-index:99999;
}
I have this CSS for my horizontal menu:
.vertical-nav {
height:auto;
list-style:none;
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;
min-width: 125px; /******* 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: 6px;
padding: 0;
}
.vertical-nav li:hover ul {
display: block;
}
but the sub menu links are displaying horizontally rather than vertically...
whats the best way to change the CSS to make this to make the sub links display vertical rather than horizontal?
here is the HTML of the menu:
<ul class="vertical-nav">
<li>Link
<ul class="sub-menu">
<li>Sub Link</li>
<li>Sub Link</li>
</ul>
</li>
</ul>
.sub-menu li
{
clear: both;
}
Add the above CSS. DEMO
Like this
DEMO
CSS
.vertical-nav {
height:auto;
list-style:none;
width: 400px; /******* 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: 200px; /******* 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: 6px;
padding: 0;
}
.vertical-nav li:hover ul {
display: block;
}
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 { }