So i am working on a small HP for a school project and am kinda stuck with the nav bar. When i hover over "Gallery" the submenu opens and there's the problem:
I am trying and trying but can't seem to find a way to get the backgroundcolor only for the submenu area and not the whole page on the left of it...
I'm sure it's an easy fix but I am struggling atm
here's the jsfiddle:
https://jsfiddle.net/67wq84g9
i think it's something here, but if I change the width and hover over the submenu it doesn't completely change color.
.menu ul {
display: none;
width: 100%;
}
any ideas?
can you set width for
.menu ul {
list-style: none;
background: #7ebc71;
padding: 0;
position: absolute;
top: 100%;
width:80px;
}
and
.menu ul li a:hover {
background: #557F4C;
width :80px;
}
Related
I have this problem where I want make a box around a menu list. But I've never seen something like this. When I hover over my menu list it flickers? The jsfiddle has the full-code.
Here is the link to jsfiddle
li {
display: inline-block;
position:relative;
line-height: 7vmax;
vertical-align: middle;
}
ul li a {color:rgb(23,123,177);text-decoration: none;margin-left:5vmax;font-size:1.3vmax;}
a:hover { background-color: #2c3e50;
padding: 1vmax;}
Does anyone know why is this? And how can I fix this? Thanks.
The flickering and jumping are caused by the padding you're adding on hover.
Simply add the padding on your normal state like this:
ul li a {
color:rgb(23,123,177);
text-decoration: none;
margin-left:5vmax;
font-size:1.3vmax;
padding: 1vmax; // add it here
}
a:hover {
background-color: #2c3e50;
// remove it here
}
I've created a fork of your code and updated it:
https://jsfiddle.net/7jsf9o2t/1/
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.
For a website I need to make a css/html menu like this:
As you can see there some yellow borders to the left and also to the right of the menu links that fill up the availabe width. Also there is a background image underneath the menu with a gradient in it.
Does somebody has any idee on how to achive this menu style?
Code so far:
<div id="submenu">
<ul>
<li class="selected">
Wirtschaft<div></div>
<ul>
<li>Kurzeinführung Wirtschaft</li>
<li>Wirtschaftstheorie</li>
<li>Arbeitsmarkt</li>
<li class="selected">Geld- und Konjunktur</li>
<li>Staatsfinanzen</li>
<li>Wirtschaft: alle Beiträge</li>
</ul>
</li>
</ul>
</div>
#submenu {
width: 225px;
}
#submenu ul {
list-style-type: none;
}
#submenu ul li a {
border-left: 6px solid transparent;
padding-left: 4px;
display: block;
margin-bottom: 15px;
color: #222624;
font-size: 17px;
}
#submenu ul li a:hover,
#submenu ul li.selected > a {
border-left: 6px solid #CAB106;
}
#submenu ul li ul li a {
margin-bottom: 7px;
font-size: 14px;
}
EDIT: the gradient in the picture actually resides in the body and i think it can not be done with pure css so it has to be a background image.
EDIT2: the solution provided by PeterVR works great! unfortunately i am stuck with another list with the same style but without the blocks ending complete when the ul ends. any idea on how to achive this with the code provided by PeterVR?
something like this perhaps: http://jsfiddle.net/AXze7/1/
I changed a few thing in your css:
- set the main ul to overflow hidden
- removed the display block from your <a> tags
- set the <a> tags to position relative, for the following to work:
#submenu ul li a:hover:after,
#submenu ul li.selected > a:after {
background: #CAB106;
content: ' ';
display: block;
height: 100%;
width: 225px;
margin-left: 4px;
position: absolute;
left: 100%;
top: 0;
}
This adds the green blocks after the anchor tags.
EDIT:
I updated my fiddle for your second case: http://jsfiddle.net/AXze7/2/
A short overview of what changed:
I removed the overflow:hidden from the ul, and put it on the li
I tweaked the styling and played with the pixels to make it look a bit more like your screenshot. Comparing this with the previous example should help you understand how to achieve what.
I added an extra pseudo-class :before for the arrow icon that appears to change on hover/select.
The code looks like this:
#submenu ul li a:before,
#submenu ul li.selected > a:before {
background: #fcc; /* put your black arrow image here */
content: ' ';
display: block;
height: 12px;
width: 12px;
margin-left: 2px;
position: absolute;
left: -18px;
top: 2px;
}
#submenu ul li a:hover:before,
#submenu ul li.selected > a:before {
background: red; /* put your colored arraw image here */
}
check this demo in js fiddle.make an image one pixel height with the grenadine shown on the picture , and replace #eee with that image.
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.