Is it possible to create this checkerboard-styled social media with only this HTML (feel free to add classes/IDs):
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Google+</li>
<li>LinkedIn</li>
</ul>
I have to create empty <li></li> at my own attempt, and I think the HTML is 'dirty'. Here is my last attempt that works but 'dirty':
<!-- html code -->
<ul>
<li><img src="facebook.png" /></li>
<li></li>
<li><img src="twitter.png" /></li>
<li></li>
<li></li>
<li><img src="google.png" /></li>
<li></li>
<li><img src="linkedin.png" /></li>
</ul>
/* stylesheet */
ul
{
list-style-type: none;
width: 128px;
}
li
{
display: inline;
float: left;
background-color: #000;
width: 32px;
height: 32px;
}
li img
{
width: 32px;
height: 32px;
}
You want the nth-child selector.
ul { list-style-type: none; }
li
{
display: inline;
float: left;
background-color: #000;
width: 32px;
height: 32px;
}
ul :nth-child(2n)
{
position: relative;
top: 32px;
}
li img
{
width: 32px;
height: 32px;
}
Related
I want to make a page similar to Instagram to train techniques etc, but I can not align the texts with the photos, follow the code and pictures.
.div-stories {
width: 100%;
height: 104px;
background: #FAFAFA;
position: absolute;
top: 45px;
border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.stories {
overflow: auto;
white-space: nowrap;
scrollbar-width: none;
}
.stories ul {
list-style: none;
width: auto;
margin-top: -5px;
}
.stories ul li {
display: inline-block;
}
.pic-stories {
width: 58px;
height: 58px;
border-radius: 50px;
margin-left: 15px;
margin-top: 10px;
z-index: 5;
}
.more-stories {
position: static;
top: 63px;
left: 37px;
margin-left: -15px;
width: 18px;
height: 18px;
}
.txt-stories ul {
list-style: none;
}
.txt-stories ul li {
display: inline-block;
position: relative;
margin-left: 23px;
}
.effect-stories {
width: 70px;
height: 70px;
border: double 6px white;
border-radius: 50px;
background-image: linear-gradient(white, white), radial-gradient(circle at top right, #C82D8D, #F99C4B);
background-origin: border-box;
background-clip: content-box, border-box;
}
<div class="div-stories">
<nav class="stories">
<ul>
<li><img class="pic-stories" src="img/stories1.jpg"><img class="more-stories" src="img/more-stories.webp"></li>
<li><img class="pic-stories effect-stories" src="img/stories2.jpg"></li>
<li><img class="pic-stories effect-stories" src="img/stories3.jpg"></li>
<li><img class="pic-stories effect-stories" src="img/stories4.jpg"></li>
<li><img class="pic-stories effect-stories" src="img/stories5.jpg"></li>
<li><img class="pic-stories effect-stories" src="img/stories6.jpg"></li>
<li><img class="pic-stories effect-stories" src="img/stories7.jpg"></li>
<li><img class="pic-stories effect-stories" src="img/stories8.jpg"></li>
<li><img class="pic-stories effect-stories" src="img/stories9.jpg"></li>
</ul>
<nav class="txt-stories">
<ul>
<li>
<p class="text-stories">Seu story</p>
</li>
<li>
<p class="text-stories">shinigami...</p>
</li>
<li>
<p class="text-stories">italo_rmds</p>
</li>
<li>
<p class="text-stories">rodrigotea...</p>
</li>
<li>
<p class="text-stories">princejack...</p>
</li>
<li>
<p class="text-stories">viainfinda</p>
</li>
<li>
<p class="text-stories">designer.bot</p>
</li>
<li>
<p class="text-stories">mjacksonh</p>
</li>
<li>
<p class="text-stories">reyzeryt</p>
</li>
</ul>
</nav>
</nav>
</div>
I'm learning html and css
This might help you; using Flexbox you can align items either in rows or columns pretty easily without defining exact sizes. This also helps keep the names aligned even if they are not the same size.
The width I set on the container is just to demonstrate how each item spreads out and aligns with its name; you can set this however you want
.container {
overflow-x: auto;
width: 1000px;
}
.stories {
display: flex;
list-style: none;
padding: 0;
flex-wrap: nowrap;
justify-content: space-between;
}
.item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.pic {
border-radius: 50%;
border: double 6px white;
background-image: linear-gradient(white, white), radial-gradient(circle at top right, #C82D8D, #F99C4B);
background-origin: border-box;
background-clip: content-box, border-box;
}
<div class="container">
<ul class="stories">
<li class="item">
<img src="https://via.placeholder.com/80" alt="" class="pic">
<span>username</span>
</li>
<li class="item">
<img src="https://via.placeholder.com/80" alt="" class="pic">
<span>username large</span>
</li>
<li class="item">
<img src="https://via.placeholder.com/80" alt="" class="pic">
<span>username</span>
</li>
<li class="item">
<img src="https://via.placeholder.com/80" alt="" class="pic">
<span>username</span>
</li>
<li class="item">
<img src="https://via.placeholder.com/80" alt="" class="pic">
<span>username very large</span>
</li>
<li class="item">
<img src="https://via.placeholder.com/80" alt="" class="pic">
<span>username</span>
</li>
<li class="item">
<img src="https://via.placeholder.com/80" alt="" class="pic">
<span>username</span>
</li>
</ul>
</div>
If you remove height: 104px; from .div-stories it will wrap your content inside the gray background.
.div-stories {
width: 100%;
background: #FAFAFA;
position: absolute;
top: 45px;
border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.stories {
overflow: auto;
white-space: nowrap;
scrollbar-width: none;
}
.stories ul {
list-style: none;
width: auto;
margin-top: -5px;
}
.stories ul li {
display: inline-block;
}
.pic-stories {
width: 58px;
height: 58px;
border-radius: 50px;
margin-left: 15px;
margin-top: 10px;
z-index: 5;
}
.more-stories {
position: static;
top: 63px;
left: 37px;
margin-left: -15px;
width: 18px;
height: 18px;
}
.txt-stories ul {
list-style: none;
}
.txt-stories ul li {
display: inline-block;
position: relative;
margin-left: 23px;
}
.effect-stories {
width: 70px;
height: 70px;
border: double 6px white;
border-radius: 50px;
background-image: linear-gradient(white, white), radial-gradient(circle at top right, #C82D8D, #F99C4B);
background-origin: border-box;
background-clip: content-box, border-box;
}
<div class="div-stories">
<nav class="stories">
<ul>
<li><img class="pic-stories" src="img/stories1.jpg"><img class="more-stories" src="img/more-stories.webp"></li>
<li><img class="pic-stories effect-stories" src="https://via.placeholder.com/150"></li>
<li><img class="pic-stories effect-stories" src="https://via.placeholder.com/150"></li>
<li><img class="pic-stories effect-stories" src="https://via.placeholder.com/150"></li>
<li><img class="pic-stories effect-stories" src="https://via.placeholder.com/150"></li>
<li><img class="pic-stories effect-stories" src="https://via.placeholder.com/150"></li>
<li><img class="pic-stories effect-stories" src="https://via.placeholder.com/150"></li>
<li><img class="pic-stories effect-stories" src="https://via.placeholder.com/150g"></li>
<li><img class="pic-stories effect-stories" src="https://via.placeholder.com/150"></li>
</ul>
<nav class="txt-stories">
<ul>
<li>
<p class="text-stories">Seu story</p>
</li>
<li>
<p class="text-stories">shinigami...</p>
</li>
<li>
<p class="text-stories">italo_rmds</p>
</li>
<li>
<p class="text-stories">rodrigotea...</p>
</li>
<li>
<p class="text-stories">princejack...</p>
</li>
<li>
<p class="text-stories">viainfinda</p>
</li>
<li>
<p class="text-stories">designer.bot</p>
</li>
<li>
<p class="text-stories">mjacksonh</p>
</li>
<li>
<p class="text-stories">reyzeryt</p>
</li>
</ul>
</nav>
</nav>
</div>
Example codepen: https://codepen.io/brooksrelyt/pen/pGEZOp
I advice you to change your HTML but if you want keep your HTML, you can add this css rules :
ul {
list-style: none;
}
ul li {
margin-left:5px !important;
border:1px solid green;
width:82px;
text-align:center;
}
ul li p {
overflow: hidden;
text-overflow:hidden;
font-size:14px;
}
.pic-stories {
margin:0;
}
Full code :
.div-stories {
width: 100%;
height: 104px;
background: #FAFAFA;
position: absolute;
top: 45px;
border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.stories {
overflow: auto;
white-space: nowrap;
scrollbar-width: none;
}
.stories ul {
list-style: none;
width: auto;
margin-top: -5px;
}
.stories ul li {
display: inline-block;
}
.pic-stories {
width: 58px;
height: 58px;
border-radius: 50px;
margin-left: 15px;
margin-top: 10px;
z-index: 5;
}
.more-stories {
position: static;
top: 63px;
left: 37px;
margin-left: -15px;
width: 18px;
height: 18px;
}
.txt-stories ul {
list-style: none;
}
.txt-stories ul li {
display: inline-block;
position: relative;
margin-left: 23px;
}
.effect-stories {
width: 70px;
height: 70px;
border: double 6px white;
border-radius: 50px;
background-image: linear-gradient(white, white), radial-gradient(circle at top right, #C82D8D, #F99C4B);
background-origin: border-box;
background-clip: content-box, border-box;
}
ul {
list-style: none;
}
ul li {
margin-left:5px !important;
border:1px solid green;
width:82px;
text-align:center;
}
ul li p {
overflow: hidden;
text-overflow:hidden;
font-size:14px;
}
.pic-stories {
margin:0;
}
<div class="div-stories">
<nav class="stories">
<ul>
<li><img class="pic-stories" src="img/stories1.jpg"><img class="more-stories" src="img/more-stories.webp"></li>
<li><img class="pic-stories effect-stories" src="img/stories2.jpg"></li>
<li><img class="pic-stories effect-stories" src="img/stories3.jpg"></li>
<li><img class="pic-stories effect-stories" src="img/stories4.jpg"></li>
<li><img class="pic-stories effect-stories" src="img/stories5.jpg"></li>
<li><img class="pic-stories effect-stories" src="img/stories6.jpg"></li>
<li><img class="pic-stories effect-stories" src="img/stories7.jpg"></li>
<li><img class="pic-stories effect-stories" src="img/stories8.jpg"></li>
<li><img class="pic-stories effect-stories" src="img/stories9.jpg"></li>
</ul>
<nav class="txt-stories">
<ul>
<li>
<p class="text-stories">Seu story</p>
</li>
<li>
<p class="text-stories">shinigami</p>
</li>
<li>
<p class="text-stories">italo_rmds</p>
</li>
<li>
<p class="text-stories">rodrigotea</p>
</li>
<li>
<p class="text-stories">princejack</p>
</li>
<li>
<p class="text-stories">viainfinda</p>
</li>
<li>
<p class="text-stories">designer.bot</p>
</li>
<li>
<p class="text-stories">mjacksonh</p>
</li>
<li>
<p class="text-stories">reyzeryt</p>
</li>
</ul>
</nav>
</nav>
</div>
This solution have a new HTML and use "data-title" attribut :
Modern and short fast solution :
div.stories {
width: 100%;
background: #FAFAFA;
position: absolute;
top: 45px;
border-bottom: 1px solid rgba(0, 0, 0, .1);
}
div.stories ul {
list-style: none;
margin: 0;
}
div.stories ul li {
display: inline-block;
margin-left: 5px !important;
width: 82px;
text-align: center;
}
div.stories ul li::after {
content: attr(data-title);
font-size: 14px;
}
img {
z-index: 5;
width: 70px;
height: 70px;
border: double 6px white;
border-radius: 50px;
background-image: linear-gradient(white, white), radial-gradient(circle at top right, #C82D8D, #F99C4B);
background-origin: border-box;
background-clip: content-box, border-box;
}
<div class="stories">
<nav>
<ul>
<li data-title="username one"><img src="https://randomuser.me/api/portraits/women/57.jpg"></li>
<li data-title="username two"><img src="https://randomuser.me/api/portraits/women/51.jpg"></li>
<li data-title="username tree"><img src="https://randomuser.me/api/portraits/women/52.jpg"></li>
<li data-title="username four"><img src="https://randomuser.me/api/portraits/women/53.jpg"></li>
<li data-title="username five"><img src="https://randomuser.me/api/portraits/women/54.jpg"></li>
</ul>
</nav>
</div>
Trying to reproduce the following in HTML & CSS:
Here's how I tried to structire it:
.layout ul > li {
list-style: none;
}
.layout ul > li:nth-child(1n) > img {
float: left;
}
.layout ul > li:nth-child(2n) > img {
float: right;
z-index: 9999;
}
<div class="layout">
<ul>
<li><img src="http://placeimg.com/120/80/grayscale" /></li>
<li><img src="http://placeimg.com/120/80/grayscale" /></li>
<li><img src="http://placeimg.com/120/80/grayscale" /></li>
<li><img src="http://placeimg.com/120/80/grayscale" /></li>
</ul>
</div>
The problem is that when applying clearfix it doesn't help at all. The images seem to come on one row. Maybe is there something specific when it comes to li elements and clearfix? How this can be solved?
You can simply consider text-align property and some negative margin for the overlap (this will avoid you all the float issues)
.layout {
width: 200px;
}
.layout ul {
margin: 0;
padding: 0;
}
.layout ul>li {
list-style: none;
margin-bottom: -20px;
position: relative; /* don't forget this to be able to use z-index */
}
.layout ul>li {
text-align: left;
}
.layout ul>li:nth-child(2n) {
text-align: right;
z-index: 999;
}
<div class="layout">
<ul>
<li><img src="http://placeimg.com/120/80/grayscale" /></li>
<li><img src="http://placeimg.com/120/80/grayscale" /></li>
<li><img src="http://placeimg.com/120/80/grayscale" /></li>
<li><img src="http://placeimg.com/120/80/grayscale" /></li>
</ul>
</div>
Try to make use of transform css property
.layout ul {
display: flex;
flex-wrap: wrap;
padding: 0;
list-style: none;
background: #ccc;
padding: 20px;
padding-left: 40px;
}
.layout ul>li {
width: 50%;
box-sizing: border-box;
border: 5px solid #fff;
margin-bottom: 10px;
}
.layout ul>li>img {
width: 100%;
max-width: 100%;
display: block;
}
.layout ul>li:nth-child(even) {
transform: translateY(50%) translateX(-20px);
}
<div class="layout">
<ul>
<li><img src="http://placeimg.com/120/80/grayscale" /></li>
<li><img src="http://placeimg.com/120/80/grayscale" /></li>
<li><img src="http://placeimg.com/120/80/grayscale" /></li>
<li><img src="http://placeimg.com/120/80/grayscale" /></li>
</ul>
</div>
When trying to put an image and a title in a list tag, the title drops to the second line. Is there a way to work around this?
ul {
padding: 0;
list-style-type: none;
}
#searchImg {
width: 50px;
height: 72px;
white-space: nowrap;
padding: 0;
margin: 0;
}
#searchTitle {
margin-left: 60px;
}
<ul id="myUL">
<li><img src="https://myanimelist.cdn-dena.com/images/anime/2/75533.jpg" id="searchImg"><p id="searchTitle">A Certain Magical Index</p></li>
<li><img src="https://myanimelist.cdn-dena.com/images/anime/13/77968.jpg" id="searchImg"><p id="searchTitle">Ajin</p></li>
<li><img src="https://myanimelist.cdn-dena.com/images/anime/10/22061.jpg" id="searchImg"><p id="searchTitle">Angel Beats!</p></li>
<li><img src="https://myanimelist.cdn-dena.com/images/anime/10/47347.jpg" id="searchImg"><p id="searchTitle">Attack on Titan</p></li>
</ul>
Demo
You have to make it inline using the following.
ul p {
display:inline;
}
Gives you this:
You are using block element(p) which spans full width,so use display:inline property on block element or simply use Inline elements
ul {
padding: 0;
list-style-type: none;
}
#searchImg {
width: 50px;
height: 72px;
white-space: nowrap;
padding: 0;
margin: 0;
}
#searchTitle {
margin-left: 60px;
}
p {
display: inline;
}
<ul id="myUL">
<li>
<a href="#"><img src="https://myanimelist.cdn-dena.com/images/anime/2/75533.jpg" id="searchImg">
<p id="searchTitle">A Certain Magical Index</p>
</a>
</li>
<li>
<a href="#"><img src="https://myanimelist.cdn-dena.com/images/anime/13/77968.jpg" id="searchImg">
<p id="searchTitle">Ajin</p>
</a>
</li>
<li>
<a href="#"><img src="https://myanimelist.cdn-dena.com/images/anime/10/22061.jpg" id="searchImg">
<p id="searchTitle">Angel Beats!</p>
</a>
</li>
<li>
<a href="#"><img src="https://myanimelist.cdn-dena.com/images/anime/10/47347.jpg" id="searchImg">
<p id="searchTitle">Attack on Titan</p>
</a>
</li>
</ul>
Follow the following code and you will have the desired result.
ul {
padding: 0;
list-style-type: none;
}
ul li{
width: 100%;
float: left;
margin-top: 5px;
}
#searchImg {
width: 50px;
height: 72px;
white-space: nowrap;
padding: 0;
margin: 0;
float: left;
}
#searchTitle {
margin-left: 60px;
float: left;
}
<ul id="myUL">
<li><img src="https://myanimelist.cdn-dena.com/images/anime/2/75533.jpg" id="searchImg"><p id="searchTitle">A Certain Magical Index</p></li>
<li><img src="https://myanimelist.cdn-dena.com/images/anime/13/77968.jpg" id="searchImg"><p id="searchTitle">Ajin</p></li>
<li><img src="https://myanimelist.cdn-dena.com/images/anime/10/22061.jpg" id="searchImg"><p id="searchTitle">Angel Beats!</p></li>
<li><img src="https://myanimelist.cdn-dena.com/images/anime/10/47347.jpg" id="searchImg"><p id="searchTitle">Attack on Titan</p></li>
</ul>
To align title with the image use display:inline-block property.
#searchImg {
width: 50px;
height: 72px;
white-space: nowrap;
padding: 0;
margin: 0;
vertical-align: middle; // align text to middle of image for better view
}
#searchTitle {
margin-left: 60px;
display:inline-block;
}
Try this one
ul {
padding: 0;
list-style-type: none;
}
ul li
{
}
#searchImg {
width: 50px;
height: 72px;
white-space: nowrap;
padding: 0;
margin: 0;
}
#searchTitle {
display: inline-block;
margin-left: 60px;
}
<ul id="myUL">
<li><img src="https://myanimelist.cdn-dena.com/images/anime/2/75533.jpg" id="searchImg"><p id="searchTitle">A Certain Magical Index</p></li>
<li><img src="https://myanimelist.cdn-dena.com/images/anime/13/77968.jpg" id="searchImg"><p id="searchTitle">Ajin</p></li>
<li><img src="https://myanimelist.cdn-dena.com/images/anime/10/22061.jpg" id="searchImg"><p id="searchTitle">Angel Beats!</p></li>
<li><img src="https://myanimelist.cdn-dena.com/images/anime/10/47347.jpg" id="searchImg"><p id="searchTitle">Attack on Titan</p></li>
</ul>
Try this one using display table to parent and table-cell to child elements
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
ul {
padding: 0;
list-style-type: none;
}
ul li a {
display: table;
margin-top: 10px;
}
ul li a img, ul li a p {
display: table-cell;
vertical-align: middle;
}
#searchImg {
width: 50px;
height: 72px;
white-space: nowrap;
padding: 0;
margin: 0;
}
#searchTitle {
margin-left: 60px;
}
</style>
</head>
<body>
<ul id="myUL">
<li>
<a href="#"><img src="https://myanimelist.cdn-dena.com/images/anime/2/75533.jpg" id="searchImg">
<p id="searchTitle">A Certain Magical Index</p>
</a>
</li>
<li>
<a href="#"><img src="https://myanimelist.cdn-dena.com/images/anime/13/77968.jpg" id="searchImg">
<p id="searchTitle">Ajin</p>
</a>
</li>
<li>
<a href="#"><img src="https://myanimelist.cdn-dena.com/images/anime/10/22061.jpg" id="searchImg">
<p id="searchTitle">Angel Beats!</p>
</a>
</li>
<li>
<a href="#"><img src="https://myanimelist.cdn-dena.com/images/anime/10/47347.jpg" id="searchImg">
<p id="searchTitle">Attack on Titan</p>
</a>
</li>
</ul>
</body>
</html>
ul {
padding: 0;
list-style-type: none;
}
#searchImg {
padding: 0;
display:inline-block;
vertical-align:middle;
margin-right:10px;
}
#searchTitle {
padding:0;
margin:0;
display:inline-block;
font-size:16px;
font-weight:bold
}
<ul id="myUL">
<li><img src="https://myanimelist.cdn-dena.com/images/anime/2/75533.jpg" id="searchImg"><p id="searchTitle">A Certain Magical Index</p></li>
<li><img src="https://myanimelist.cdn-dena.com/images/anime/13/77968.jpg" id="searchImg"><p id="searchTitle">Ajin</p></li>
<li><img src="https://myanimelist.cdn-dena.com/images/anime/10/22061.jpg" id="searchImg"><p id="searchTitle">Angel Beats!</p></li>
<li><img src="https://myanimelist.cdn-dena.com/images/anime/10/47347.jpg" id="searchImg"><p id="searchTitle">Attack on Titan</p></li>
</ul>
Your code is missing float: left; property of the img and p tag. Use the following given CSS for the desired output:
ul{
padding: 0;
list-style-type: none;
}
ul li{
float: left;
width: 100%;
}
#searchImg{
width: 50px;
height: 72px;
white-space: nowrap;
padding: 0;
margin: 0;
float: left;
}
#searchTitle{
margin-left: 60px;
float: left;
}
display: inline-block
can help you
ul {
padding: 0;
list-style-type: none;
}
#searchImg {
width: 50px;
height: 72px;
white-space: nowrap;
padding: 0;
margin: 0;
}
#searchTitle {
margin-left: 10px;
display: inline-block;
}
<ul id="myUL">
<li><img src="https://myanimelist.cdn-dena.com/images/anime/2/75533.jpg" id="searchImg"><p id="searchTitle">A Certain Magical Index</p></li>
<li><img src="https://myanimelist.cdn-dena.com/images/anime/13/77968.jpg" id="searchImg"><p id="searchTitle">Ajin</p></li>
<li><img src="https://myanimelist.cdn-dena.com/images/anime/10/22061.jpg" id="searchImg"><p id="searchTitle">Angel Beats!</p></li>
<li><img src="https://myanimelist.cdn-dena.com/images/anime/10/47347.jpg" id="searchImg"><p id="searchTitle">Attack on Titan</p></li>
</ul>
I am trying to center the contact icons but its not working. I tried to set the margin to auto and used text-align:center but it doesnt work either. Please help
#contact {
text-align: center;
margin-right: auto;
margin-left: auto;
}
.footer .row li {
float: left;
list-style-type: none;
text-align:center;
}
.footer .row img{
display: inline-block;
height: auto;
vertical-align: middle;
}
<div class="container">
<div class="footer">
<div class="row">
<div id="contact" class="col-xs-12 center">
<ul>
<li><img src="./images/logos/fb.png" class="img-responsive inline-block" alt="Responsive image" width="90px" height="90px" /></li>
<li><img src="./images/logos/twitter.png" class="img-responsive inline-block" alt="Responsive image" width="90px" height="90px" /></li>
<li><img src="./images/logos/insta.png" class="img-responsive inline-block" alt="Responsive image" width="90px" height="90px" /></li>
</ul>
</div>
</div>
</div>
</div>
g
Don't use bootstrap for now, i suggest to learn the basics first.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
ul{
display: table;
width: 100%;
padding: 10px
}
ul li{
list-style: none;
float: left;
background: #ddd;
margin-right: 10px;
padding: 10px
}
ul li img {
width: 25px;
height: 25px;
background: red;
}
ul li span, ul li p{
line-height: 25px;
height: 25px;
background: blue;
color: #fff
}
/* here the style */
.vertical-align li {
text-align: center;
}
.horizontal-align li img,
.horizontal-align li span {
float: left;
}
<h1>Vertical</h1>
<ul class='vertical-align'>
<li><img src='url.png' /><p>VALUE</p></li>
<li><img src='url.png' /><p>VALUE</p></li>
<li><img src='url.png' /><p>VALUE</p></li>
<li><img src='url.png' /><p>VALUE</p></li>
</ul>
<h1>Horizontal</h1>
<ul class='horizontal-align'>
<li><img src='url.png' /><span>VALUE</span></li>
<li><img src='url.png' /><span>VALUE</span></li>
<li><img src='url.png' /><span>VALUE</span></li>
<li><img src='url.png' /><span>VALUE</span></li>
</ul>
As you can see in this image, as I'm hovering over the menu which is inside a flexslider, the menu won't drop down correctly. It stops when the bottom of the slider ends. Could anyone help me to get it over the top? I've tried adding z-index to everything but still had no luck. Maybe I was doing it wrong.
Here's all my code for the slider and the navigation menu:
<div class="out-content">
<div class="container_12">
<div class="content " role="main">
<div class="flexslider">
<ul class="slides">
<li><img src="img/slider/slide1.png" alt=""></li>
<li><img src="img/slider/slide4.png" alt=""></li>
<li><img src="img/slider/slide6.png" alt=""></li>
<li><img src="img/slider/slide7.png" alt=""></li>
<li><img src="img/slider/slide3.png" alt=""></li>
<li><img src="img/slider/slide8.png" alt=""></li>
<li><img src="img/slider/slide2.png" alt=""></li>
<li><img src="img/slider/slide9.png" alt=""></li>
</ul>
</div>
<div id="slide-menu">
<p class="slide">
</p>
<div id="panel">
<nav>
<ul>
<li>Home</li>
<li>Wedding Dresses
<ul>
<li>Maggi Sattaro</li>
<li>Ronald Joyce</li>
<li>Amanda Wyatt</li>
<li>Mark Lesley</li>
<li>Romantica of Devon</li>
<li>"Only You" by Decorum Bridal</li>
</ul>
</li>
<li>Bridesmaids
<ul>
<li>Ebony Rose</li>
<li>Mark Lesley</li>
<li>Romantica of Devon</li>
<li>Amanda Wyatt</li>
<li>Linzi Jay</li>
</ul>
</li>
<li>Mens Formal Wear
<ul>
<li>Peter Posh</li>
<li>Ultimate Formal Hire</li>
</ul>
</li>
<li>Sale</li>
<li>Events</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
nav {
font-family: 'cinzel', cursive;
font-style: normal;
font-size: 12px;
background: url(../img/menu-bg.png);
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
padding: 0 42px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover a {
color: #AFAEAE;
}
nav ul li a {
display: block;
padding: 20px 20px;
color: #FFF;
text-decoration: none;
}
nav ul ul {
background: url(../img/menu-bg.png);
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #AFAEAE;
border-bottom: 1px solid #AFAEAE;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #FFF;
font-size: 12px;
}
nav ul ul li a:hover {
background: url(../img/menu-bg.png);
}
To fix this make the following changes in the stylesheet
.content {
overflow:hidden; //change this to below
overflow:visible;
}
And add this
nav ul ul{
z-index:1 //added this line
}
The overflow:hidde; for the div content was preventing the dropdown to display beyond the div size. I think the above styling should will fix your issue.