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;
}
Related
My question here is when I hover over recipes and when I move forward to the sub menus how do I make the blue hover perfectly fit the sub headings. Like the color is not covering the text fully. And for a better understanding please do read and run my code if you like.
I am using this in the CSS
nav li:hover ul {
display: block;
}
Here is the link please do check it.
https://jsfiddle.net/harisfaisal/q68n7ro4/2/
It's because nav li {width:20%} in your code is affecting all li elements including submenu so the color covers only 20% in submenus. It can be fixed by adding width:100%; in your nav li li {} selector.
Note: your code has repeated selectors, it's better to merge them to improve readability.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 7 years ago.
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.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Improve this question
body {
font-family: verdana;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden; /*1.Why after deleting this line the menu diappear？*/
background-color: #666;
}
ul li {
float: left; /*2.Why after deleting the menu become a column shape？*/
}
ul li a {
display: inline-block; /*3.Why after deleting the menu become smaller？*/
color: white;
padding: 14px 16px;
text-decoration: none;
text-align: center;
}
ul li a:hover {
background-color: #111;
}
<!DOCTYPE html>
<html>
<body>
<h2>Menu Demo 2:</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Contact</li>
</ul>
</body>
</html>
I am a newbie in CSS. This is just a very simple menu demo, but I thought for 3 hours and still didn't understand it. I have put my 3 questions in the code, that is:-
[1] Why did I delete that line 'overflow: hidden;' in 'ul' tag and then the menu just disappear?
[2] Why after deleting the line 'float: left;' in 'li' tage then the whole menu become a column shape？I think below that line I set 'a' tag as 'display:- inline-block'...... And what is the use for 'float: left' here?
[3] Why did I change 'display: inline-block' to 'display: inline', and then the whole menu become smaller and padding-top & padding-bottom for every 'a' tag doesn't work?
The overflow: hidden contains the floated lis inside the ul by creating a blocking context, there is a in-depth explanation here:
Adding CSS border changes positioning in HTML5 webpage
The float: left pulls everything over to the left hand side, and in your case in a line, without a float: left or right the default is none which means elements will just stack which is why you're getting a column style layout.
The inline-block, or a block in other uses, makes the element incorporate the padding, in the example you provided, into its height. For example, if you had text 10px high and 20px padding on the top and bottom, the element would be 10px as the padding would get ignored, with adding a display type of block or inline-block this takes it into account and renders at a height of 50px.
I'm making a dropdown menu with only CSS, and it's not turning out easy the way I've done it. So far I've got an actual dropdown, but the width is the width of the parent element, which is too small for certain items to be displayed in one line.
I tried setting a manual width, but that just unaligns the whole thing and isn't pratical as the menu item could be much longer. Is there anyway of having a width that adapts to the content, without changing the parent width ?
All the site files are located here : http://dev.cuonic.com/bourree/
Index page : http://dev.cuonic.com/bourree/index.html
Stylesheet : http://dev.cuonic.com/bourree/css/style.css
Any help is appreciated, thanks :)
Here's a solution that doesn't use a fixed-width for the drop-downs.
First, add the following to the CSS for the links in the drop-downs:
#menu ul ul li a {
white-space: nowrap;
}
I also had to change #menu ul and #menu ul li to #menu > ul and #menu > ul > li, respectively, so that those CSS styles would apply only to the first level menu items.
Here's a basic reference about the use of > in CSS selectors. I think there are other spots in this example where it would help:
http://reference.sitepoint.com/css/childselector
Playing around in firefox/firebug I found that this combination seemed to produce the desired effect:
#menu ul ul li {
display: block;
float: left;
left: -34px;
position: relative;
width: 200px;
}
I am trying to make my first pure css/html dropdown menu but I was having a hard time getting the Hover function to work properly. I received great answers but this time, its all messed up and its not in the right spot. I am so lost at this point.
http://jsfiddle.net/X5Dbc/
position: absolute; or somthing like that...
i have a hunch it has somthing to do with positioning
the jsfiddle above is what i have after asking about the "Dropdown" effect..
Keep in mind I am still a novice when it comes to proper CSS. Any Advice or help making this menu work would be most appreciated! And constructive criticism is always welcome.
Your markup is not valid. IDs must be unique. ie you can't use the same ID on muiltiple elements. That's what class is for. There is no need to use IDs for this anyway.
#navwrap ul li ul {
display: none;
}
#navwrap ul li:hover ul {
display: block;
position: relative;
}
Move the :hover to the parent li
You can style the two ul seperately like this:
Top level:
#navwrap > ul { your styles ... }
Sublevel:
#navwrap ul ul { your styles ... }
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 3 years ago.
Improve this question
I have this menu:
home
Pictures
Picture 1
Picture 2
Sounds
Videos
I want Picture 1 and Picture 2 to be hidden except when I move the mouse over "Pictures"
You would have to use javascript here, CSS itself doesn't have any logic.
Set display property of picture 1 and picture 2 to none, then set it to block with javascript when mouse is over Picture.
With PrototypeJS you'd do something like
$("pictures").observe("mouseover", function(){ $("Picture 1").setStyle({display: "block"}) } )
$("pictures").observe("mouseout", function(){ $("Picture 1").setStyle({display: "none"}) } )
Because there's a distinct lack of information in your question, and despite my own comment to that question, I'm going to make a guess at your HTML and assume you're using a ul element to contain your list:
<ul>
<li>home</li>
<li>Pictures
<ul>
<li>Picture 1</li>
<li>Picture 2</li>
</ul></li>
<li>Sounds</li>
<li>Videos</li>
</ul>
If that's the case, then I'd suggest the following CSS:
ul ul {
display: none;
}
ul li:hover ul {
display: block;
}
JS Fiddle demo.
Given that I suspect you're trying to make some kind of menu structure (again, a wild guess based on the lack of information), I'm updating the above CSS to demonstrate a fly-out style CSS menu:
ul {
/* adjust to taste */
width: 6em;
}
ul ul {
display: none;
/* to more easily show the connection between the parent li and child ul
adjust to taste, of course */
background-color: inherit;
}
li {
/* to position the child ul element relative to its parent */
position: relative;
}
li:hover {
/* just to identify which li element is currently hovered */
background-color: #ffa;
}
li li:hover,
li:hover li:hover {
/* so the hovered li is differentiated from its parent ul's background
and the background of its grandparent li. Adjust to taste */
background-color: #dda;
}
ul li:hover ul {
/* so that it's visible on the page */
display: block;
position: absolute;
/* to be level with its parents top-edge */
top: 0;
/* so that the li appears on the right of the parent li */
left: 100%;
}
JS Fiddle demo.