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.
Related
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/
For some reason I cant get my pure css drop menu to work. I have tried everything I can think of but to no avail. I know it has to be something small or I am missing a descendant selector or something. Can anyone figure out this problem.
HTML
<div class="section navi">
<div class="row">
<div class="col_06">
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Practice Areas</li>
<li>Mediation & Arbitration</li>
<li>Attorneys</li>
<li>Offices</li>
<li><a href="/"><span>▼</span>More
<ul class="subNav"></a>
<li><a>News & Accolades</a></li>
<li><a>Careers</a></li>
<li><a>Administration</a></li>
<li><a>Disclaimer</a></li>
<li><a>Community</a></li>
<li><a>The Harmonie Group</a></li>
<li><a>Reported Cases</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
CSS
#nav ul{
background:#fff; <span class="code-comment">/* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */</span>
background:rgba(255,255,255,0); <span class="code-comment">/* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */</span>
list-style:none;
position:absolute;
left:-9999px; <span class="code-comment">/* Hide off-screen when not needed (this is more accessible than display:none;) */</span>
}
#nav ul li{
padding-top:1px; <span class="code-comment">/* Introducing a padding between the li and the a give the illusion spaced items */</span>
float:none;
}
#nav ul a{
white-space:nowrap; <span class="code-comment">/* Stop text wrapping and creating multi-line dropdown items */</span>
}
#nav li:hover ul{ <span class="code-comment">/* Display the dropdown on hover */</span>
left:0; <span class="code-comment">/* Bring back on-screen when needed */</span>
}
#nav li:hover a{ <span class="code-comment">/* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */</span>
background:#6b0c36;
text-decoration:underline;
}
#nav li:hover ul a{ <span class="code-comment">/* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */</span>
text-decoration:none;
}
#nav li:hover ul li a:hover{ <span class="code-comment">/* Here we define the most explicit hover states--what happens when you hover each individual link. */</span>
background:#333;
}
All those <span>elements in your CSS are breaking it. HTML elements ruin your CSS. To comment use a /*I am a comment*/ Remove all of the <span>'s and your drop down works great:
#nav ul{
background:#fff;
background:rgba(255,255,255,0);
list-style:none;
position:absolute;
left:-9999px;
}
#nav ul li{
padding-top:1px;
float:none;
}
#nav ul a{
white-space:nowrap;
}
#nav li:hover ul{
left:0;
}
#nav li:hover a{
background:#6b0c36;
text-decoration:underline;
}
#nav li:hover ul a{
text-decoration:none;
}
#nav li:hover ul li a:hover{
background:#333;
}
JSFIddle Demo
You have HTML code in your CSS. Remove the tags.
I am working on a HTML/CSS drop down menu and now whenever I hover my mouse over the top of the menu not every entry is showing in the drop menu. The top one or two entries are always missing. Here is my HTML:
<!-- Navigation Bar -->
<ul id="navi">
<li>Engines
<ul>
<li>DiniJS</li>
<li>Foxen2D</li>
<li>Vivon3D</li>
</ul>
</li>
<li>Team
<ul>
<li>Rob Myers</li>
<li>Nate Mast</li>
</ul>
</li>
<li>Contact
<ul>
<li>Email</li>
<li>Twitter</li>
</ul>
</li>
</ul>
and here is the CSS:
#navi ul {
list-style:none;
margin:0px;
padding:0px;
}
#navi li {
float:left;
width:120px;
padding-top: 13px;
padding-bottom:8px;
background-color:black;
text-align:center;
font-family:"Courier New";
}
#navi li:hover {
background-color:#303030;
}
#navi li ul li {
float:none;
width:116px;
text-align:left;
padding-left:4px;
border-top:1px solid #303030;
display:none;
font-size:85%;
position:absolute;
z-index:2;
}
#navi li:hover ul li {
display:block;
}
#navi a {
text-decoration:none;
color:red;
}
I am open to any Javascript or JQuery suggestions if that is a better way to go about fixing this. Thank you.
Your problem is that all of the submenu items are stacking one on top of another. Simply moving position: absolute; from the #navi li ul li block to a new #navi li ul block should fix this.
When using nested list items. use class names to target. for your menu use class="sub"
for submenu (ul) and set display none and absolute for the sub ul and not for the li.
I am trying to change the background colour of an anchor element when it's in a hover state, the problem is I am not able to achieve this with style I have below.
jsfiddle
http://jsfiddle.net/fwP6g/
css
.dropdown ul{
margin:0; padding:0; float:left; width:100%;
}
.dropdown ul li{
list-style:none; float:left; width:100%;
}
.dropdown ul li a{
float:left; width: 265px; height:20px; padding:5px;
padding-top:10px; color:#000; font-size:12px;
border-bottom:1px dotted #666; background-color:#FFF;
}
.dropdown ul li a:hover{
background-color:#F80101; !important
}
.dropdown ul li:last-child a{
border-bottom:none;
}
.dropdown ul li a#pink{
background-color:#FFE8E8;
}
html
<div class="dropdown">
<ul>
<li>Orders</li>
<li>Favourites</li>
<li>Account</li>
<li>Settings</li>
</ul>
</div>
I'm confused, I don't why this is not working, any help would be appreciated.
The !important needs to go before the closing ;.
.dropdown ul li a:hover {
background-color:#F80101 !important;
}
jsFiddle example
It's not semantically correct to have two elements with the same id. Also, using ids for your selector gives the rule a very high precedence, which is why you need to use !important.
I would suggest giving the last 2 list item links a class of pink instead of an id.
Then you would just need to declare the .pink rule before the :hover rule. Since both rules have the same precedence, and the :hover rule comes after, it will override the .pink rule.
http://jsfiddle.net/fwP6g/2/
HTML
...
<li><a href="/account" class='pink'>Account</a></li>
<li>Settings</li>
...
CSS
.dropdown ul li a.pink{
background-color:#FFE8E8;
}
.dropdown ul li a:hover{
background-color:#F80101;
}
Change your id="pink" to class="pink", than in your css add this to your hover .dropdown ul li a.pink:hover
Add this:
false:
.dropdown ul li a:hover{
background-color:#F80101; !important
}
true:
.dropdown ul li a:hover{
background-color:#F80101 !important;
}
I am trying to make a CSS based nav bar that converts a UL/LI list (including sub UL/LI lists that display on hover) into a horizontal nav bar and a sub horizontal nav bar. My current implementation (see picture) works except the sub list is using position:absolute to get its position below the hovered element. I believe that is the source of my problem, as the absolute positioned sub menu doesnt respect the edges of the container, so if the browser gets too small it bleeds off the edge of the container while the top level menu wraps. The other problem i'm having is that it doesnt expand the page vertically when the top level menu wraps, so even though its taking up more space the paragraph following doesnt move down and gets overlapped.
Does anybody have any CSS tips or know of any good examples of a menu like the one I'm trying to make?
Link to image:
http://i47.tinypic.com/288tbn7.png
To this day, the article "Son of Suckerfish Dropdowns" by HTML Dog is still a classic on clean CSS menus with hover.
http://www.htmldog.com/articles/suckerfish/dropdowns/
Hey now create this menu easily used to ul li simply as like this
HTML
<ul class="menu">
<li>Home</li>
<li>Home2</li>
<li>Home3
<ul class="submenu">
<li>Submenu</li>
<li>Submenu</li>
<li>Submenu</li>
</ul>
</li>
<li>Home4</li>
<li>Home5</li>
</ul>
Css
.menu{
display:block;
list-style:none;
border-bottom:solid 1px red;
float:left;
}
.menu > li{
float:left;
position:relative;
}
.menu > li + li{
border-left:solid 1px red;
margin-left:10px;
}
.menu > li > a{
display:block;
margin-left:10px;
}
.submenu{
display:none;
list-style:none;
position:absolute;
top:20px;
left:-39px;
white-space:nowrap;
}
.menu > li:hover .submenu{
display:block;
}
.submenu li{
display:inline;
}
.submenu li + li {
border-left:1px solid green;
margin-left:10px;
}
.submenu a{
display:inline-block;
vertical-align:top;
margin-left:10px;
}
Live demo
and now change css according to your layout this is basic step