i'm writing on my website and i've some problems with the following code (full code on codepen):
<section class="sidebar">
<ul class="sidebar-menu clearfix">
<li class="sidebar-menu-item">HOME</li>
<li class="sidebar-menu-item">PORTFOLIO</li>
<li class="sidebar-menu-item">BLOG</li>
<li class="sidebar-menu-item">ABOUT ME</li>
<li class="sidebar-menu-item">CONTACT</li>
</ul>
</section>
https://codepen.io/anon/pen/pdErVq
As you can see all the :after elements are aligned in the first row.
How can i expand the elements in the proper <li> tags?
Give position:relative to .sidebar-menu > li class.
.sidebar {
position: fixed;
background-color: #333;
opacity: 0.75;
width: 300px;
height: 100%;
left: -0px;
top: 0;
}
.sidebar-menu {
position: relative;
top: 100px;
padding-left: 20px;
}
.sidebar-menu > li {
color: #fff;
margin-right: 10px;
list-style: none;
font-size: 25px;
font-style: italic;
padding: 10px 5px;
cursor: pointer;
-webkit-transition: all 0.5s;
transition: all 0.5s;
position:relative;
}
.sidebar > ul > li:after {
content: "";
display: block;
position: absolute;
top: 10px;
right: 0;
background-color: rgba(250,250,250,0.5);
width: 0;
height: 37px;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.sidebar-menu > li:hover:after {
width: 280px;
}
<section class="sidebar">
<ul class="sidebar-menu clearfix">
<li class="sidebar-menu-item">HOME</li>
<li class="sidebar-menu-item">PORTFOLIO</li>
<li class="sidebar-menu-item">BLOG</li>
<li class="sidebar-menu-item">ABOUT ME</li>
<li class="sidebar-menu-item">CONTACT</li>
</ul>
</section>
Your li's need position: relative.
You can try this Demo
li{position:relative}
li a{position:absolute;}
I am added a tag in li
Related
I have a dropdown menu nested in a parent dropdown. The parent dropdown is set to overflow: hidden, and I use max-height to animate the height transition. So it must have overflow: hidden for that animation to work properly. The problem is now I have a child dropdown nested in that parent dropdown. Becuase the parent dropdown is overflow: hidden, so the child dropdown is hide by the parent dropdown.
My question is: Is there a way to animate the height of the parent dropdown and also show the child dropdown? I do not want to animate the opacity. I think for max-height to animate, we must set the dropdown to overflow: hidden, but this will hide all the child dropdown. Maybe there is another way?
<div class="nav">
<div class="nav-item">
Nav Item
<ul class="dropdown">
<li> LINK</li>
<li>
LINK
<ul class="inner-dropdown">
<li>link</li>
<li>link</li>
</ul>
</li>
<li> LINK</li>
<ul/>
</div>
</div>
body {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.nav-item{
width:100%
height:20px;
background:#56bcf9;
text-align:center;
font-family: 'Arial';
font-weight: 700;
padding: 30px 0;
cursor: pointer;
}
.nav-item:hover .dropdown{
max-height: 500px;
}
.dropdown{
width:500px;
background:#666;
position:absolute;
max-height: 0;
transition: max-height .5s ease-in;
overflow: hidden;
}
.dropdown li {
padding: 15px;
}
.inner-dropdown {
position: absolute;
background: pink;
width: 200px;
top: 60px;
left: 540px;
}
body {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.nav-item{
width:100%
height:20px;
background:#56bcf9;
text-align:center;
font-family: 'Arial';
font-weight: 700;
padding: 30px 0;
cursor: pointer;
}
.nav-item:hover .dropdown{
max-height: 500px;
}
.dropdown{
width:500px;
background:#666;
position:absolute;
max-height: 0;
transition: max-height .5s ease-in;
overflow: hidden;
}
.dropdown li {
padding: 15px;
}
.inner-dropdown {
position: absolute;
background: pink;
width: 200px;
top: 60px;
left: 540px;
}
<div class="nav">
<div class="nav-item">
Nav Item
<ul class="dropdown">
<li> LINK</li>
<li>
LINK
<ul class="inner-dropdown">
<li>link</li>
<li>link</li>
</ul>
</li>
<li> LINK</li>
<ul/>
</div>
</div>
By setting overflow: visible; In the dropdown class, the menu is set by giving the animation under the inner-dropdown menu.
body {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.nav-item{
max-width:500px;
background:#56bcf9;
text-align:center;
font-family: 'Arial';
font-weight: 700;
cursor: pointer;
padding:30px 0;
}
.nav-item:hover .dropdown{
visibility:visible;
max-height: 1000px;
}
.dropdown{
width:500px;
background:#666;
position:absolute;
max-height: 0px;
transition: all .5s ease-in;
overflow: visible;
top:60px;
padding:0;
visibility:hidden;
}
.dropdown li {
padding: 15px 0;
color:white;
}
.dropdown li:hover .inner-dropdown{
max-height:500px;
}
.dropdown li:hover .inner-dropdown li{
opacity: 1;
}
.inner-dropdown {
position: absolute;
background: red;
width: 200px;
top: 80px;
left: 500px;
max-height:0;
padding:0;
transition: all .5s ease-in-out;
}
.inner-dropdown li {
opacity: 0;
transition: all .5s ease-in-out;
}
<div class="nav">
<div class="nav-item">
Nav Item
<ul class="dropdown">
<li> LINK</li>
<li>
LINK
<ul class="inner-dropdown">
<li>link</li>
<li>link</li>
</ul>
</li>
<li> LINK</li>
<ul/>
</div>
</div>
So i ve been working on this for several hours.. i have a problem in the nav bar where the content refuses to go display: inline. Previous versions worked fine but were too disorganized , code wise. here is my code.
CSS:
body {
background-color: #5C7584;
margin: 0 auto;
//width: 1000px;
width: 100%;
margin-top: 10px;
}
#canvas {
width: 1000px;
margin: 0 auto;
background-color: white;
}
a {
color: #4086b6;
text-decoration: none;
}
///////////////////////////////////
ul, li {
list-style: none;
}
ul li {
//padding-right: 10px;
//padding-left: 10px;
//display: inline;
}
.parentClass {
display: inline;
//position: relative;
list-style: none;
//float: left;
}
.dropDown {
position: relative;
background-color: lightcyan;
display: block;
list-style: inherit;
//text-align: right;
//background-color: lightcyan;
width: auto;
height: 0px;
visibility: hidden;
opacity: 0;
-webkit-transition: all .25s;
-moz-transition: all .25s;
-ms-transition: all .25s;
-o-transition: all .25s;
transition: all .5s;
}
#linkline{
}
.parentClass:hover {
background-color: lightcyan;
}
.parentClass:hover .dropdown {
opacity: 1;
visibility: visible;
height: auto;
}
/////////////////////////////
#toplinks a {
//padding-left: 0px;
text-shadow: 1px 1px lightgrey;
}
#toplinks a:hover {
color: lightskyblue;
//border-radius: 50px 50px;
}
#toplinks a:active {
color: white;
}
#top {
height: 102px;
background-image: url("../assets/topbar_plain.png");
background-color: white;
opacity: .9;
z-index: 2;
position: relative;
}
#toplinks {
float: right;
width: 500px;
text-align: right;
padding-right: 30px;
padding-top: 70px;
}
#logo {
background-image: url("../assets/logo_plain.png");
width: 102px;
height: 33px;
float: left;
background-repeat: no-repeat;
margin-top: 40px;
margin-left: 80px;
}
HTML:
<div id="top" >
<div id="canvas">
<div id="toplinks">
<ul class="linkline">
<li id="indexx" class="parentClass">Overview
<ul></ul>
</li>
<li class="parentClass">Services
<ul class="dropDown">
<li class="c2"> DDoS Mitigation </li>
<li class="c1"> Server Hosting </li>
</ul>
</li>
<li class="parentClass">AboutUs
<ul class="dropDown">
<li class="c2"> Link 1 </li>
<li class="c1"> Link 2 </li>
<li class="c2"> Link 3 </li>
</ul>
</li>
</ul>
</div>
</div>
</div>
Try with:
display:inline-block
ul {
list-style: none;
}
li {
float: left;
display: block;
margin: 0 1em 0 0;
border: 1px solid purple;
}
<ul>
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
Hi, I simplified your code down to the lists and their styling which is what you need to fix. Make sure ul is list-style none and the li's in that list are float left display block and then style from there.
It looks like something strange is happening because of the <ul class="dropDown"> nested inside the <li class="parentClass">. Try this as a start:
.dropDown {
display: none;
}
.parentClass {
display: inline-block;
}
Try to change the parentClass like that.
.parentClass {
display: inline-block;
position: relative;
list-style: none;
float: left;
}
I am trying to implement a submenu with a border-left looking bar that transitions in height from 0 to 100% upon hover of the main nav element. For some reason the transition is not working. Any help?
http://codepen.io/matthewmorrisux/pen/addLZE?editors=110
<div class="container">
<nav class="menu">
<ul>
<li class="menu__item">Home</li>
<li class="menu__item">About<ul class="sub-menu">
<li class="sub-menu__item">Item 1</li>
<li class="sub-menu__item">Item 2</li>
<li class="sub-menu__item">Item 3</li>
</ul></li>
<li class="menu__item">Process</li>
<li class="menu__item">Contact</li>
</ul>
</nav>
</div>
.menu {
position: relative;
}
.menu__item {
position: relative;
display: inline-block;
padding: 20px;
}
.sub-menu {
position: absolute;
display: none;
}
.sub-menu:before {
content: '';
display: block;
position: absolute;
width: 2px;
height: 0px;
background: black;
transition: height 1s ease;
}
.menu__item:hover .sub-menu {
display: block;
}
.menu__item:hover .sub-menu:before {
content: '';
display: block;
position: absolute;
width: 2px;
height: 100px;
background: black;
transition: height 1s ease;
}
You are using the display property to toggle the visibility between none and block, this does not work well with transitions.
Instead, try hiding the menu and its content by setting the height to 0:
.sub-menu {
position: absolute;
display: block;
height: 0;
overflow: hidden;
}
Then your .sub-menu also needs a height:
.menu__item:hover .sub-menu {
display: block;
height: 100px;
}
http://codepen.io/anon/pen/addLPR?editors=110
Hi im trying to create a navigation bar which when you hover the li another list come out from the side to show other options. My problem I can get to align with the first li but I'm not sure how to do it with the rest of the list. At the moment the drop down list stays in the same position.
Im sure I haven't explained it well enough here is my code.
<body class="menu">
<header>
<nav class="menu-side">
<ul>
<li class="icon-home"><span>Home</span></li>
<li class="arrow"> <a class="star" href="#">England</a>
<ul>
<li><a class="ee" href="Premiership.html">Premiership</a>
</li>
<li>Championship
</li>
<li>League 1
</li>
<li>League 2
</li>
</ul>
</li>
<li class="arrow"> France
<ul >
<li id="r"><a class="ee" href="Unavailble.html">Ligue 1</a>
</li>
</ul>
</li>
<li class="arrow"> Germany
<ul>
<li><a class="ee" href="Unavailble.html">Bundesliga</a>
</li>
</ul>
</li>
<li class="arrow"> Italy
<ul>
<li><a class="ee" href="Unavailble.html">Serie A</a>
</li>
</ul>
</li>
<li class="arrow"> Spain
<ul>
<li><a class="ee" href="Unavailble.html">La Liga</a>
</li>
</ul>
</li>
</ul>
</nav>
</header>
</body>
https://jsfiddle.net/2zov6q2v/
Change margin of your lists:
nav ul ul {
height: auto;
display: none;
position:absolute;
background-color: #399077;
margin-left: 89.5%;
//top: 9%; delete this line
margin-top: -38px; //add this line
z-index:150;
}
jsfiddle
.menu {
position: relative;
left: 0;
}
.menu-open {
left: 0;
}
.menu-open .menu-side {
left: 0;
}
.menu-side,
menu {
-webkit-transition: left 0.2s ease;
-moz-transition: left 0.2s ease;
transition: left 0.2s ease;
}
.menu-side {
background-color: #333;
color: #fff;
position: fixed;
top: 0;
left: 0;
width: 210px;
height: 100%;
padding: 2px;
}
body {
display: block;
margin: 8px;
background: #f0f0f0;
}
nav ul {
background-color: #43a286;
/* overflow: hidden; <----------------- here */
color: white;
padding: 0;
text-align: center;
margin: 0;
width: 100%;
height: 100%;
-webkit-transition: max-height 0.4s;
-ms-transition: max-height 0.4s;
-moz-transition: max-height 0.4s;
-o-transition: max-height 0.4s;
transition: max-height 0.4s;
}
nav ul li {
display: block;
padding: 20px;
width: 80%;
text-align: center;
position: relative; /* <------------------ and here */
}
nav ul li:hover {
background-color: #399077;
}
nav ul .arrow:hover {
border-right: 10px solid white;
border-right-width: thick;
width: 79%;
}
nav ul ul {
height: auto;
display: none;
position: absolute;
background-color: #399077;
left: 89.5%;
top: 9%;
z-index: 150;
}
nav ul ul li {
display: block;
width: 75%;
text-align: center;
}
nav ul li:hover ul {
display: block;
width: 165px;
}
/*nav .ee:after {
content: '';
width: 0;
height: 0;
border-top: 8px solid black;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
position: absolute;
z-index: 1;
top: 0%;
left: 50%;
margin-left: -6px
} */
nav ul li a,
visited {
color: white;
font-family: 'CFJackStory-Regular', Helvetica, Arial, sans-serif;
display: block;
text-decoration: none;
}
nav ul ul li a:hover {
color: white;
font-size: 20px;
}
<body class="menu">
<header>
<nav class="menu-side">
<ul>
<li class="icon-home"><span>Home</span>
</li>
<li class="arrow"> <a class="star" href="#">England</a>
<ul>
<li><a class="ee" href="Premiership.html">Premiership</a>
</li>
<li>Championship
</li>
<li>League 1
</li>
<li>League 2
</li>
</ul>
</li>
<li class="arrow"> France
<ul>
<li id="r"><a class="ee" href="Unavailble.html">Ligue 1</a>
</li>
</ul>
</li>
<li class="arrow"> Germany
<ul>
<li><a class="ee" href="Unavailble.html">Bundesliga</a>
</li>
</ul>
</li>
<li class="arrow"> Italy
<ul>
<li><a class="ee" href="Unavailble.html">Serie A</a>
</li>
</ul>
</li>
<li class="arrow"> Spain
<ul>
<li><a class="ee" href="Unavailble.html">La Liga</a>
</li>
</ul>
</li>
</ul>
</nav>
</header>
</body>
Change this style
.menu{
position: relative;
left: 0;
}
.menu-open{
left: 0;
}
.menu-open .menu-side{
left: 0;
}
.menu-side, menu {
-webkit-transition: left 0.2s ease;
-moz-transition: left 0.2s ease;
transition: left 0.2s ease;
}
.menu-side{
background-color: #333;
color: #fff;
position: fixed;
top: 0;
left: 0;
width: 210px;
height: 100%;
padding: 2px;
}
body{
display: block;
margin: 8px;
background: #f0f0f0;
}
nav ul{
background-color: #43a286;
color:white;
padding: 0;
text-align: center;
margin: 0;
width: 100%;
height: 100%;
-webkit-transition: max-height 0.4s;
-ms-transition: max-height 0.4s;
-moz-transition: max-height 0.4s;
-o-transition: max-height 0.4s;
transition: max-height 0.4s;
}
nav ul li{
display: block;
padding: 20px;
width: 80%;
text-align: center;
position: relative;
}
nav ul li:hover {
background-color: #399077;
}
nav ul .arrow:hover{
border-right: 10px solid white;
border-right-width: thick;
width: 79%;
}
nav ul ul {
height: auto;
display: none;
background-color: #399077;
left: 212px;
position: absolute;
top: 0;
z-index:150;
}
nav ul ul li{
display: block;
width:75%;
text-align: center;
}
nav ul li:hover ul{
display: block;
width: 165px;
}
/*nav .ee:after {
content: '';
width: 0;
height: 0;
border-top: 8px solid black;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
position: absolute;
z-index: 1;
top: 0%;
left: 50%;
margin-left: -6px
} */
nav ul li a, visited{
color:white;
font-family: 'CFJackStory-Regular', Helvetica, Arial, sans-serif;
display: block;
text-decoration: none;
}
nav ul ul li a:hover{
color:white;
font-size: 20px;
}
<body class="menu">
<header>
<nav class="menu-side">
<ul>
<li class="icon-home"><span>Home</span></li>
<li class="arrow"> <a class="star" href="#">England</a>
<ul>
<li><a class="ee" href="Premiership.html">Premiership</a>
</li>
<li>Championship
</li>
<li>League 1
</li>
<li>League 2
</li>
</ul>
</li>
<li class="arrow"> France
<ul >
<li id="r"><a class="ee" href="Unavailble.html">Ligue 1</a>
</li>
</ul>
</li>
<li class="arrow"> Germany
<ul>
<li><a class="ee" href="Unavailble.html">Bundesliga</a>
</li>
</ul>
</li>
<li class="arrow"> Italy
<ul>
<li><a class="ee" href="Unavailble.html">Serie A</a>
</li>
</ul>
</li>
<li class="arrow"> Spain
<ul>
<li><a class="ee" href="Unavailble.html">La Liga</a>
</li>
</ul>
</li>
</ul>
</nav>
</header>
</body>
See this updated JSFiddle. Set li's to position: relative; and ul ul's to position: absolute. From there you can set ul ul's left to 100%. This pushes them all the way to the right of the parent. You can use left: calc(100% + 5px) to account for li's white right border when hovered. No need for messy margins.
I'm new to html/css and i've been working on this drop down menu: http://cssdeck.com/labs/he8ykb8n
First problem: I'm trying to make the drop-down menu hover over a background image/slideshow. For some reason i can't do that.
This is what I'm trying to achieve: http://bildeopplaster.no/3qi so the dropdown menu is hovering over the background image.
Second problem: Also if you can see on the demo above you only have "Men's wear" button. I tried to copy the code and just change the button name so all the buttons can be shown like on the nn the picture, but the code didn't align the new button next to the "men's wear" button. Is there any way i can fix so that i can get all the buttons next to each other with same hovering effect?
HTML code for the navbar:
<nav class="navigation">
<ul>
<li class="menubar">MEN'S WEAR
<ul>
<li class="dropdown">TOPWEAR
<ul>
<li>Jackets & Coats</li>
<li>Shirts</li>
<li>Overshirts</li>
<li>T-Shirts</li>
<li>Basic T-Shirts</li>
<li>Knitwear</li>
<li>Sweats</li>
</ul>
</li>
<li class="dropdown">BOTTOMWEAR
<ul>
<li>Jeans</li>
<li>Colour Jeans</li>
<li>Pants</li>
<li>Shorts</li>
</ul>
</li>
<li class="dropdown">FOOTWEAR
<ul>
<li>Boots</li>
<li>Sandals</li>
<li>Shoes</li>
<li>Snickers</li>
</ul>
</li>
<li class="dropdown">ACCESSORIES
<ul>
<li>Belts</li>
<li>Caps</li>
<li>Hats</li>
<li>Scarves</li>
<li>Gloves</li>
<li>Sunglasses</li>
<li>Watches</li>
<li>Jewelry</li>
</ul>
</li>
<li class="dropdown">SALE
<ul>
<li>Jackets & Coats</li>
<li>Shirts</li>
<li>Overshirts</li>
<li>T-Shirts</li>
<li>Basic T-Shirts</li>
<li>Knitwear</li>
<li>Sweats</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li class="menubar">MEN'S WEAR
<ul>
<li class="dropdown">TOPWEAR
<ul>
<li>Jackets & Coats</li>
<li>Shirts</li>
<li>Overshirts</li>
<li>T-Shirts</li>
<li>Basic T-Shirts</li>
<li>Knitwear</li>
<li>Sweats</li>
</ul>
</li>
<li class="dropdown">BOTTOMWEAR
<ul>
<li>Jeans</li>
<li>Colour Jeans</li>
<li>Pants</li>
<li>Shorts</li>
</ul>
</li>
<li class="dropdown">FOOTWEAR
<ul>
<li>Boots</li>
<li>Sandals</li>
<li>Shoes</li>
<li>Snickers</li>
</ul>
</li>
<li class="dropdown">ACCESSORIES
<ul>
<li>Belts</li>
<li>Caps</li>
<li>Hats</li>
<li>Scarves</li>
<li>Gloves</li>
<li>Sunglasses</li>
<li>Watches</li>
<li>Jewelry</li>
</ul>
</li>
<li class="dropdown">SALE
<ul>
<li>Jackets & Coats</li>
<li>Shirts</li>
<li>Overshirts</li>
<li>T-Shirts</li>
<li>Basic T-Shirts</li>
<li>Knitwear</li>
<li>Sweats</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
CSS code for the navigation bar:
.navigation {
position: relative;
background-color: #ddd;
width: 1024px;
height: 42px;
margin: 0 auto;
-webkit-font-smoothing:antialiased;
}
.navigation a {
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.menubar ul {
opacity: 0;
position: relative;
top: 0px;
visibility: hidden;
z-index: 1;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.menubar {
position: relative;
list-style: none;
display: inline;
}
.menubar a {
text-decoration: none;
position: relative;
top: 12px;
right: 40px;
font-weight: bold;
padding: 12px 15px 11px 15px;
}
.menubar a:nth-child(1) {
color: #000;
list-style: none;
}
.menubar a:hover:nth-child(1) {
color: #fff;
background: #000;
}
.menubar:hover ul {
visibility: visible;
opacity: 1;
}
.menubar li{
background: transparent;
}
.dropdown:nth-child(1) {
float: left;
background: #000;
position: relative;
list-style: none;
top: 22px;
right: 80px;
padding-bottom: 96px;
padding-left: 40px;
padding-top: 1px;
margin-right: -20px;
}
.dropdown:nth-child(2) {
float: left;
background: #000;
position: relative;
list-style: none;
top: 22px;
right: 60px;
padding-bottom: 200px;
padding-left: 40px;
padding-top: 1px;
margin-right: -20px;
}
.dropdown:nth-child(3) {
float: left;
background: #000;
position: relative;
list-style: none;
top: 22px;
right: 40px;
padding-bottom: 200px;
padding-left: 40px;
padding-top: 1px;
margin-right: -20px;
}
.dropdown:nth-child(4) {
float: left;
background: #000;
position: relative;
list-style: none;
top: 22px;
right: 20px;
padding-bottom: 63px;
padding-left: 40px;
padding-top: 1px;
margin-right: -20px;
}
.dropdown:nth-child(5) {
float: left;
background: #000;
position: relative;
list-style: none;
top: 22px;
right: 20px;
left: 0px;
padding-bottom: 100px;
padding-left: 42px;
padding-right: 20px;
padding-top: 1px;
}
.dropdown a {
right: 10px;
position: relative;
top: 10px;
left: -40px;
font-weight: bold;
color: #888;
}
.dropdown a:hover {
text-decoration: underline;
color: #fff;
}
.dropdown a:nth-child(1) {
color: #cbcbcb;
}
.dropdown ul {
list-style: none;
display: inline;
position: relative;
padding: 15px;
}
.dropdown ul li {
position: relative;
padding: 8px;
top: 5px;
right: 5px;
font-size: 13.5px;
}
.dropdown ul li a {
font-weight: normal;
}
try this
.menubar:hover ul {
opacity: 0.5;
}
On a side note, always use display:none to hide and display:block to show elements. Visibility can create problems.