I'm having some trouble with changing a CSS drop down menu to a drop up menu. I think I'm almost there, but for some reason some of the buttons are not displayed correctly (the text is moving downwards, but the menu is moving upwards). See crisislab.nl for the code in action.
Any help would be much appreciated!
#navigation {
width: 980px;
height: 38px;
}
#navigation li {
float: left;
position: relative;
top: 220px;
}
#navigation li:hover {
background: transparent url(gfx/navigation_hover.png) repeat;
}
#navigation li a {
text-transform: uppercase;
color: white;
padding: 13px 33px;
line-height: 38px;
font-size: 11px;
}
#navigation li a:hover {
text-decoration: none;
}
#navigation li ul {
position: absolute;
background: transparent url(gfx/navigation_hover.png) left top repeat;
z-index: 1000;
min-width: 100%;
display:none;
left:-1px;
}
#navigation li:hover ul {
bottom: 38px;
display:block;
}
#navigation li ul li {
background: none;
width: 100%;
}
#navigation li ul li:hover {
background: none;
background-color: #2a51b5;
}
#navigation li ul li a {
text-transform: uppercase;
color: white;
padding-left: 8px 10px;
line-height: 28px;
width: 100%;
display:block;
}
When having a hard time finding bugs, always replicate and break the code into smallest simplest chunks.
Hope this would help: http://jsfiddle.net/ccS7q/
But you wouldn't be able to achieve drop up menu with the sublists listing upwards unless you use jquery or javascript with it. The fiddle above can't do listing upwards, you could though adjust manually the ul li.menu-item ul top value as the listing lengthens. Though its a lot of work. I would advise you to use jquery instead.
Remove that bottom: 38px; from below code:
#navigation li:hover ul {
bottom: 38px;/*Just Remove This*/
display: block;
}
Add top:0 to #navigation ul li ul li
#navigation li ul li {
background: none repeat scroll 0 0 transparent;
top: 0;/*Add This*/
width: 100%;
}
I think this will help you.
Related
I am brand new at coding and am working on the final project for my class. It's like web page 101: the very basics in HTML5 and a little CSS. The demos we built for class look like they're from the 90s. Simple is fine, but I really want to challenge myself so I am attempting something more complicated.
TL;DR I have zero skills and my code is probably messy, please bear with me!
I ran into some trouble with the navigation menu I'm making. Maybe one of you can help me out :)
When I mouse over each item in the textured metal bar, blood splatter/paint/ketchup shows up. "CONTENTS" has a drop down menu that changes color when hovering over a list item in it.
But...
1) The text links are gone. I don't know what happened to them, but I do know that they had vanished BEFORE I added the Multiply opacity to the background-color. I think maybe it was after I had the BG color change on hover. I need the links to be solid white.
2) Is there any way to have "CONTENTS" show as red-splattered while I am hovering over the drop down list items? (as opposed to only when I am hovering over "CONTENTS" itself?)
Here is my code, and here is the sprite image
in case you need it.
EDIT: Here is the JSfiddle
http://jsfiddle.net/dkxovdj1/
Thanks so much!
> ul#nav {
margin:0 0 0 0;
padding:0;
list-style:none;
clear: both;
}
ul#nav ul.dd li a {text-decoration: none;
color: white;}
#nav li {
text-indent:-9999px;
display:inline;
float:left;
width: 495px;
position: relative;
}
#nav li a {
background:url(navbar_main2.jpg) no-repeat;
width: 495px;
height: 101px;
display:block;
}
#nav li.nav-1 {width:144px; height:154px;}
#nav li.nav-1 a:hover{background-position:0px -101px;}
#nav li.nav-1 a{background-position:0px 0px;}
#nav li.nav-2 {width:151px; height:154px;}
#nav li.nav-2 a:hover{background-position:-144px -101px;}
#nav li.nav-2 a{background-position:-144px 0px;}
#nav li.nav-3 {width:308px; height:154px;}
#nav li.nav-3 a:hover{background-position:-295px -101px;}
#nav li.nav-3 a{background-position:-295px 0px;}
#nav li ul.dd {
display: none;
position: absolute;
top: 101px;
left: 0px;
width: 100px;
height: 175px;
background-color: #524f4a;
mix-blend-mode: multiply;
line-height: 25px;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
opacity: 0.7;
text-align: center;
}
#nav li:hover ul.dd{
display: block;
}
}
#nav li ul.dd li{
text-align: center;
position: relative;
margin: 0 px;
text-indent: 0;
width: 115px;
height: 25px;
}
#nav li ul.dd li a{
top: 7px;
background: none;
display: block;
width: 105px;
height: 25px;
background-color: black;
text-align: center;
border: 1px solid #CCC;
border-radius: 7px;
margin: 2px;
}
#nav ul.dd li:hover a:hover {background-color: #ffde43;}
ul.dd li {position: absolute; right: 24px; top: 8px;}
The issue with the text not showing up is a typo. You have the following in your fiddle:
#nav li:hover ul.dd {
display: block;
} /* <-- should not be here */
}
The hover state can be amended to be #nav li.nav-1:hover a instead of #nav li.nav-1 a:hover. That should get the red to display when hovering over the submenu
Demo: http://jsfiddle.net/w0hq3L06/
Edit:
Per the comment here,
background-color: #524f4a;
mix-blend-mode: multiply;
should be
background-color: rgba(82, 79, 74, 0.7);
background-blend-mode: multiply;
and the opacity on the #nav li ul.dd style should be dropped entirely.
Demo: http://jsfiddle.net/w0hq3L06/2/
I'm having some issues with my menu being displayed properly. My 3rd level menu items are hidden behind the others for some reason. I've gone over my template I'm using and things seem to be alright on that end, otherwise the menu option wouldn't even be displayed. Thus I'm thinking something is wrong with my CSS, though I can't see what that would be. Does anyone have any ideas as to what's going on here? You can see an example at http://www.bpwsaskatoon.com and then hovering on the "Membership" option at the top.
The problem is in the css. First you should use classes or id:s on your navigation styles. Example ul li is now targeting every ul li. By using #nav ul li will target only all ul li inside #nav. In html the ul in .main_nav_menu should be div. You have now ul directly under ul.
I would recommend that you try some jquery plugin for dropdown menus. Example Superfish is pretty good, it takes care of many thigs that you should consider in dropdown menus, example touch events.
Here is a quick css that should display the 3rd level menu items.
/*Navigation styles*/
#nav{
display:table;
margin:0 auto 0 auto;
position:relative;
padding:5px;
}
#mnwrpr{
height:48px;
box-shadow: 0 1px 2px rgba(0,0,0,0.5);
clear: both;
display: block;
position: relative;
width: 100%;
z-index:1;
}
#nav ul {
font-family:'Lato', sans-serif;
font-size: 15px;
margin: 0;
padding: 0;
}
#nav ul li {
display: block;
position: relative;
float: left;
}
#nav li ul {
display: none;
}
#nav ul li a {
display: block;
text-decoration: none;
color: #8b8b8b;
padding: 5px 15px 5px 15px;
margin-left: 1px;
white-space: nowrap;
}
#nav li:hover ul {
display: block;
position: absolute;
}
#nav li:hover li {
float: none;
font-size: 14px;
}
#nav li:hover li { background: #ececec; }
#nav li:hover li a:hover {
background: #bcbcbc;
}
#nav ul li ul li ul {
top: 0;
left: 100%;
z-index: 99;
min-width: 12em;
position: absolute;
margin: 0;
padding: 0;
list-style: none;
display: none!important;
}
#nav ul li ul li:hover ul {
display: block!important;
}
#nav ul li ul li ul li {
position: relative;
margin: 0;
padding: 0;
list-style: none;
}
I'm using a CSS navbar that has drop down menus. I had a problem with scaling on my site, but some helpful users here helped me fix it. The solution they gave me was to change the position attribute to absolute.
This works fine for text boxes and images, but changing the navbar code to absolute breaks it and makes some of the buttons go to a second line.
Is there a way to stop this from happening and also stop the navbar from bugging out when the page is resized? Sorry if this is hard to understand. This is my navbar CSS, the HTML is just a list:
Jsfiddle: http://jsfiddle.net/qN8sm/embedded/result/
ul {
font-family: 'Open Sans', Times;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
position: relative;
z-index: 150;
}
ul li {
display: block;
position: relative;
float: right;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 7px solid #CC4D4D;
padding: 25px 30px 30px 30px;
background: #333333;
margin-left: 0px;
white-space: nowrap;
}
ul li a:hover { background: #757575; }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #757575; }
li:hover li a:hover { background: #757575; }
What you could try is set min-width:(amount of pixels)px. This sets the minimum width for an element, but if unless you set a max-width, it can upscale.
I'm almost certain this question has been answered in one form or another. Applying the changes I've found here and elsewhere doesn't seem to get me any further.
I'm trying to change the css menu from crisislab.nl from a drop-down menu to a drop-up menu. (As you can see on the site I'm currently working on it.)
Current problem I'm encountering is the fact that menu seems to be working fine, expect for the fact that the menu text is displayed downwards and while the menu is moving up (If this doesn't sound logical, please look at crisislab.nl)
See the code below for my current progress. Anyone willing to assist?
Many thanks in advance!
#navigation {
width: 980px;
height: 38px;
}
#navigation li {
float: left;
position: relative;
top: 220px;
} #navigation li:hover { background: transparent url(gfx/navigation_hover.png) repeat; }
#navigation li a {
text-transform: uppercase;
color: white;
padding: 13px 33px;
line-height: 38px;
font-size: 11px;
}
#navigation li a:hover { text-decoration: none;}
#navigation li ul {
position: absolute;
background: transparent url(gfx/navigation_hover.png) left top repeat;
z-index: 1000;
min-width: 100%;
display:none;
left:-1px;
}
#navigation li:hover ul {
display:block;
}
#navigation li ul li {
background: none;
width: 100%;
}
#navigation li ul li:hover {
background: none;
background-color: #2a51b5;
}
#navigation li ul li a {
text-transform: uppercase;
color: white;
padding-left: 8px 10px;
line-height: 28px;
width: 100%;
display:block;
}
The basic difference from a dropdown to a dropup is the offset of the child ul:
Dropdowns have top:<x>px; and if you want a dropup you just say: bottom:<x>px;
I modified your code to make it work: http://jsfiddle.net/fJSVz/
Basically i changed the following rules:
#navigation li ul {
top: -9999px; /* <- removed */
display:none; /* <- this will trigger the hide/show */
}
#navigation li:hover ul {
bottom:20px; /* <- this is the trick to push the ul up */
display:block; /* <- show the ul on hover */
}
I have a website that I am building, and I am doing a menubar for it.
My problem is that, I created separators between the menus, and I wish that the last menu option would not have the separator.
Code of the CSS:
div#menu ul {
top:5px;
position: relative;
list-style-type: none;
height: 80px;
width: 900px;
margin: auto;
}
div#menu li{
float:left;
}
div#menu ul a {
position: relative;
background-image: url(divider.png);
background-repeat: no-repeat;
background-position: right;
padding-right: 49px;
padding-left: 49px;
display: block;
text-decoration: none;
font-family: Verdana;
font-size: 14px;
color: #001B24;
}
div#menu ul > li:last-child {
background-image: none !important;
}
This is the Html:
<ul>
<li>Bemutatkozó</li>
<li>Kínálatunk</li>
<li>Referenciáink</li>
<li>Kapcsolat</li>
<li>Előjegyzés</li>
</ul>
I tried everything, but the background image wont go away on the last child. Please help :)
Thx in advance!
The image appears to be on the a descendent elements of the li elements, not the li itself. That said, you could try, instead:
div#menu ul > li:last-child a {
background-image: none;
}
Drupal 7, this worked for me:
div#navigation ul#main-menu.links > li:last-child a {
background-image: none;
}