This question already has answers here:
Dropdown menu is hidden behind my hero image
(1 answer)
Drop down menu appearing behind images
(2 answers)
Closed 4 months ago.
My dropdown is hidden behind the image. I gave the dropdown a higher z-index but it didn't work. I'm a foundation students and I'm new to coding. Can anyone also help me to improve my code?
div.topnav-container nav ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
div.topnav-container nav ul>li {
float: left;
width: 200px;
height: 25x;
font-size: 20px;
background-color: lightgrey;
}
div.topnav-container nav ul li a {
display: block;
text-decoration: none;
color: white;
}
div.topnav-container nav ul li:hover {
background-color: red;
}
div.topnav-container nav ul>li>a:hover {
background-color: red;
}
div.topnav-container nav ul>li>ul>li {
display: none;
}
div.topnav-container nav ul>li:hover>ul>li {
display: block;
}
article {
clear: left;
}
.topnav-container {
background-color: lightgrey;
height: 25px;
text-align: center;
}
div.topnav-container nav ul>li>ul>li {
padding-top: 10px;
padding-bottom: 10px;
z-index: 1;
}
.topnav {
color: white;
}
<header>
<div class="topnav-container">
<nav>
<ul class="topnav">
<li>Home</li>
<li>About us</li>
<li>Feedback</li>
<li>Basketball
<ul>
<li>History</li>
<li>Rules and Regulation</li>
<li>Legend Players</li>
</ul>
</li>
<li>Badminton
<ul>
<li>History</li>
<li>Rules and Regulation</li>
<li>Legend Players</li>
</ul>
</li>
<li>Football
<ul>
<li>History</li>
<li>Rules and Regulation</li>
<li>Legend Players</li>
</ul>
</li>
</ul>
</nav>
</div>
<figure>
<img src="https://via.placeholder.com/100" alt="People playing basketball" title="nba">
</figure>
</header>
Related
I'm trying to create a basic drop down menu. I'm having issues with the alignment. How can I get sub menu items to be directly underneath one another? For example, I am trying to get twitter, instagram, and facebook underneath "Social".
Thanks.
https://jsfiddle.net/xalxnder/ostaqgyk/
HTML
<body>
<ul class="main-nav">
<li>Home</li>
<li>Projects</li>
<li class="dropdown">
Social
<ul class="sub">
<li>Twitter</li>
<li>Facebook</li>
<li>Instagram</li>
</ul>
</li>
</ul>
</body>
CSS
body {
background: #000000;
color: white;
}
.main-nav {
float: left;
}
.main-nav li {
font-size: 10px;
display: inline;
padding-right: 10px;
}
.main-nav .sub {
color: pink;
float: none;
z-index: -200;
}
//** .sub{display: none;
}
.dropdown:hover > .sub {
display: block;
position: absolute;
}
Here's the basics of it.
JSFiddle
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: black;
}
ul {
list-style-type: none;
color: white;
}
.main-nav >li {
display: inline-block;
position: relative;
padding-right: 10px;
}
.sub {
position: absolute;
top: 100%;
left: 0;
color: pink;
/* display:none */ /* disabled for demo */
}
.dropdown:hover .sub {
display:block;
}
<ul class="main-nav">
<li>Home</li>
<li>Projects</li>
<li class="dropdown">
Social
<ul class="sub">
<li>Twitter</li>
<li>Facebook</li>
<li>Instagram</li>
</ul>
</li>
</ul>
Since block-level elements take up their own line, this rule should hold you:
.sub li {
display: block;
}
Add to .main-nav .sub:
position: absolute;
padding: 0;
body {
background: #000000;
color: white;
}
.main-nav {
float: left;
}
.main-nav li {
font-size: 10px;
display: inline-block;
padding-right: 10px;
}
.main-nav .sub {
position: absolute;
padding: 0;
color: pink;
float: none;
z-index: -200;
}
.sub li {
display: block;
}
<body>
<ul class="main-nav">
<li>Home</li>
<li>Projects</li>
<li class="dropdown">
Social
<ul class="sub">
<li>Twitter</li>
<li>Facebook</li>
<li>Instagram</li>
</ul>
</li>
</ul>
</body>
I have looked a few questions so far that are very similar to this one, but still can't find the answer to my question. (Please note that I am new to HTML and that this is my first post).
I want to have a navigation bar that spans the width of the page no matter the width of the screen that it is being viewed on. I tried making the 's width 100%, but it still did not do anything.
The code for the navigations bar is here:
<!DOCTYPE html>
<html>
<head>
<style>
nav {
width: 100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a {
display: block;
width: 60px;
background-color: #dddddd;
border-color: #ffffff;
text-align: center;
text-decoration: none;
padding: 10px;
margin: 3px;
border-radius: 4px;
}
a:hover {
font-weight: bold;
background-color: #9b9b9b;
}
a:active {
color: #ff0000;
}
</style>
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
</body>
</html>
Can you please help me to find a way to make the navigation bar span the width of the page?
Thanks!
If you want to expand the li to be the same size and fill the width of the ul, flexbox can do that.
Modern Browsers - Flexbox
nav {
width: 100%;
background: #333;
margin-bottom: 1em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display: flex;
}
li {
flex:1 0 auto;
}
a {
display: block;
/*width: 60px;*/
background-color: #dddddd;
border-color: #ffffff;
text-align: center;
text-decoration: none;
padding:10px 0;
margin: 3px;
border-radius: 4px;
}
a:hover {
font-weight: bold;
background-color: #9b9b9b;
}
a:active {
color: #ff0000;
}
<nav>
<ul>
<li>Home
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
</nav>
<nav>
<ul>
<li>Home
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
<li>Home
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
</nav>
Alternative Solution: Old Browsers - CSS Tables
nav {
width: 100%;
background: #333;
margin-bottom: 1em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display: table;
width: 100%;
table-layout: fixed;
}
li {
display: table-cell;
}
a {
display: block;
/*width: 60px;*/
background-color: #dddddd;
border-color: #ffffff;
text-align: center;
text-decoration: none;
padding: 10px;
margin: 3px;
border-radius: 4px;
}
a:hover {
font-weight: bold;
background-color: #9b9b9b;
}
a:active {
color: #ff0000;
}
<nav>
<ul>
<li>Home
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
</nav>
<nav>
<ul>
<li>Home
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
<li>Home
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
</nav>
You have already given your nav a width of 100%. Now try adding a width to your LI element in your CSS to evenly distribute them across the 100% width of the nav.
li {
float: left;
width:25%;
}
nav is already 100% width,with this css configuration.Give it some background you will be able to see it.
So right how, the navigation bar is spanning the width of the page, however the objects inside aren't large enough to fill the gap. This can be seen if you add a background color to the navigation bar. What you might consider is center-aligning the objects within the nav bar or expanding the width of each object to near 25%
Are you trying to make the nav tag expand from window edge to window edge?
If so you will want to remove the margin on your body:
body {
margin: 0;
}
I have a vertical menu bar that I created from a Dreamweaver template. the CSS was generated for this. I have since added a submenu that I want to pop out left of the main menu links they correspond with. Everything I have tried and all my research have resulted fruitless. I believe that my CSS file is somehow not allowing my submenu to pop left.
What it is doing now is everything is vertical. the submenu is hidden as desired but when hovered it pops down instead of to the left. Please help me with this as I have been working on this for almost a week with no answer in sight. Thanks in advance.
JSfiddle Demo
HTML
<div class="sidebar1">
<nav>
<ul id="navbar">
<li>Home</li>
<li>Solar Shades
<ul class="submenu">
<li>Solar Shades Fabrics </li>
</ul></li>
<li>Privacy Shades
<ul class="submenu">
<li>Privacy Shades Fabrics </li>
</ul></li>
<li>Blackout Shades
<ul class="submenu">
<li>Blackout Shades Fabrics </li>
</ul></li>
<li>Patio Shades
<ul class="submenu">
<li>Exterior Shades Fabrics </li>
</ul></li>
<li>Custom Drapes and Curtains
<ul class="submenu">
<li>Drapery Fabrics </li>
<li>Measuring Drapery </li>
<li>Curved Drapery Template </li>
</ul></li>
<li>Drapery Systems</li>
<li>Home Theater Curtains
<ul class="submenu">
<li>Home Theater Fabrics </li>
</ul></li>
<li>Somfy products
<ul class="submenu">
<li>Somfy Motor </li>
<li>Somfy Control </li>
<li>Somfy Switch </li>
<li>Somfy Accessories </li>
</ul></li>
<li>Photo Gallary
<ul class="submenu">
<li>Drapery Showroom </li>
<li>Portfolio Gallerys </li>
</ul></li>
<li>How to Measure for Shades</li>
<li>Request for Shade Quote</li>
<li>Technical Links</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</nav>
<aside>
<p> Some informational text can go HERE</p>
</aside>
</div>
CSS
#charset "utf-8";
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #42413C;
margin: 0;
padding: 0;
color: #000;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
}
a img {
border: none;
}
a:link {
color: #42413C;
text-decoration: underline;
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.container {
width: 960px;
background-color: #FFFFFF;
margin: 0 auto;
}
header {
background-color: #ADB96E;
}
.sidebar1 {
float: right;
width: 180px;
background-color: #EADCAE;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 780px;
float: right;
}
.content ul, .content ol {
padding: 0 15px 15px 40px;
}
nav ul{
list-style: none;
border-top: 1px solid #666;
margin-bottom: 15px;
}
nav li {
border-bottom: 1px solid #666;
}
nav a, nav a:visited {
padding: 5px 5px 5px 15px;
display: block;
width: 160px;
text-decoration: none;
background-color: #C6D580;
}
nav a:hover, nav a:active, nav a:focus {
background-color: #ADB96E;
color: #FFF;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
/* ~~ The footer ~~ */
footer {
padding: 10px 0;
background-color: #CCC49F;
position: relative;
clear: both;
}
header, section, footer, aside, article, figure {
display: block;
}
I went ahead and rebuilt your CSS for the navbar, using your styles as a basis, to clean it up.
#charset "utf-8";
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #42413C;
margin: 0;
padding: 0;
color: #000;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
}
a img {
border: none;
}
a:link {
color: #42413C;
text-decoration: underline;
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.container {
width: 960px;
background-color: #FFFFFF;
margin: 0 auto;
}
header {
background-color: #ADB96E;
}
.sidebar1 {
float: right;
width: 180px;
background-color: #EADCAE;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 780px;
float: right;
}
/* ~~ The navbar ~~ */
nav #navbar {
list-style: none;
border-top: 1px solid #666;
margin-bottom: 15px;
}
nav #navbar:after {
content: '';
clear: both;
display: block;
}
nav #navbar li {
float: left;
border-bottom: 1px solid #666;
background-color: #C6D580;
position: relative;
}
nav #navbar li a {
padding: 5px 5px 5px 15px;
width: 160px;
display: block;
text-decoration: none;
}
nav #navbar li:hover {
background-color: #ADB96E;
}
nav #navbar li:hover > a, nav #navbar li .submenu li:hover > a {
color: #FFF;
}
nav #navbar li .submenu {
list-style: none;
display: none;
position: absolute;
right: 100%;
top: 0;
}
nav #navbar li .submenu li {
float: none;
}
nav #navbar li:hover > .submenu {
display: block;
}
/* ~~ The footer ~~ */
footer {
padding: 10px 0;
background-color: #CCC49F;
position: relative;
clear: both;
}
header, section, footer, aside, article, figure {
display: block;
}
<div class="sidebar1">
<nav>
<ul id="navbar">
<li>Home</li>
<li>Solar Shades<ul class="submenu">
<li>Solar Shades Fabrics</li>
</ul></li>
<li>Privacy Shades<ul class="submenu">
<li>Privacy Shades Fabrics</li>
</ul></li>
<li>Blackout Shades<ul class="submenu">
<li>Blackout Shades Fabrics</li>
</ul></li>
<li>Patio Shades<ul class="submenu">
<li>Exterior Shades Fabrics</li>
</ul></li>
<li>Custom Drapes and Curtains<ul class="submenu">
<li>Drapery Fabrics</li>
<li>Measuring Drapery</li>
<li>Curved Drapery Template</li>
</ul></li>
<li>Drapery Systems</li>
<li>Home Theater Curtains<ul class="submenu">
<li>Home Theater Fabrics</li>
</ul></li>
<li>Somfy products<ul class="submenu">
<li>Somfy Motor</li>
<li>Somfy Control</li>
<li>Somfy Switch</li>
<li>Somfy Accessories</li>
</ul></li>
<li>Photo Gallary<ul class="submenu">
<li>Drapery Showroom</li>
<li>Portfolio Gallerys</li>
</ul></li>
<li>How to Measure for Shades</li>
<li>Request for Shade Quote</li>
<li>Technical Links</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</nav>
<aside>
<p>Some informational text can go HERE</p>
</aside>
</div>
It's fully functional, position of the .submenu is based upon the relative location of the nav #navbar li being hovered over.
I hope this helps. ^^
Try positioning the ul.submenu elements absolutely. You can then set the width explicitly and position it that may pixels away from the left edge of it's ul#navbar li parent element with left: -180px (or whatever value you set for the width).
DEMO
ul#navbar li {
position: relative;
}
ul.submenu {
position: absolute;
width: 180px;
left: -180px;
top: 0;
}
Also, you had a missing curly brace { in your original CSS for the nav ul {...} line
I am trying to make navigation bar. I am applying padding around nav iteams but it is falling out of its parent nav tag. How to deal with this kind of problem. Thanks
HTML
<header>
<div class="wrap">
<img src="logo.jpg">
<nav>
<ul>
<li>My Link 1</li>
<li>My Link 2</li>
<li>My Link 3</li>
<li>My Link 4</li>
</ul>
</nav>
</div>
</header>
CSS
#media screen and (max-width: 850px) {
* {
box-sizing: border-box;
}
.logo {
display: block;
}
nav {
background-color: aliceblue;
float: none;
display: block;
}
nav li {
/* padding: 5px; */
display: block;
width: 100%;
}
nav li a {
background-color: #999;
padding: 30px;
width: 100%;
height: 100%;
}
nav ul {
width: 100%;
}
}
add display block to anchor tag
Check fiddle
nav li a {
background-color: #999;
padding: 30px;
width: 100%;
height: 100%;
display: block;
}
I think what you're looking for is this:
#media screen and (max-width: 850px) {
* {
box-sizing: border-box;
}
.logo {
display: block;
}
nav {
background-color: aliceblue;
float: none;
display: block;
overflow: hidden;
}
nav ul {
margin: 0;
padding: 0;
}
nav li {
list-style: none;
float: left;
}
nav li a {
background-color: #999;
padding: 30px;
display: block;
}
nav ul {
width: 100%;
}
}
<header>
<div class="wrap">
<img src="logo.jpg">
<nav>
<ul>
<li>My Link 1</li>
<li>My Link 2</li>
<li>My Link 3</li>
<li>My Link 4</li>
</ul>
</nav>
</div>
</header>
I am trying to figure out why the third level of my drop down menu is not stretching to the width of the text that is contained within it. So far the text just automatically indents to the next line but all the other li's do not do this and are on a single line. Can someone help me find out why this is happening? Thank you!
here is the example I have made so far: http://themedwebdesign.com/salmon/
here is the html
<header>
<div class="container clearfix">
<div id="logo"><img src="./img/salmon-logo.png" alt=""></div>
<nav>
<ul>
<li>Home</li>
<li>Pages
<ul>
<li>About</li>
<li>Services</li>
<li>Meet the Team</li>
</ul>
</li>
<li>Features
<ul>
<li>Feature</li>
<li>Level 3
<ul>
<li>Level 3</li>
<li>Level 3</li>
</ul>
</li>
</ul>
</li>
<li>Portfolio
<li>Blog
<ul>
<li>Single</li>
<li>Large</li>
<li>Medium</li>
<li>Small</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
and here is the css, I apologize its made using sass. If the compiled css file is needed then I will post it.
nav {
float: right;
ul {
list-style: none;
position: relative;
display: inline-block;
margin: 0;
li {
float: left;
text-transform: uppercase;
font-weight: 300;
a {
text-decoration: none;
color: inherit;
padding: 15px 25px;
display: block;
}
&:hover {
color: $colorSite;
}
&:hover > ul {
display: block;
}
}
&:after {
content: "";
clear: both;
display: block;
}
ul {
position: absolute;
top: 100%;
display: none;
padding: 0;
margin: 0;
border: 1px solid $colorSite;
li {
float: none;
position: relative;
a {
color: $colorDark;
text-decoration: none;
display: block;
padding: 15px 25px;
background-color: #fff;
&:hover {
color: #fff;
background-color: $colorSite;
}
}
}
ul {
position: absolute;
left: 100%;
top: 0;
}
}
}
}
If you want to stretch and don't want the 2nd line, you can simply do this in your css
header nav ul ul li a { white-space: nowrap; }
Just make width: 100%; under css header nav ul ul ul
white-space: nowrap; will prevent the text from wrapping.
header nav ul ul li {
float: none;
position: relative;
white-space: nowrap;
}