I just want to create a menu with drop down.. my question is I just want to merge background of main menu and the dropdown as the below image.. Please help me out..
image of the menu
http://s1369.photobucket.com/user/ashast1/media/Capture_zps0b0c58e6.png.html
jsfiddle for the menu
http://jsfiddle.net/6KPXC/
Here's a FIDDLE
.nav ul{list-style-type:none; position:relative;}
.nav ul li{position:relative; text-transform:uppercase; display:inline-block;}
.nav ul li:hover a{border:1px solid #d7d7d7;background:#fff;color:#f9852b; border-bottom:none;}
.nav ul li a{position: relative; padding:10px; color:#5E6062; display:block;border:1px solid #fff; z-index: 100;}
.nav ul li a:hover{position: relative; color:#f9852b;border:1px solid #d7d7d7; z-index:11; border-bottom:none;}
.nav ul li:hover ul{display:block;padding:20px;}
.nav ul ul{position:absolute; display:none; min-width: 200px; border:1px solid #d7d7d7; border-top: none; margin-top:-1px;left:-10px;z-index:10;}
.nav ul ul:after{position: absolute; content: ""; top: 0; right: 0; width: 100%; border-top:1px solid #d7d7d7;}
.nav ul ul li a, .nav li:hover li a{border:0px; color:#515151; text-transform:capitalize;padding:3px 10px;}
.nav ul ul li a:hover, .nav li:hover li a:hover{border:none; color:#515151; text-decoration:underline;}
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 apologize upfront if this is a simple mistake.
I'm trying to update the code for a css menu with hover effect, and when i hover over the parent li, the sub menu ul appears. When I try to hover to the submenu, it disappears; from what I can understand there's a gab between the parent li and the sub menu.
The code is for the menu is the one below:
.site-header{
border-bottom: 1px solid #DADADA;
}
.site-branding{
width: 30%;
padding-top:5px;
}
.navigation-container{
width: 70%;
}
.main-navigation ul {
clear: both;
display: block;
float: left;
}
.main-navigation{
padding-top: 5px;
display: block;
}
.main-navigation li{
display:block;
border-right: 1px dotted #DADADA;
}
.main-navigation a{
padding-right:3px;
padding-left:3px;
font-size:75%;
font-weight: lighter;
display: block;
}
.main-navigation li:last-of-type{
border-right:none
}
.main-navigation a ul{
display:none;
}
.main-navigation ul li:hover ul{
right: 50%;
margin-right: -150%;
width:180px;
position: absolute;
}
.main-navigation ul ul a{
font-size:10px;
font-weight: lighter;
width:180px;
}
.main-navigation ul ul li{
font-size:50%;
}
Thanks in advance
I would suggest that the issue lies here:
.main-navigation ul li:hover ul{
right: 50%;
margin-right: -150%;
width:180px;
position: absolute;
}
More usually it would look something like this:
.main-navigation ul li:hover ul{
left: 100%; /* start at the right edge of the parent li */
top:0% /*always align to the top of the parent li */
width:180px;
position: absolute;
}
Also the parent li should have position:relative.
edit
JSfiddle
Simple question, i've got the following code but i dont know what to add to my css to lift the display:none; If you need further explaining feel free to ask in the comments.
<nav>
<ul>
<li>
<a href="[[~[[+id]]]]" title="[[+pagetitle]]">
[[+longtitle:default=`[[+pagetitle]]`]]
</a>
<ul>
<li>
<a href="#" title=lorem>
[[Wayfinder? &startId=`[[+id]]` &level=`2` ]]
</a>
</li>
</ul>
</li>
</ul>
</nav>
/** Navigation **/
#nav ul{list-style: none; padding: 0; display: block;}
#nav ul li{display: inline-block; position: relative;}
#nav ul li a{ display: block; padding: 5px 8px; text-decoration: none; font-size: 16px; }
#nav ul li ul{
position: absolute;
left: 0px;
background: rgba(0,0,0,0.8);
border-radius: 0 0 5px 5px;
display: none;
z-index: 9000;
display:none;
}
.ie7 #nav ul li ul,
.ie8 #nav ul li ul{
background: url('../../assets/img/transparent-black.png') repeat;
}
#nav ul li.last ul{ right: 0px; left: auto; }
#nav ul li.last ul li a{ text-align: right; }
#nav ul li:hover ul,
#nav ul li ul:hover{ display: block; }
#nav ul li ul li{
display: block;
padding: 0;
overflow: hidden;
}
#nav ul li ul li a{
min-width: 100px;
margin: 0;
padding: 7px 14px;
color: #ffffff;
}
#nav ul li ul li:hover{ background: #f1f1f1; }
#nav ul li ul li a:hover{ color: rgba(253,183,46,1); }
nav li:hover > nav li ul li{
background-color:red;
overflow:visible;
}
nav li ul li{
display:none;
}
try this:
nav ul li ul li{
display:none;
}
nav ul li:hover > ul li{
display:block;
}
http://jsfiddle.net/vpZ5J/4/
You were trying to hide the li items in the sub-menu. Instead hide the submenu ul and then display it on hover. For that change this
nav li ul li{
display:none;
}
to
nav li ul{
display:none;
}
and add this
nav li:hover > ul{
display:block;
}
DEMO
Try adding this:
nav ul li:hover li,
nav ul li:hover ul{
display:block;
}
jsfiddle
Add the following rule:
nav li:hover, nav li:hover ul li{
display:block;
}
http://jsfiddle.net/vpZ5J/
I think what you are looking for is:
nav ul li:hover > ul {
display: block;
}
Also, you don't have div with id #nav, so all your styling is incorect, you should be using just nav
The images of list items in dropdown menu repeats three times even though "no repeat" is added in html. please help me.
html code.
<div class="menu">
<ul>
<li style='background-image:url(images/menu2s.jpg)0 0 no-repeat;'><a></a>
<ul>
<li style='background-image:url(images/sets.jpg)0 0 no-repeat;'>Settings</li>
<li style='background-image:url(images/more-icon.png)0 0 no-repeat;'>More</li>
</ul>
</li>
</ul>
</div>
css file
body{padding: 3em; }
.menu * {
padding:0;
margin: 0;
font: 12px georgia;
list-style-type:none;}
.menu {
position: absolute;
bottom:0px;
float: left;
line-height: 10px;
left: 100px;
z-index: 50;}
.menu a {
display: block;
text-decoration: none;
color: #3B5330;}
.menu a:hover { background: #B0BD97;}
.menu ul li ul li a:hover {
background: #ECF1E7;
padding-left:9px;
border-left: solid 1px #000;}
.menu ul li ul li {
width: 140px;
border: none;
color: #B0BD97;
padding-top: 3px;
padding-bottom:3px;
padding-left: 3px;
padding-right: 3px;
background: #B0BD97;
z-index:50;
}
.menu ul li ul li a {
font: 22px arial;
font-weight:normal;
font-variant: small-caps;
padding-top:3px;
padding-bottom:3px;
z-index:50;}
.menu ul li {
float: left;
width: 146px;
font-weight: bold;
border-top: solid 1px #283923;
border-bottom: solid 1px #283923;
background: #979E71;
z-index:50;}
.menu ul li a {
font-weight: bold;
padding: 15px 10px;
z-index:50;}
.menu li{
position:relative;
float:left;
z-index:50;}
.menu ul li ul, #menu:hover ul li ul, #menu:hover ul li:hover ul li ul{
display:none;
list-style-type:none;
width: 140px;
z-index:50;}
.menu:hover ul, #menu:hover ul li:hover ul, #menu:hover ul li:hover ul li:hover ul {
display:block;
z-index:50;}
.menu:hover ul li:hover ul li:hover ul {
position: absolute;
margin-left: 145px;
margin-top: -22px;
font: 10px;
z-index:50;}
.menu:hover ul li:hover ul {
position: absolute;
margin-top: 1px;
font: 10px;
z-index:50;
}
.menu>ul>li:hover>ul {
bottom:100%;
border-bottom: 1px solid transparent
z-index:50;
}
Write it like this. You wrote shorthand in background-image rather than Background.
style='background:url(images/sets.jpg) 0 0 no-repeat;
> or
style='background:url(images/sets.jpg) no-repeat 0 0 ;
You have not given space between the brace and zero.
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.