Code seems to be correct, but simply doesn't work.
html of it
<div class="logo5">
<a class="underlogolink" id="expandlogonav" href="whatever.com" >
<div class="underlogotext alcenter">{{settings.underlogotext}}</div>
</a>
</div>
<div class="logo6" id="underlogonav">
<ul>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
<li>Test 5</li>
</ul>
</div>
and the css
#underlogonav {
height:0px;
overflow-y:hidden;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-ms-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}
#expandlogonav:hover ~ #underlogonav {
height:auto;
}
Could you please point me to where i went wrong.
#underlogonav is not a sibling of #expandlogonav.
You need to have a selector that actually matches the element.
You could hover over the div containing #expandlogonav instead.
NB: If you fix that, the transition still won't work because you can't transition to auto heights.
Related
I'm trying to create a mega-menu. I'm using a list element and some elements have divs inside.
This is what my HTML looks like:
<li class="list-item">
Marchés
<div class="sub-menu-wrap">
<ul class="sub-menu">
<li>Marché 1</li>
<li>Marché 2</li>
<li>Marché 3</li>
<li>Marché 4</li>
<li>Marché 5</li>
<li>Marché 6</li>
</ul>
</div>
</li>
The li with .list-item class has position:relative; and the .sub-menu-wrapper has position:absolute; and width:100%;
i need the .sub-menu-wrap to have a full screen width but it's only taking the li.list-item width (screenshot below).
I also tried left:0;right:0; for .sub-menu-wrap but nothing changed..
When recreating your code, the element positioned absolute does in fact take up 100% width when the width is set to 100%. Double check your syntax. See my snippet below, the element positioned absolute is taking up the full width.
.list-item{
position: relative;
background: lightcoral;
width: 100px;
}
.sub-menu-wrap{
position:absolute;
background-color: lightblue;
width: 100vw;
}
<li class="list-item">
Marchés
<div class="sub-menu-wrap">
<ul class="sub-menu">
<li>Marché 1</li>
<li>Marché 2</li>
<li>Marché 3</li>
<li>Marché 4</li>
<li>Marché 5</li>
<li>Marché 6</li>
</ul>
</div>
</li>
I am trying to make a menu with submenus. I wrote my HTML and it looks like:
<nav>
<ul>
<li>Home</li>
<li>Page 1
<ul>
<li>dropdown 1</li>
<li>dropdown 2</li>
<li>submenu
<ul>
<li>submenu 1</li>
<li>submenu 2</li>
<li>submenu 3</li>
</ul>
</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</nav>
I have a stylesheet linked to it, and it looks like:
nav ul {
display:inline-block;
position:relative;
list-style:none;
}
nav ul ul {
display:none;
}
nav ul li:hover > ul {
display:block;
}
For some reason the list is displayed as a block. I tried float:left, and it made no difference.
You have to to put display:inline-block for li elements:
nav li {
display:inline-block;
}
check here the example: http://jsfiddle.net/9y1uzqye/1/
You need to make the individual list items use block display, not the list itself.
I have a nested list, and I want to attach some buttons to each entry. But the alignment is very wired. See JSFIDDLE example here.
Basically I want all buttons positioned just like button1. What should I do?
you can add clear right to your li element or if you need more fine tuning for position, try this:
HTML (to correct yours)
<ul>
<li>test <button class='right'>button1</button></li>
<li>test <button class='right'>button2</button></li>
<li> <ul>
<li>test <button class='right'>button3</button></li>
<li>test <button class='right'>button4</button></li>
</ul></li>
<li><ul>
<li>test <button class='right'>button6</button></li>
<li>test <button class='right'>button6</button></li>
</ul>
</li>
</ul>
CSS
.right {
position:absolute; right:10px; top:2px;
}
li{ width:100%; position:relative; padding:5px 0;}
see fiddle
Add to your CSS:
li { clear: right; }
This will also work:
.right {
float: right;
clear: right;
}
Updated JSFiddle: http://jsfiddle.net/1ha04a3r/5/
the alignment is very wired because you are using "float:right" in css. remove it then it will work and you can use the css class to modify your list padding and position.
HTML Code
<ul>
<li>test <button class='right'>button1</button></li>
<li>test <button class='right'>button2</button></li>
<ul>
<li>test <button class='right'>button3</button></li>
<li>test <button class='right'>button4</button></li>
<ul>
<li>test <button class='right'>button6</button></li>
<li>test <button class='right'>button6</button></li>
</ul>
</ul>
</ul>
css
li{ width:100%; padding:2px auto;}
*you can use position relative
I have a simple list:
<ul>
<li>Test</li>
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
<li>Test6</li>
<li>Test7</li>
</ul>
I'd like to give all <li> a color of red except for the 5 + 6
http://jsfiddle.net/7yDGg/1/
Can this be done using only one selector?
Use css selector :not(target) to explicitly select which child is going to be excluded. replace the target with another selector.
We can combine selector :not() and :nth-child() to exclude specific elements.
For example in this case, we want to exclude the 5th and 6th element, then use this: :not(:nth-child(5)) and :not(:nth-child(6)).
ul li:not(:nth-child(5)):not(:nth-child(6)) {
color: red;
}
<ul>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
<li>Test 5</li>
<li>Test 6</li>
<li>Test 7</li>
</ul>
The easiest way is this:
ul li {
color: red;
}
ul li:nth-child(5), ul li:nth-child(6) {
color: black;
}
fiddle updated.
I have a menu element like:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ul>
<li>SubItem 1</li>
<li>SubItem 2</li>
<li>SubItem 3</li>
</ul>
</li>
<li>Item 4</li>
</ul>
The element is positioned absolutely. How can I center it without knowing its width (number of parent elements might change).
Regards,
Dave
I think what you're after is possible if you have a parent element to the ul:
<div class="example">
<ul>
<!-- lots of li's -->
</ul>
</div>
Then use the old school text-align trick that was used to center layouts:
.example {
text-align: center;
}
.example ul {
text-align: left;
display: inline-block;
}
See: http://jsfiddle.net/chippper/WK5Z4/