I am looking at this example of a only css generated drop down menu:
http://jsfiddle.net/XPE3w/7/
And I was wondering how can I make the items under the "About us" tab to be aligned from right to left.Now they look like that:
About us
|Menu items with different length|
I want it to look like that:
About us
|Menu items with different length|
Like this
demo
css
li ul {
display: none;
position:absolute;
right:0;
}
Just add right:0; to li:hover ul or to li ul
li:hover ul {
display: block;
position: absolute;
right:0;
}
working Fiddle
use the float:right in your css style.
li ul {
display: none;
position:absolute;
float:right;
}
Related
I'm building a navigation and inside of my ul list there is another sub-list:
<ul>
<li>Cooking
<ul>
<li>Fantasy</li>
<li>Meal</li>
<li>Difficulty</li>
</ul>
</li>
<li>other li</li>
</ul>
I basically want it so that every time I hover over the different li elements (fantasy-meal-difficulty) an icon at the bottom of the ul-list appears.
I'm using ul::after to place these icons. The only problem is that they should change when hovering a different li.
How should I select them?
Is there any kind of way to select the ul::after + li:nth-child(1)?
Also, I can't modify my HTML because I'm building a theme for WordPress.
looking for something like this? https://jsfiddle.net/txcbdu0f/1/
ul.menu li:after{
content:"";
width:10px;
height:20px;
display:inline-block;
background:#ccc;
position:absolute;
bottom:-50px;
left:0;
opacity:0;
}
ul.menu li:hover:after{opacity:1;}
ul.menu li:first-child:hover:after{background:#000;}
ul.menu li:nth-child(2):hover:after{background:#ccc;}
ul.menu li:last-child:hover:after{background:red;}
ul.menu{position:relative;}
I have updated your js fiddle for hover list:
https://jsfiddle.net/txcbdu0f/2/
ul ul.menu {
display: none;
}
ul > li:hover > ul.menu {
display: block;
}
Hope you are looking for this simple idea.
I'm trying to figure out with my drop-down list within my nav is not displaying. I
am also trying to understand how to i would render the drop-down list as a class and how it would be specified in the CSS to not get it confused with any of my of unordered lists. Can someone please help and possibly add a class to the dropdown list so i know how to display it?
Here is my code in Jfiddle:
https://jsfiddle.net/CheckLife/rzxxb2kb/4/
In your css you have:
/*Dropdown Nav */
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
position: absolute;
}
The problem here is that you're setting each individual "li" element to display none, so you're hiding each individual list item. If you show/hide the whole unordered list, then your elements will appear. Additionally, you probably want to remove position:absolute so that they stack vertically
/*Dropdown Nav */
ul li ul {
display: none;
}
ul li:hover ul {
display: block;
}
EDIT:
In order to address the issue of the list pushing all content down, I recommend not using an ul. Instead you could put each a tag in a div and do the following:
HTML:
<li onmouseover="newText()">Players
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
CSS:
.dropdown-content {
display: none;
position: absolute;
// The below was copied from your other css
background-color: #3b63d3;
width: 90px;
text-align: center;
border-right: 1px groove #141e38;
}
li:hover .dropdown-content {
display: block;
}
https://jsfiddle.net/rzxxb2kb/5/
Its the position: absolute; on ul li:hover ul li change it to position: relative;
/*Dropdown Nav */
ul li ul li{
display: none;
}
ul li:hover ul li {
display: block;
position: relative;
}
.clear {
clear: both;
}
W3Schools shows how to create Nav bars with drop down functionality
https://www.w3schools.com/css/css_dropdowns.asp
I am getting a problem with my project where our client has used a logo image inside the menu's ul li. He has used a class with li where the logo is placed but I cant use the class with it; I also do not want to use :nth-child because in future we may add a new menu element. I currently have an empty anchor inside the logo li. Is it possible in the CSS to select this anchor which is empty. Please help me.
Thanks in advance
Client Site: http://www.kangaroopartners.com/about/
My Site: http://kangaroopartners-2.hs-sites.com/test1
Demo http://jsfiddle.net/thwkav0e/
CSS and HTML:
ul {
display:block;
width:100%;
text-align:center;
list-style: none;
margin:0;
padding:0;
}
ul li {
display:inline-block;
padding: 10px;
}
ul li:nth-child(4), ul li:last-child {
background:red;
width:50px;
}
<ul>
<li>Hello1</li>
<li>Hello2</li>
<li>Hello3</li>
<li></li>
<li>Hello4</li>
<li></li>
</ul>
:empty selector should be what you are looking for.
ul li a:empty {
background:red;
width:50px;
display: inline-block;
height: 10px;
}
http://jsfiddle.net/thwkav0e/1/
This is my full code: https://jsfiddle.net/dv6gxtoh/2/
I want the dropdown box to expand and be the full width of it's content (so it doesn't have to drop things down a line) but I also don't want it to stretch the main dropdown button to the same width.
The best example I can give is something a bit like this:
http://i.stack.imgur.com/w3ym8.png
This is the CSS I am using:
* {
margin: 0;
padding: 0;
}
.click-nav ul {
position:relative;
display: inline-block;
}
.click-nav ul li {
position: relative;
list-style:none;
cursor:pointer;
display:inline-block;
}
.click-nav ul li ul {
position:absolute;
left:0;
right:0;
}
.click-nav ul .clicker {
position:relative;
color:black;
}
.click-nav ul .clicker:hover, .click-nav ul .active {
background:#196F9A;
}
.click-nav ul li a {
display:block;
padding:8px 10px;
background:#FFF;
color:#333;
text-decoration:none;
}
.click-nav ul li a:hover {
background:#F2F2F2;
}
/* Fallbacks */
.click-nav .no-js ul {
display:none;
}
.click-nav .no-js:hover ul {
display:block;
}
The closest I could get it to remove position:relative; from .click-nav ul which does the trick, except the dropdown menu doesn't sit under the button which opened it.
Any help would be appreciated.
Seems to me white-space : nowrap is what you need, i.e
.click-nav ul li a {
display:block;
padding:8px 10px;
background:#FFF;
color:#333;
text-decoration:none;
white-space: nowrap;
}
forked fiddle -> http://jsfiddle.net/j5ckepbm/
Check the shared fiddle..
you need to make few changes to your css, like adding and width/min-width to your dropdown.
white-space:nowrap
Click to see the fiddle, commented lines are mine changes
You may need to add one more class with a fixed width to get it done.
.click-nav ul li ul li {
width: 150px;
}
Here is a fiddle
Having a problem with my navigation bar. When it drops down it seems to keep pushing my classes named .banner-left and .banner-right.
ill put my code on JSfiddle as i'm doing this for a project and have to use Harvard referencing so sources back to here increase the plagiarism percentage even if the work isn't leached elsewhere.
Link: http://jsfiddle.net/wuqa5y87
You should set your dropdown's position to absolute.
UPDATED FIDDLE
nav ul ul {
display:none;
position: absolute; }
Can you try adding position:absolute to nav ul li:hover > ul
nav ul li:hover > ul {
display:block;
position:absolute;
}
Here's a link to an updated fiddle: looks like your original (missing rounded edges on last - but you can figure out how to get those back I am sure)
http://jsfiddle.net/wuqa5y87/2/
nav ul ul {
position: absolute;
}
nav ul ul li{
position: relative;
clear: both;
}
As the other folks said, you need absolute positioning on the UL element that is shown because that takes it out of the normal flow of the document.
I've updated your fiddle here
http://jsfiddle.net/ryanore/wuqa5y87/3/
You'll also need a little extra massaging to get it right
nav ul {
text-align:center;
margin:auto;
position: absolute;
}
nav ul li ul{
width: 175px;
}