How do I make a sub-menu appear when hovering over? I'm not seeing what's wrong with what I have - (but there's obviously something wrong since it doesn't work!)
HTML
<div>
<ul>
<li><a id="ALink" href="#">A</a></li>
<ul id="SubMenu">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<li><a id="BLink" href="#">B</a></li>
<li><a id="CLink" href="#">C</a></li>
</ul>
</div>
CSS
#SubMenu {
display: none;
width: 200px;
height: 200px;
background: #00C;
}
#ALink:hover #SubMenu {
display: block;
}
JSFiddle - From the code so far it is suposed to show a menu when hovering over option "A".
You have to have the submenu in that element, that will be linked with it:
<div>
<ul>
<li><a id="ALink" href="#">A
<ul id="SubMenu">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</a>
</li>
<li><a id="BLink" href="#">B</a></li>
<li><a id="CLink" href="#">C</a></li>
</ul>
</div>
The below code should work.
HTML
<ul class="topmenu">
<li class="submenu">A
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
</ul>
</li>
<li>B</li>
<li>C</li>
</ul>
CSS
The below code is to formatting and indentation.
ul.topmenu, ul.topmenu ul {
display: block;
margin: 0;
padding: 0;
}
ul.topmenu li {
display: inline;
list-style: none;
margin: 0;
padding-right: 1.5em;
}
The sub-menu is still showing up on the page, so you would have to hide it:
ul.topmenu li ul {
visibility: hidden;
}
Then all you need is for the menu to appear when the user hovers over the enclosing list item:
ul.topmenu li.submenu:hover ul {
visibility: visible;
}
Related
How do I access the style <li> elements so I can set their property to - list-style: none;?
<div class="dataTables_paginate paging_bootstrap pagination">
<ul>
<li class="prev disabled">? Previous</li>
<li class="active">1</li>
<li>2</li>
<li class="next">Next ? </li>
</ul>
</div>
.dataTables_paginate ul {
list-style: none;
margin: 0;
padding: 0;
}
.dataTables_paginate li {
display: inline-block;
}
<div class="dataTables_paginate paging_bootstrap pagination">
<ul>
<li class="prev disabled">? Previous</li>
<li class="active">1</li>
<li>2</li>
<li class="next">Next ? </li>
</ul>
</div>
You should use the ul selector to remove the list styling.
ul {
list-style-type: none;
}
To change just one set of ulgive the give your ul a class or ID.
I want my <li> elements to be horizontally aligned in each <ul> block, but each <ul> block to start on the left on a new line. The following will not work. The <ul>s are shown on the same line.
<style>
.fl {
float: left;
}
</style>
<ul>
<li class='fl'>Test 1</li>
<li class='fl'>Test 2</li>
</ul>
<ul>
<li class='fl'>Test 3</li>
<li class='fl'>Test 4</li>
</ul>
https://jsfiddle.net/bcLudxwj/
How do I fix it?
Method-1 :Using display: flex;
Add ul Css display: flex; and Remove inline Style in <ul style='display:block'> tag.Below Example see
ul
{
display: flex;
}
li.fl
{
float:left;
margin-right:10px;
list-style-type: none;
}
Live Demo Here
Snippet Example Below
ul
{
display: flex;
}
li.fl
{
float:left;
margin-right:10px;
list-style-type: none;
}
<ul>
<li class='fl'>Test 1</li>
<li class='fl'>Test 2</li>
</ul>
<ul >
<li class='fl'>Test 3</li>
<li class='fl'>Test 4</li>
</ul>
Method-2 :Using display: table;
Add ul Css display: flex; and Remove inline Style in <ul style='display:block'> tag.Below Example see
ul
{
display: table;
}
li.fl
{
float:left;
margin-right:10px;
list-style-type: none;
}
Live Demo Here
Snippet Example Below
ul
{
display: table;
}
li.fl
{
float:left;
margin-right:10px;
list-style-type: none;
}
<ul>
<li class='fl'>Test 1</li>
<li class='fl'>Test 2</li>
</ul>
<ul >
<li class='fl'>Test 3</li>
<li class='fl'>Test 4</li>
</ul>
The uls don't start in a new line as you have not cleared the floats for each ul block.
Also add a margin too to account for the space for the bullets of the un-ordered list - see demo below:
update fiddle: https://jsfiddle.net/xu9j3rsp/
.fl {
float: left;
margin: 15px;
}
ul:after {
content: '';
display: block;
clear: both;
}
<ul>
<li class='fl'>Test 1</li>
<li class='fl'>Test 2</li>
</ul>
<ul>
<li class='fl'>Test 3</li>
<li class='fl'>Test 4</li>
</ul>
The containers of the elements with float attribute need a "cap" to be correctly used. this cap is usually called "clearer". You need to create a class "clearer" like this in the css:
<style>
.clearer {
clear:both;
}
</style>
And put this <div class="clearer"></div> before each </ul>
Try This Code :
.fl{ float:left;clear:both;}
display inline-block for list items and display block for ul
ul li{
display:inline-block;
}
ul{
display:block;
}
You need to clear the ul:
ul {
overflow: hidden;
}
Hi I am looking to display my ordered list this:
so the first node and the first nested node appear on the top line and the remaining nested nodes appear under the 2nd column (under red).
Apples Red
Green
Yellow
Banana Yellow
html:
<ul class="lst" id="list_Apple">
<li>Apple</li>
<ul>
<li id="Apple">Red</li>
<li id="Apple">Green</li>
<li id="Apple">Yellow</li>
</ul>
</ul>
<ul class="lst" id="list_Banana">
<li>Banana</li>
<ul>
<li id="Banana">Yellow</li>
</ul>
</ul>
There is a slight mistake in your html. The <ul> tag should be inside a <li>.
HTML:
<ul class="lst" id="list_Apple">
<li>Apple</li>
<li>
<ul>
<li id="Apple">Red</li>
<li id="Apple">Green</li>
<li id="Apple">Yellow</li>
</ul>
</li>
</ul>
<ul class="lst" id="list_Banana">
<li>Banana</li>
<li>
<ul>
<li id="Banana">Yellow</li>
</ul>
</li>
</ul>
And add this CSS:
.lst {
clear: both;
}
.lst li {
list-style: none;
}
.lst > li {
float: left;
}
Here's a Fiddle: http://jsfiddle.net/rayg8ua9/1/
lithanks... Yes I missed the li tag.
.lst {
clear: both;
padding-top: 10px;
}
.lst li {
list-style: none;
width:100px;
}
.lst > li {
float: left;
}
Hi I have a basic menu for which I would like to add a submenu, that appears only when a certain menu link is hovered. Everything I have tried does not hide the submenu when a link is not hovered. Here is my code:
CSS
.navmenu{
float:right;
font-size: 13px;
font-weight:400;
text-transform: uppercase;
}
.navmenu li{
position: relative;
display: inline-block;
float: left;
}
.navmenu li a{
text-decoration:none;
color:#eee;
padding:15px 37px 19px 37px;
}
.navmenu li a:hover{
background:#36332e;
}
.active a{
background:#36332e;
}
HTML
<ul class="navmenu">
<li class="active">Home</li>
<li>About Us
<ul>
<li>Sub Link 1</li>
<li>SubLink 2</li>
</ul>
</li>
<li>Testimonials</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
You need to initially hide the menu:
.navmenu li ul { display: none; }
and then display it when you hover over the nav item:
.navmenu li:hover ul { display: none; }
You should also be careful about defining styles that target .navmenu li or .navmenu li a because those will also target your submenu. You should instead use child selectors, giving you more control over the non-submenu links, so your selectors will look like:
.navmenu > li
.navmenu > li > a
I've encorperated some of those changes into this JSFiddle to get you started:
http://jsfiddle.net/Wexcode/B5P26/
Edit:
This is actually going to lose it's hover state when you hover over the submenu links:
.navmenu > li > a:hover {
background:#36332e;
}
Instead, you should do this:
.navmenu ul { position: absolute; }
.navmenu > li:hover { background: #e6332e; }
.navmenu > li > a { display: block; }
Since the <ul> is nested inside the <li> element, you won't lose the hover state when you hover over the submenu links. I updated the fiddle to reflect these changes.
<ul class="navmenu">
<li class="active">Home</li>
<li>About Us
<ul>
<li>
Sub Link 1
<ul>
</li> <a href=# >hi hi hi</a>
<ul>
<li>hello hello hello</li>
<li>hello hello hello</li>
<li>hello hello hello</li>
</ul>
</li>
</li><a href=# >hi hi hi</a> </li>
</li> <a href=# >hi hi hi</a> </li>
</ul>
</li>
<li>SubLink 2</li>
</ul>
</li>
<li>Testimonials</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
I have 2 separate menu's. I want to display the links within menu #2 when hovering over certain buttons on Menu #1. I want to try and do this with CSS if possible. Some of the css I am using is below.
HTML:
<nav>
<ul>
<li>HOME</li>
<li>NEWS</li>
<li>FORUMS</li>
<li>GAMES</li>
<li>XECOM</li>
</ul>
</nav>
<div id="sub-menu-items">
<ul>
<li>Test 1</li>
<li>Test 2</li>
</ul>
</div>
CSS:
#sub-menu-items ul li {
list-style-type: none;
z-index: 99999;
margin-right: 15px;
padding-bottom: 8px;
padding-top: 8px;
display: none;
text-shadow: 2px 3px 3px #080808;
}
nav ul li:first-child:hover #sub-menu-items ul li {
display: inline;
}
how is this not working?
The sub-menu-items need to be a child of the li you are hovering. Thats what this selector means:
nav ul li:first-child:hover #sub-menu-items ul li
CSS drop down menus are done like this:
HTML
<ul>
<li>Parent Item
<ul>
<li>Sub item</li>
<li>Sub item</li>
</ul>
</li>
<li>Parent Item
<ul>
<li>Sub item</li>
<li>Sub item</li>
</ul>
</li>
</ul>
CSS
ul ul {
display: none;
}
ul > li:hover ul {
display: block;
}
You will need to nest the sub-menus within parent 'li'
Your code will be something like this:
<nav>
<ul class="parent-menu">
<li>HOME</li>
<li>NEWS
<ul class="sub-menu">
<li>Test 1</li>
<li>Test 2</li>
</ul>
</li>
<li>FORUMS</li>
<li>GAMES</li>
<li>XECOM</li>
</ul>
</nav>
Then you can style sub-menu ul & li (preferably position:absolute) and css can be:
.parent-menu li:hover .sub-menu { display:block}
The ':hover' state of an element can only affect its child elements. To make use of :hover to affect external elements you can make use of javascript.
The CSS in this line
nav ul li:first-child:hover #sub-menu-items ul li {display: inline;}
is looking for "#sub-menu-items ul li" inside the first "li" of "nav".
Depending on your layout you can achieve the desired effect only if you move the second menu inside the first menu.