I am trying to create level 2 drop-drop down. I came bit close and stucked. Please assist me to complete it.
Here is the JsBin
li{list-style:none;line-height:30px;}
a{text-decoration:none;color:#c3c3c3;font-family:consolas;width:100%;}
a:hover{color:white;}
li{padding:5px;background-color:#5970B2;}
/*li*/a:hover{background-color:grey;}
ul#sddm{position:relative;}
ul#sddm ul{display:none;}
ul#sddm>li{float:left;}
ul#sddm>li:hover>ul
{white-space: nowrap;display:block;position:absolute;margin:0;padding:0;}
ul#sddm ul li:hover ul
{white-space: nowrap;display:block;margin-left:150px;
position:absolute;margin-top:0;padding:0;}
ul#sddm ul li:hover ul>li{}
It will be good for me, if someone explain what I was doing wrong..
Thanks in advance.
Here is the fiddle for demo http://jsfiddle.net/dineshswami/4pLt3/1/
Changes in css:
a{text-decoration:none;color:#c3c3c3;font-family:consolas; display:block;padding:2px;}
ul#sddm>li{float:left; position:relative;}
ul#sddm ul li:hover ul{white-space: nowrap;display:block;margin-left:150px;position:absolute;margin-top:0;padding:0;left:-2px;margin-top:-39px;}
Changes in html: I removed inline css
Problem: The problem was you was forcing the elements by giving inline css so they was not align properly where they want to be. Little changes in position where you mention absolute. So i change the left and top value you can see in css above.
As i mentioned the problem above, let me explain in detail:
To expand the the <a> tag to the entire width of <li> tag i just removed the css width: 100%; and add new css rules display:block;padding:2px;
To adjust the first drop down width i removed the entire inline css from html. so all elements are able to take entire width on basis of text.
To adjust the second level drop down i set the top and left properties to left:-2px;margin-top:-39px; Why i did this because there was a gap between in first level drop down and second level and margin-top to -39px because you have given line-height:30px; which is increasing the height so i have set the margin-top.
Change top and left properties to adjust
I have edited jsdin
Related
I have a multi-level drop down menu at http://www.theseymourgroup-comm.net/new/. If you hover over Properties, you will see the first drop down menu come down that includes Commercial and Development. But when you hover over Commercial, you will see that the next level with Active and Sold goes way out to the right. I right clicked that panel and chose inspect element but could not determine what I needed to change in the css to make it move over to hug the first drop down menu. Any help would be appreciated. Thanks
The element with the "Active" and "Sold" entries is absolutely positioned, but it doesn't have settings for top or left / right.
If you add this rule
.nav li ul ul {
left: 150px;
}
you'll come closer to what you want. (I leave the finetuning of that value to yourself...)
I think javascript have some problems. Menu Dropdown use css only.
This is my example. It's very simple for newbie
So I've been working on what I was helped with yesterday and I'm so close. My code is much cleaner now. I have 2 issues that still need resolving. I've been trying all morning and can't seem to get it.
I need to control of the height of the subnav. I had to change the height in "ul li a" to 100% from pixels so at least now it just wraps around the text, which is ok, but I will probably need to change that height eventually and don't want to do it by increasing the font size.
ANSWERED - I added a margin-down in % to the subnav and you'll see why based on the design. The problem with this is that once you slowly move the mouse over the white space the sub nav disappears. If you do it fast enough you can sometimes catch it. I had the same issue with the vertical spacers within the subnav but did some rearranging in the css and it seems to be fixed now. Any suggestions?
Can I have the single worded links center without compromising the vertical centering with the multi-worded links?
Is there a better way to add in "margins or buffers" instead of the "spacers" I'm using, or is this "okay"?
http://codepen.io/Compton/pen/iwKJm
--UPDATED CODEPEN--
http://codepen.io/Compton/pen/ufGCI
Thanks in advance.
The problem was caused by the margin you added to the .subnav class: while moving the mouse from the upper list item to the sub list, the mouse had to move over a gap of 0.333% space resulting in a lost focus (or lost hover-effect). I updated your code and removed the unnecessary spacers, the updated version can be found here:
http://codepen.io/anon/pen/hzAaD
Referring to your original code, change your CSS as follows:
.subnav ul li {
margin: 0;
margin-top: 3px;
}
.subnav {
width:100%;
}
For point four, you don't need to add an empty list item for every "space" between each list item, this is bad practice as a list item is meant to actually be used for something, not empty space!
Instead, why don't you simply amend your ul li class so that you add a margin-right property:
ul li {
float:left;
width: 14%;
display:block;
**margin-right: 5px;**
text-align:center;
}
This will achieve the same effect as having those spaces so you can remove them from your html.
i have this menu schema:
<nav>
<ul>
<li>home</li>
<li>coleção</li>
<li>downloads</li>
<li>contato</li>
</ul>
</nav>
My LI is float:left so, the itens are side by side. i want when i hover the a:hover my background LI, and a color changes.
See this fiddle: http://jsfiddle.net/56wUm/
If you hover only on li, the link dont work and the a dont change the color!
ty for help!
If you still need help, I would suggest adding the padding to the a element in css rather than li. For example something like this: http://jsfiddle.net/MGRBS/2/
That way the link takes up the entire block space, Good luck. :D
You should prefer using CSS Sprites to happen that. refer to these links
vid link
http://css-tricks.com/css-sprites/
To fix exactly what is going on, you need to change your a:hover rule slightly:
ul li:hover a { color: #fff }
See: http://jsfiddle.net/56wUm/4/
However, in terms of usability, I think you'd be better off making the links take up all of the menu space, making a large target.
You want to move some of that CSS from the A to the LI. The goal is to get the A to butt right up against the LI so there's no gap. You just want to use the LI's for their floating property, think of them like TDs in a TABLE. They should have no real style of their own.
Referencing this fiddle
I want to color the background of the LI being hovered over. However it seems to set the class on the entire set of LI elements (not just the hovered one).
Can someone see what the issue is here?
just do this:
.parentSelectorBox li:hover
{
background-color:red;
}
you don't need js to achieve hover effect. CSS will be fine.
This is because you anchor your JS to the whole list.
See that.
I don't remove all JQuery stuff, but only what set to hover your li class.
I suggest to remove JS that know is useless
I didn't know how else to phrase the question, but I'll try to explain through code
<ul>
<li><span>1</span><li>
<li><span>2</span><li>
<li><span>3</span><li>
<li><span>4</span><li>
</ul>
ul{ width:90px}
ul li{width:30px; float:left; position:relative;}
ul li:hover span{ position:absolute; width:60px;}
Now, when you hover on list one, its span would cover list 2, and list 2 would cover list 3. Once you hover over the third list, its span would run over the ul element. So is there a way to make the third span expand from right to left? So at the moment the spans starting point (as I understand it) is the top-left corner of the list. Is there a way to make it start from right. So the extra 30px expand to the left, not to the right?
first,you closed the LI tag incorrectly.I execute the same code as yours.but when i hovered any span nothing happened and it is regular and correct.i think you mean something like jquery accordian plugin or something lick that.maybe you can do that with jquery instead of css in this issue.If you need its code comment me.good luck