So, I have this list where only the first item in the list is visible. I want to be able to see other items when I hover on the first item. bellow is my code but it doesn't work. After hovering, nothing happens.
This is the list:
#manage {
float: right;
padding: 0px;
margin: 0px;
}
#manage li {
width: 100px;
height: 30px;
background-color: Aqua;
text-align: center;
list-style-type: none;
}
#header ul a {
font-size: 25px;
font-weight: normal;
padding: 0px;
margin: 0px;
text-decoration: none;
color: White;
}
.sub {
margin-top: 3px;
display: none;
}
li:hover .sub {
display: block;
}
<ul id="manage">
<li>managment
</li>
<li class="sub">Add
</li>
<li class="sub">Edit
</li>
<li class="sub">Account
</li>
</ul>
One minor adjustment to your CSS can get this to work.
If you target your first li for the hover, not only does the current CSS selector attempt to select child elements rather than sibling elements, but your elements are going to immediately disappear when you hover over any of the now visible li elements, so re-target your CSS selector to your parent ul#manage element.
#manage:hover .sub
{
display:block;
}
#manage
{
float:right;
padding:0px;
margin:0px;
}
#manage li
{
width:100px;
height:30px;
background-color:Aqua;
text-align:center;
list-style-type:none;
}
#header ul a
{
font-size:25px;
font-weight:normal;
padding:0px;
margin:0px;
text-decoration:none;
color:White;
}
.sub
{
margin-top:3px;
display:none;
}
#manage:hover > .sub
{
display:block;
}
<ul id="manage">
<li>managment</li>
<li class="sub">Add</li>
<li class="sub">Edit</li>
<li class="sub">Account</li>
</ul>
Try adding those list items in an unordered list inside the first list item
<ul id="manage">
<li>managment
<ul class="sub">
<li>Add</li>
<li>Edit</li>
<li>Account</li>
</ul>
</li>
</ul>
And in your css
.sub
{
margin-top:3px;
display:none;
}
li:hover .sub
{
display:block;
}
Your mistake is in the last rule:
li:hover .sub
Try instead:
ul:hover li.sub
Related
I am trying to create a dropdown menu with CSS. When I hover on menu item, it doesn't work as expected. It does not show any categories below that item, I don't know why.
I do not want to use JavaScript, I want to use only pure css.
https://jsfiddle.net/3dovsL0g/
*{
margin:0px;
padding:0px;
}
#container ul{
list-style:none;
}
#container ul li{
background-color:#3c3e94;
width:150px;
border:1px solid white;
height:50px;
line-height: 50px;
text-align:center;
float:left;
color:white;
font-size:18px;
position:relative;
}
#container ul ul{
display:none;
}
#container ul li:hover{
background-color:#388222;
}
#container ul li:hover > ul{
display:block;
}
#container ul ul ul{
transform:translateX(100%);
top:0px;
position:absolute;
}
h4{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
<div id="container">
<ul>
<li><h4>Home</h4></li>
<li><h4>About</h4></li>
<li><h4>Entertainment</h4></li>
<ul>
<li><h4>Hollywood</h4></li>
<li><h4>Jollywood</h4></li>
<ul>
<li><h4>steve</h4></li>
<li><h4>jobs</h4></li>
<li><h4>john</h4></li>
</ul>
<li><h4>Bollywood</h4></li>
</ul>
<li><h4>Contact</h4></li>
</ul>
</div>
You'll need to place sub-menus inside the hovering elements, so that they are their child elements and then simply use class to target them. Here try this.
.hasSub:hover .sub-menu{
display: block !important;
}
.hasSub1:hover .sub-menu1{
display: block !important;
}
*{
margin:0px;
padding:0px;
}
#container ul{
list-style:none;
}
#container ul li{
background-color:#3c3e94;
width:150px;
border:1px solid white;
height:50px;
line-height: :50px;
text-align:center;
float:left;
color:white;
font-size:18px;
position:relative;
}
#container ul ul{
display:none;
}
#container ul li:hover{
background-color:#388222;
}
#container ul ul ul{
transform:translateX(100%);
top:0px;
position:absolute;
}
h4{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.hasSub:hover .sub-menu{
display: block !important;
}
.hasSub1:hover .sub-menu1{
display: block !important;
}
<div id="container">
<ul>
<li><h4>Home</h4></li>
<li><h4>About</h4></li>
<li class="hasSub"><h4>Entertainment</h4>
<ul class="sub-menu">
<li><h4>Hollywood</h4></li>
<li class="hasSub1"><h4>Jollywood</h4>
<ul class="sub-menu1">
<li><h4>steve</h4></li>
<li><h4>jobs</h4></li>
<li><h4>john</h4></li>
</ul>
</li>
<li><h4>Bollywood</h4></li>
</ul>
</li>
<li><h4>Contact</h4></li>
</ul>
</div>
and the fiddle: https://jsfiddle.net/kpdwf9th/1/
Use this code , and change it menu with dropDown
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
You need to nest your <ul> tags within each <li> element. Semantically, sub items should be children to their parents.
.nav { /* style nav bar */
display: flex;
color: #fff;
list-style: none;
padding: 0;
}
.nav li { /* style ALL li tags */
position: relative;
padding: 12px;
background-color: #333;
}
.nav li > ul { /* hide all ul tags at first */
display: none;
list-style: none;
padding: 0;
position: absolute;
z-index: 1;
}
.nav li:hover > ul { /* show ul tags when parent li is hovering */
display: block;
}
.nav li > ul > li > ul { /* move 3rd layer ul to the right */
left: 100%;
top: 0;
}
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Entertainment
<ul>
<li>Hollywood</li>
<li>Jollywood
<ul>
<li>steve</li>
<li>jobs</li>
<li>john</li>
</ul>
</li>
<li>Bollywood</li>
</ul>
</li>
<li>Contact</li>
</ul>
I've got 5 li on my page.
One of theme (the third) is higher than the other. I would like them to horizontally align to the center of this biggest LI. However, it's aligning on the top of it.
I've tried to use "Vertical-align: middle" but it doesn't work.
Here is my actual code:
<link rel="stylesheet" href="style2015.css" />
<div id="menu">
<ul>
<li>Portfolio
<ul>
<li>Sous-item 1</li>
<li>Sous-item 2</li>
<li>Sous-item 3</li>
</ul>
</li>
<li>Projets
</li>
<li id="logo"></li>
<li>A propos</li>
<li>Contact</li>
</ul>
</div>
Css:
#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
#menu li {
float:left;
margin:auto;
padding:0;
background-color:black;
display: inline;
vertical-align: middle;
}
#menu li a {
display:block;
width:100px;
color:white;
text-decoration:none;
}
#menu li a:hover {
color:#FFD700;
}
#menu ul li ul {
display:none;
}
#menu ul li:hover ul {
display:block;
}
#menu li:hover ul li {
float:none;
}
#menu li ul {
position:absolute;
}
#menu {
height:30px;
}
/* Logo */
#logo{
height: 190px;
width: 266px;
background-color:black;
}
#menu ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
width: 700px;
/* some fixed width so, menu doesn't fall on next line*/
}
#menu li {
/* float: left; you can't align a floated element easily */
margin: auto;
padding: 0;
background-color: black;
display: inline-block;
vertical-align: middle;
}
#menu li a {
display: block;
width: 100px;
color: white;
text-decoration: none;
}
#menu li a:hover {
color: #FFD700;
}
#menu ul li ul {
display: none;
}
#menu ul li:hover ul {
display: block;
}
#menu li:hover ul li {
float: none;
}
#menu li ul {
position: absolute;
}
#menu {
height: 30px;
}
/* Logo */
#logo {
height: 190px;
width: 266px;
background-color: black;
}
<div id="menu">
<ul>
<li>Portfolio
<ul>
<li>Sous-item 1
</li>
<li>Sous-item 2
</li>
<li>Sous-item 3
</li>
</ul>
</li>
<li>Projets
</li>
<li id="logo"></li>
<li>A propos
</li>
<li>Contact
</li>
</ul>
</div>
If i got your question correct, then this is what you need to do. I have just made the required changes, rest of code is all yours.
I have a dropdown list item in my navbar and can't get the dropdown section to align underneath the parent link. I am trying to use just css and know I've done it before, it's just stumping me at the moment. None of the other examples I've come across use the same menu format so it's been troubling trying to force fit pieces of code. Please help me with this easy solution
HTML
<div id="navbar">
<li>Home</li><!--
--><li>Link2</li><!--
--><li>Link3</li><!--
--><li><a href="#">Link4
<ul>
<li>SubLink1</li><br />
<li>SubLink2</li><br />
<li>SubLink3</li><br />
<li>SubLink4</li>
</ul>
</a></li><!--
--><li>Link5</li>
</div>
CSS
#navbar {
width:75%;
margin:0px auto;
text-align:right;
position:relative;
top:218px;
}
#navbar li {
list-style:none;
display:inline;
position:relative;
}
#navbar a {
background-color:#862D59;
font-size:18px;
width:60px;
margin:0px;
padding:10px 15px;
color:#FFF;
text-decoration:none;
text-align:center;
}
#navbar a:hover {
background-color:#602040;
border-bottom:solid 4px #969;
}
#navbar li ul {
display:none;
}
#navbar li:hover ul {
position:absolute;
display:block;
}
Working Example
https://jsfiddle.net/o6Ldutp5/
Firstly, you should use a reset css of some kind to remove the default margin / padding attached to ul & li.
Then validate your HTML, it contained a number of errors such as missing the opening ul etc.
Then it's just a matter of using position:absolute and appropriate values.
top:100% will place the menu directly below the li parent (with position:relative) regardless of the height of the li.
left:0 will align the left edge of the submenu to the left side of the parent li.
#navbar {
margin: 0px auto;
text-align: right;
}
ul,
li {
margin: 0;
padding: 0;
}
#navbar li {
list-style: none;
display: inline-block;
position: relative;
}
#navbar a {
background-color: #862D59;
font-size: 18px;
width: 60px;
margin: 0px;
padding: 10px 15px;
color: #FFF;
text-decoration: none;
text-align: center;
display: block;
}
#navbar a:hover {
background-color: #602040;
border-bottom: solid 4px #969;
}
#navbar li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
}
#navbar li:hover ul {
display: block;
}
<div id="navbar">
<ul>
<li>Home
</li>
<li>Link2
</li>
<li>Link3
</li>
<li>Link4
<ul>
<li>SubLink1
</li>
<li>SubLink2
</li>
<li>SubLink3
</li>
<li>SubLink4
</li>
</ul>
</li>
<li>Link5
</li>
</ul>
</div>
I've written my own minimal CSS without the styling, try replacing your whole CSS with this -
I've also edited your HTML by removing the comments and <br /> tags
div#navbar li {
display: inline-block;
}
div#navbar li ul {
width: 200px;
position: absolute;
display: none;
top: 10px;
}
div#navbar li ul li {
display: block;
width: 150px;
}
div#navbar li:hover ul {
display: block;
}
ul,ol,li {
margin-left: 0;
padding-left: 0;
}
Here is the fiddle
I am creating a vertical navigation menu using ul and li I want to make span the full width of ul so I can have underline for each menu item (like this site (http://www.steffenallen.com/index.php))
However, there is a space in li that prevents it from spanning across the parent ul. Could someone tell me how the above website did it? Or, what I need to do?
<nav>
<ul class='menu'>
<li class="menuItem">
About
</li>
<li class="menuItem"> Album
<ul class="submenu">
<li class="submenu-Item">Nepal </li>
<li class="submenu-Item">Seattle</li>
<li class="submenu-Item">South Korea</li>
</ul>
</li>
<li class="menuItem"> Contact </li>
<!-- <li> </li> -->
</ul>
My CSS is
ul,li{
list-style: none;
display: block;
}
ul.menu{
width: 170px;
/*position: absolute;*/
/*width: 100%;*/
/*margin-left: -20px;*/
border: 1px solid orange;
}
ul.submenu{
/*position: absolute;*/
/*left: -999px;*/
/*visibility: hidden;*/
display: none;
}
li{
width:140px;
margin: 0;
padding: 0;
/*width:100%;*/
border-left: 1px blue solid;
border-right: 1px blue solid;
}
span{
display: block;
}
li a, li span {
/*width: 170px;*/
/*width: 100%;*/
border-bottom: #cbcbcb 1px solid;
}
li.menuItem, li.submenu-Item{
text-align: right;
margin: 1em 0em 1em 0em;
}
li.menuitem > a{
color: #808080;
}
li a:hover{
color: steelblue;
}
li.menuItem a.current{
background-color: orange;
}
ul.menu:first-child{
margin-top: 0
}
First things first, your CSS is not well-written and hence a little difficult to understand.
The main problem in your code happens to be the default CSS that is being applied. You can remove that as follows:
ul, li {
margin: 0;
padding: 0;
}
However, I'd suggest you simplify your CSS code as follows. This will still achieve what you are looking for all the while making your code more elegant and easily readable. Please see the code below :
ul, li {
margin:0px;
padding:0px;
}
ul.menu {
border: 1px solid Orange;
width:200px;
}
ul.menu li {
display:block;
list-style-type:none;
}
ul.menu li a {
border-bottom:1px solid #ccc;
display:block;
text-align:right;
text-decoration: none;
}
ul.menu li ul {
display:none;
}
ul.menu li:hover > ul {
display:block;
}
ul.menu li ul li:last-child {
border-bottom:none;
}
See this working below :
ul, li {
margin:0px;
padding:0px;
}
ul.menu {
border: 1px solid Orange;
width:200px;
}
ul.menu li {
display:block;
list-style-type:none;
}
ul.menu li a {
border-bottom:1px solid #ccc;
display:block;
text-align:right;
text-decoration: none;
}
ul.menu li ul {
display:none;
}
ul.menu li:hover > ul {
display:block;
}
ul.menu li ul li:last-child {
border-bottom:none;
}
<nav>
<ul class='menu'>
<li class="menuItem"> About
</li>
<li class="menuItem"> Album
<ul class="submenu">
<li class="submenu-Item">Nepal
</li>
<li class="submenu-Item">Seattle
</li>
<li class="submenu-Item">South Korea
</li>
</ul>
</li>
<li class="menuItem"> Contact
</li>
<!-- <li> </li> -->
</ul>
Hope this helps!!!
On the left side there is the default margin/padding of ULs, so just remove that. It's 40px and depends on browser if margin or padding is used.
ul, li {margin-left: 0; padding-left: 0;}
The space on the right side is caused by your widths, list has 170px, items just 140px.
http://jsfiddle.net/8q9chvbh/
I having some problems with the hover effect on the full width of each of my drop down menu items. I want each items background color to change. At the moment, I can only get the width of the text hovered, not the width of the drop down.
http://jsfiddle.net/7AXZR/
Thanks!
The HTML:
<div id="nav">
<ul>
<li><img src="images/kranz3.png" alt="kranz"/>COMPETE</li>
<li><img src="images/thumb3.png" alt="thumb"/>SCORE</li>
<div id="logolist"><li><img src="images/logorz.png" width="175em" /></li></div>
<li><img src="images/shopnav.png" alt="bag"/>SHOP</li>
<ul id="more-dropdown"><li><img src="images/morenav2.png" alt="more"/>MORE<ul>
<div id="dropdown-links">
<li>Print your own art</li>
<li>How it works</li>
<li>About Causes</li>
<li>About our products</li>
<li>About us</li>
<li>Help & Feedback</li>
<li>Terms of Service</li>
<li>Privacy</li></ul>
</div>
</li>
</ul>
</div>
<div class="clear">
</div>
The CSS:
#nav {
position:relative;
background:#ffffff;
width:100%;
height:0.2em:
overflow:visible;
margin-top:-2em;
font-family:Cusmyrb;
font-size:75%;
}
#logolist {
position:absolute;
padding-top:2em;
width:150px;
left:50%;
margin-left:-90px;
margin-top:-7%;
}
#nav ul {
list-style-type:none;
}
#nav li {
display:inline;
float:left;
width:20%;
margin-left:2%;
margin-right:2%;
margin-top:3%;
text-align:center;
}
#nav a {
display:block;
margin-right:0% auto;
padding-left:0% auto;
color:#343234;
text-decoration:none;
}
#nav a:hover {
color:#5020B8;
}
#nav a:active {
color:#5020B8;
}
.clear {
clear:both;
}
#more-dropdown {
margin: 0;
padding: 0;
height:0;
}
#more-dropdown li {
list-style: none;
float: left;
}
#dropdown-links li a {
float:left;
display: block;
font-family:Cusmyr;
font-size:14px;
background-color:#797A7D;
color:#797A7D;
text-decoration: none;
margin-top:0.5em;
margin-left:1em;
}
#dropdown-links li a:hover {
float:left;
display: block;
font-family:Cusmyr;
font-size:14px;
background-color:#01A07E;
color:#797A7D;
text-decoration: none;
margin-top:0.5em;
margin-left:1em;
}
#more-dropdown li ul {
display: none;
width: 6em; /* Width to help Opera out */
background-color:#797A7D;
border:1px solid white;
}
#more-dropdown li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#more-dropdown li:hover li {
float: none;
background-color:#01A07E;
}
#more-dropdown li:hover li a {
color: #ffffff;
}
#more-dropdown li li a:hover {
}
switch
#nav a:hover
to
#nav:hover a
edit:
first: your <a> elements in the <li> elements have atop and left margins so they do not fill up the entire list item
second: the #nav li selector applies also to the list item in the dropdown list and you don't want them to float. This is because then the surrounding list items have height 0
I removed the float except for the first list item:
new fiddle:
http://jsfiddle.net/PZGLz/