Having a problem with my navigation bar. When it drops down it seems to keep pushing my classes named .banner-left and .banner-right.
ill put my code on JSfiddle as i'm doing this for a project and have to use Harvard referencing so sources back to here increase the plagiarism percentage even if the work isn't leached elsewhere.
Link: http://jsfiddle.net/wuqa5y87
You should set your dropdown's position to absolute.
UPDATED FIDDLE
nav ul ul {
display:none;
position: absolute; }
Can you try adding position:absolute to nav ul li:hover > ul
nav ul li:hover > ul {
display:block;
position:absolute;
}
Here's a link to an updated fiddle: looks like your original (missing rounded edges on last - but you can figure out how to get those back I am sure)
http://jsfiddle.net/wuqa5y87/2/
nav ul ul {
position: absolute;
}
nav ul ul li{
position: relative;
clear: both;
}
As the other folks said, you need absolute positioning on the UL element that is shown because that takes it out of the normal flow of the document.
I've updated your fiddle here
http://jsfiddle.net/ryanore/wuqa5y87/3/
You'll also need a little extra massaging to get it right
nav ul {
text-align:center;
margin:auto;
position: absolute;
}
nav ul li ul{
width: 175px;
}
Related
I have two small issues in CSS that I am unable to figure out. First is the ability to extend the area of the block on the drop down to fit the wording in properly. And secondly is the sub-menu, sub-menu placement. I have a fiddle setup here: fiddle
The only attribute from what I can tell is
display: inline-block;
This is the first issue: http://screencast.com/t/9GSbhMWe
And the second issue: http://screencast.com/t/TOAKiE5db
Could someone maybe assist if they could. What am I missing?
Thanks in advance.
Add this into your stylesheet. Or you'd better find and edit the related properties directly.
#nav .main-navigation .sub-menu {
background: url(images/background.jpg);
}
#nav .main-navigation .sub-menu li {
display: block;
}
#nav .main-navigation .sub-menu,
#nav .main-navigation .sub-menu li a {
width: auto;
}
#nav .main-navigation .sub-menu li a {
background: none;
}
To fix the 2nd issue, add this.
#nav .main-navigation .sub-menu .page_item_has_sub-menu {
position: relative;
}
My problem is that I've got a div at the top of my site that has a dropdown menu with a float to the left, the thing is that under that div where I want to have a header whenever I hover over the menu the header floats to the left as well.
I tried to do a clear div after the top div then on css use clear:both; but it didn't really help
Here's the JSfiddle:
http://jsfiddle.net/Safushi/XRNP5/
ul {
font-size: 16px;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 5px 15px 5px 15px;
background: #464646;
white-space: nowrap;
}
ul li a:hover {
background: #565656;
}
is some of the code for the menu (had to paste some code to be able to paste JSfiddle link).
It will be fixed by adding a
position: absolute;
to the ul that contains the submenu.
The child ul element needs to be absolutely positioned if you don't want it to effect the other elements.
Example Here
#top li > ul {
position:absolute;
width:100%;
}
And as Adrift mentions, you may also want to give the ul a width of 100%.
You got the layer of HTML file right,but the property "position" wrong.
Demo
Once a tag's settled position:absolute; ,it will only be positioned referring to its containing block.So you need to set #menu{postion:relative;} to let its parent-tag be the containing block.In fact,now the submenu is totally deleted from the normal flow,so it won't affect the styles of other tags.
Moreover,I highly recommend you to resist to use descendant selectors,which not only let your browser slower,and your code maintenance much more complex as well.
I'm trying to make my footer menu open upwards, but the menu is getting cut off at the top of the footer. I've tried setting overflow-y:visible;, but that doesn't help.
Here's the site: http://new.freshsourdoughexpress.com/contact/
And the code I'm using:
#colophon {
padding-top: 40px;
overflow-y: visible;
}
#colophon #navbar ul li:hover ul {
bottom:100%;
top:auto;
}
#colophon #navbar ul ul li:hover ul {
bottom:0;
}
(The top padding is temporary, just to see what's happening.)
I've been following the 3rd how-to in this guide: http://premium.wpmudev.org/blog/move-wordpress-theme-menus/
How do I get the menu to extend out of the footer?
Within your CSS, you'll need to add a couple of attributes to the id below.
#colophon {
padding-top: 40px;
overflow: visible;
display: inline-block;
width: 100%;
}
I've tried it out using the CSS editor within Chrome and everything seems to work.
I am looking at this example of a only css generated drop down menu:
http://jsfiddle.net/XPE3w/7/
And I was wondering how can I make the items under the "About us" tab to be aligned from right to left.Now they look like that:
About us
|Menu items with different length|
I want it to look like that:
About us
|Menu items with different length|
Like this
demo
css
li ul {
display: none;
position:absolute;
right:0;
}
Just add right:0; to li:hover ul or to li ul
li:hover ul {
display: block;
position: absolute;
right:0;
}
working Fiddle
use the float:right in your css style.
li ul {
display: none;
position:absolute;
float:right;
}
i cant post all of my code, so please check the url.
http://www.bierhauschina.com/shekou/kulinarium/
here is css:
http://www.bierhauschina.com/menu/menu_style.css
The problem is a css menu. my menu shows all lists of menu under the first menu. i don't know where is problem, but it is exactly in css. where.. i can't got it.
Add position: relative to .nav li in your CSS.
Add position: relative; to .nav .select, .nav .current, making it like this:
.nav .select, .nav .current {
margin: 0;
padding: 0;
list-style: none;
display: table-cell;
white-space: nowrap;
position: relative;
}
This style:
.nav .select *:hover .select_sub, .nav .current .show
Sets position to absolute. Set it to relative. Also you are loading menu_style.css twice, remove the second reference.