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
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
It's always the little thing that get me unstuck. I'm trying to make a hover on a navigation element effect 3 elements. The background colour, the text colour, and the small arrow below the text.
The background colour is easy enough, but the text colour only changes when you hover over the actual text - not the whole block element (framed by the background colour). Also, I wanted to image swap the little arrow beneath the text as well. Example:
Here is the site:
MACI test website
I've read up on adjacent and sibling selectors - but I can't quite get it to do what i want. It's probably really obvious, but I can't see it at the moment!
Any help would be appreciated :)
Put the coloring on the link instead of the li, and make the link a block element to fill up the li area:
ul.menu a {
display:block;
background-color:#FFFFFF;
}
ul.menu a:hover {
background-color:#AE242A;
color:#FFFFFF;
}
Also, you could put the arrow image as a non-repeating background image for the link, and set a different one for the regular link and the hover link.
Another thought, have you tried:
ul.menu li.nav-links:hover a.nav {
color:#FFFFFF;
}
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 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
http://wilwaldon.com/itsbroken/templateleftnav.php
As you can see on the left navigation the link for Template 01 is highlighted green. The link underneath is also highlighted green.
I think the problem lies with the initial LI controlling the ul underneath somehow.
I need to keep the xhtml formatted exactly how it is right now and only change the CSS to fix this problem.
I'd appreciate any help you may be able to point me in the right direction, I'm pretty stuck at this point.
Thank you in advance!
The green background for the highlighted li element goes for the entire element, including the nested ul. To get around it, override the text and background color of the nested ul like this:
li.leftactive ul {
background-color: #E3DECA;
}
li.leftnav1b a {
color: #363;
}
You might want to tweak margins and/or padding as well, but this should get you started.