Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I've been busting my head at this for quite some time now and I can't figure it out for the life of me.
Basically, I have the following site: http://tuivirtual.com/en/
If you move your mouse at the top portion of the banner images you'll notice that the dropdown menu drops but it shouldn't. It should drop only when hovered over the actual tags, not below.
Any help is more than welcome!
Thanks!
A simple solution is to give the ".sub-nav-wrapper" a negative "z-index" and on hover to add a positive "z-index" to it.
#navigation li .sub-nav-wrapper {
z-index: -1;}
#navigation li:hover .sub-nav-wrapper {
z-index: 10;}
This will do the trick and it will keep the transition.
The element is still 'there', it just has an opacity of 0:
#navigation li .sub-nav-wrapper {
opacity: 0;
}
#navigation li:hover .sub-nav-wrapper {
opacity: 1;
}
To solve this problem, hide it in some other way.
Try add this CSS code:
ul#navigation li div.sub-nav-wrapper {
display: none;
}
ul#navigation li:hover div.sub-nav-wrapper {
display: 1;
}
That should do it.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Hello I am making a dummy promotion page and I am not sure why I have so much
spacing under my h1 tags.
Also for my footer, my li's dont seem to inherit the hover effect?
My li:hover works locally but not when I transfer it over on ftp.
Poking around on your site I found some problems (Chrome inspect is a powerful tool)
In your css/style.css you're setting the hover style on the < li> element, but it's the < a> element you should change the styling of. Change nav li:hover and h1 to this:
nav a:hover {
background: #222; // Looks better
color: #1CDFED;
text-decoration: underline;
}
h1 {
display: inline-block;
margin: 0;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
#menu1 a {
display: block;
background-color: #0066FF;
text-decoration: none;
font-family: calibri;
font-size: 20px;
color: #FFFFFF;
padding: 5px 5px;
}
#menu1 a:hover {
background-color: #0088FF;
}
#menu1 li {
display: inline-block;
}
#menu1 ul {
list-style: none;
text-align: center;
margin: 0 auto;
padding:0px;
}
Here's my code. I'm trying to get it all under one #menu1 Because i'm working with multiple menu's and i don't want to lose my overview. Does anybody know how to do this? Maybe something with positioning? My question is: How do i get the a, a:hover, li and ul properties under one #menu1?
Thanks for your help!
Update:
I've had a lot of answers that refer to LESS or SASS. I'm not familiar with those languages. Could anybody explain to me what this is and how to use this? A link to a clear tutorial is fine.
Presumably you want to do something like this:
#menu1 {
a { /* ... */ }
li { /* ... */ }
ul { /* ... */ }
}
This is not possible with CSS and there is no workaround to enable this type of structure; you have to write out each selector in full and rely on logical grouping and/or formatting in the source to provide structure.
You can, however, use a CSS preprocessor such as LESS or SASS which will allow you to write code like the above and translate it to your original "dumb" CSS version automatically.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have a bit of a spacing problem with a superfish drop down menu. You can see the issue here:
http://screencast.com/t/V8g5ZrDXDZV
You can see it live here: http://goo.gl/kzImjK
Basically all of the submenu items are floated left with a 50% width. I need to remove that big space and basically have the items get right underneath the sub menu items.
Regarding your big space problem:
Ok, based on our exchange, and using jQuery, you could:
Append all your secondary submenu li items to the primary submenu, right after the primary submenu li item that used to contain them.
Add a css class to said items to be able to target them (if need be).
Add a menu-changed class to your #navigation div, and add a custom set of styles to it (so that they only work if the JS did).
jQuery:
$(document).ready(function() {
$("#navigation li ul li ul").each(function() {
$(this).children("li").each(function() {
$(this)
.addClass("was-submenu-item")
.insertAfter($(this).closest("ul").parent());
});
$(this).closest("li").removeClass("menu-item-has-children");
$(this).remove();
});
$("#navigation").addClass("menu-changed");
console.log($(".was-submenu-item"));
});
CSS:
#navigation .was-submenu-item a {
/* some styles here */
}
#navigation.menu-changed ul li {
/* some styles here */
}
Fiddle:
Here's a working JSFiddle for reference.
Regarding your alignment problem:
Look for the following style selector inside your theme's main.css style sheet: #navigation li ul li ul li a, and get rid of the margin and customize the padding, like so:
#navigation li ul li ul li a {
padding: 5px 4px;
/* margin-left: 20px; */
width: 100%;
font-size: 11px;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I am making a website and though of a cool navigation bar that is suppose to look like this:
Edit - accidentaly erased the all the css code, only had the nav fixed at the bottom - Edit
I managed to make it look like this: http://pokemasters.freeiz.com/bare.html
I just ran out of ideas.... i got the images that i made seperatly, a navbar:
& buttons:
I'm looking for a full width navbar that adjusts itself to different screens, is located at the bottom of the screen, red buttons while active or hovered and white buttons while normal, with that pokeball line right on top of it and overlaying the buttons
Can someone point me in the right direction please??
what you want to do? it is not clear. you doesn't need to use image in #navigation li a.profile instead of it you can use background colour.
#navigation li a.profile {
width: 240px;
background-color:#ffffff;
text-decoration: none;
}
#navigation li a.profile:hover {
background-color:red;
background-position: -240px;
text-decoration: none;
}
#navigation li a.profile:current {
background-color:#cccccc;
background-position: -240px;
background-repeat: no-repeat;
text-decoration: none;
}
or if you want to full width navigation bar.
#navigation ul {
list-style: none;
text-align: center;
width:100%;
}
#navigation li {
display: inline;
width:16.6%;
border-right:1px solid #ccc;
}
#navigation li:last-child{
border-right:none;
}
if you want the 'ball' image above the navigation bar. please use a <span> just above of the #navigation 'div' and set its background image 'ball' image.
property of <span class=ball_Img>
.ball_Img{
background:url('whatever');
position:relative;
z-index:5;
}
#navigation{
.......//property previous define please write here.
position:relative;
top:-50px; // you can change according to your situation.
}
So you want to have a full width nav bar? with elements stretching auto? or? And why are you using images to have a color? you can just use background: red; on hover or active, and background: white on normal states
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I have this problem with my drop down menu I cant seem to figure out how to move the drop down menu that shows when you hover above the "support" button, I would like to move it little bit to the left,the other half is sticking out of the screen and can't be seen.
here is the link to it.
[jsfiddle] http://jsfiddle.net/3ZzVT/1/
All replies and help will be very much appreciated!
http://jsfiddle.net/3ZzVT/3/
Adding a right: 0px to the .head_menu ul selector makes the element position itself better underneath the nav item.
Like this .head_menu ul give position:relative; and right:0;
DEMO
CSS
.head_menu ul
{
padding:0px;
margin:0;
list-style:none;
position:relative;
right:0;
}
.head_menu ul li ul
{
display: none;
width: auto;
position:absolute;
top:30px;
padding:0px;
margin:0px;
right: -15px; // I added this
}