I am learning HTML5 and CSS. So my question is probably very basic and very naive. My apology for that.
To practice I am developing a header menu with drop down sub menu. The problem that I am experiencing is that even though I set up the display value of the sub-menu to block so that the sub-menu drops down vertically but now it drops horizontally.
html file :
<nav>
<ul>
<li>Home</li>
<ul>
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
<li>Woman</li>
<ul>
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
<li>
<li>Contact Us</li>
</ul>
</nav>
here is the css code:
nav{
height:40px;
width: 960px;
display: block;
margin: 0,auto;
text-align: center;
text-transform: uppercase;
}
nav a{
display: block;
text-decoration: none;
font-size: 13px;
color: #112233;
}
nav ul{
list-style: none;
}
nav ul li{
float:left;
width:140px;
height:40px;
line-height: 40px;
background: #fc575e;
}
nav ul ul li{
position: relative;
display: none;
}
nav ul li:hover + ul li{
display: block;
}
nav ul li:hover{
background-color: #223433;
color:#f0f1f5;
}
I was wondering if some body could help me out what is wrong with my code? It is really appreciated.
The corrections are.
The issue was because the li tag were all float:left, this caused even the dropdown elements to be horizontal. So I created a class .dropdown to reset the float to none.
CSS:
.dropdown li {
float: none;
}
The dropdown ul tag, will still cause issues with the layout because you are not setting it to absolute position which will keep it separate from the navbar and show it as a floating (not CSS float) kind of element. Then the ul.dropdown needs to be placed inside the parent li element. This will allow us to position the absolute element according to the parent li element.
CSS:
nav ul li {
float: left;
position:relative;
width: 140px;
height: 40px;
line-height: 40px;
background: #fc575e;
}
.dropdown {
position: absolute;
top: 100%;
left: 0px;
padding-left:0px;
}
On hovering the a tags were also in black which made the label dissapear. I recommend adding the CSS below, which will set the a tag to white color, on hover alone.
CSS:
nav ul li:hover > a {
color: white;
}
Finally below is a working example of the code.
nav {
height: 40px;
width: 960px;
display: block;
margin: 0, auto;
text-align: center;
text-transform: uppercase;
}
nav a {
display: block;
text-decoration: none;
font-size: 13px;
color: #112233;
}
nav ul {
list-style: none;
}
nav ul li {
float: left;
position: relative;
width: 140px;
height: 40px;
line-height: 40px;
background: #fc575e;
}
nav ul li ul li {
position: relative;
display: none;
}
nav ul li:hover>a {
color: white;
}
nav ul li:hover ul li {
display: block;
}
nav ul li:hover {
background-color: #223433;
color: #f0f1f5;
}
.dropdown {
position: absolute;
top: 100%;
left: 0px;
padding-left: 0px;
}
.dropdown li {
float: none;
}
<nav>
<ul>
<li>
Home
<ul class="dropdown">
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
</li>
<li>
Woman
<ul class="dropdown">
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
1.Avoid the plus (+) sign in nav ul li:hover + ul li{display: block;} style.
2.Add one more style nav ul li ul {padding-left: 0px;}
3.li tag of Home and Woman close after dropdown list items. i.e,
<li>Home
<ul>
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
</li>
Corrupted code:
<html>
<head>
<style>
nav{
height:40px;
width: 960px;
display: block;
margin: 0,auto;
text-align: center;
text-transform: uppercase;
}
nav a{
display: block;
text-decoration: none;
font-size: 13px;
color: #112233;
}
nav ul{
list-style: none;
}
nav ul li{
float:left;
width:140px;
height:40px;
line-height: 40px;
background: #fc575e;
}
nav ul ul li{
position: relative;
display: none;
}
nav ul li:hover ul li{
display: block;
}
nav ul li:hover{
background-color: #e3b0b2;
color:#f0f1f5;
}
nav ul li ul{
padding-left: 0px;
}
</style>
</head>
<body>
<nav>
<ul>
<li>Home
<ul>
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
</li>
<li>Woman
<ul>
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
</li>
<li>
<li>Contact Us</li>
</ul>
</nav>
</body>
</html>
Related
Hi I can't seem to be removing the background color after shifting elements. While the elements have moved and they are working perfectly but every timeenter image description here I am clicking on the sign in and sign up, the original space seems to show up as the background color.
HTML code:
<nav>
<ul>
<li><a class="active" href="#"><i class="fa fa-home" aria-hidden="true"></i>Home</a></li>
<li>Blog</li>
<li>Categories
<ul>
<li>Romance</li>
<li>Paranormal</li>
<li>Thriller</li>
<li>Horror</li>
</ul>
</li>
<li>Reviews
<ul>
<li>Star Rating 1</li>
<li>Star Rating 2</li>
<li>Star Rating 3</li>
<li>Star Rating 4</li>
<li>Star Rating 5</li>
</ul>
</li>
<li>Contest
<ul>
<li>Giveaways</li>
<li>Free Books for Reviews</li>
</ul>
</li>
<li>Contact Us
<ul>
<li>For Authors</li>
<li>For Bloggers</li>
</ul>
</li>
<li><i class="fa fa-user-plus" aria-hidden="true"></i>Sign Up</li>
<li><i class="fa fa-fw fa-user"></i>Sign In</li>
</ul>
</nav>
CSS code:
/* navigation top menu */
nav{
position: relative;
top:0;
left:0;
padding: 5px 0 0 0;
width: 100%;
font-size: 1em;
}
.active
{
background-color: #F24F1B;
color: white;
}
nav::after{
content:'';
display: block;
clear:both;
}
nav ul{
list-style: none;
margin:0;
padding:0;
position: relative;
right: 200px;
}
nav ul li:hover {
background-color: #F24F1B;
}
nav ul li:hover > ul {
display: block;
}
nav ul li a {
display: inline-block;
color:black;
padding: 10px 20px;
text-decoration: none;
width: 125px;
position: relative;
}
nav ul li a:visited {
color:black;
}
nav ul li a .active{
color: white;
}
nav ul li a:hover {
background-color: #F24F1B;
color: white;
}
nav ul ul {
position: relative;
top: 100%;
background-color: #F24F1B;
display: none;
position: relative;
right: 0px;
}
nav ul ul li {
position: relative;
border-bottom: 2px solid rgb(128, 104, 104);
}
nav ul ul ul {
left: 100%;
top: 0px;
}
/* top level */
nav>ul {
padding-left: 200px;
color:white;
}
nav>ul>li {
float: left;
}
nav>ul>li>a {
width: auto;
padding: 10px 20px 15px 20px;
}
.signed {
position: relative;
left: 300px;
}
Your issue is because your background-color is on the li and not on a.signed but you are moving your a.signed with left: 300px; and not the li.
If you put the class .signed to the list item instead of the link, it will work as you'd expected.
Here's the code with the fix: https://codepen.io/MateoStabio/pen/rNWeYXd
I do recommend looking into restructuring your navigation entirely so that the right nav doesn't jump when you hover items on the left navigation.
.signed {
background-color: transparent;
position: relative;
left: 300px;
}
Try This one.
I've been trying to work on this with no success, for some reason the sub list is just not showing up! I've tried: nav > ul > li:hover > ul{} but that seems to break functionality of the code. I'm sure this is a pretty simple issue I'm having.
nav > ul {
list-style: none;
}
nav > ul > li {
padding: 20px;
float: left;
}
nav > ul > li {
background-color: #fff;
}
nav > ul > ul {
display: none;
position: absolute;
top: 100%;
left: 0;
padding: 0;
}
nav > ul > ul > li {
float: none;
width: 200px;
}
nav > ul > li:hover {
color: #4169E1;
display: block;
visibility: visible;
}
body {
background: black;
}
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Secure</li>
<ul>
<li>How secure are we?</li>
<li>We are not secure enough!!</li>
</ul>
<li>Mad</li>
</ul>
</nav>
Simplify your selectors (nav ul ul) is fine
Make the parent li's position: relative so that the position: absolute dropdowns are positioned in relation to them. Use an appropriate top value
In your example, visibility: visible is not doing anything. display: none and display: block are used to hide / show
Nest your lists properly. This is the correct way:
<ul>
<li>Top Menu Item
<ul>
<li>Sub-menu Item</li>
</ul>
</li>
</ul>
Read more: Nested lists on w3.org
CSS / HTML / Demo
* {
margin: 0;
padding: 0;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
padding: 20px;
float: left;
background-color: #fff;
position: relative;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
padding: 0;
}
nav ul ul li {
width: 200px;
background: #FFF;
padding: 10px;
}
nav ul li:hover ul {
color: #4169E1;
display: block;
}
body {
background: black;
}
<nav>
<ul>
<li>Home</li>
<li>About Us
<ul>
<li>This is us!</li>
<li>This is us!</li>
<li>This is us!</li>
<li>This is us!</li>
</ul>
</li>
<li>Secure
<ul>
<li>How secure are we?</li>
<li>We are not secure enough!!</li>
</ul>
</li>
<li>Mad</li>
</ul>
</nav>
To Point out one of the Mistakes you have
<ul>
<li>Home</li>
<li>About Us</li>
<li>Secure
<ul> **--> this should be inside li**
<li>How secure are we?</li>
<li>We are not secure enough!!</li>
</ul>
</li>
<li>Mad</li>
</ul>
and your css
add this
nav > ul > li:hover > ul{
display: block;
opacity: 1;
visibility: visible;
}
check the fiddle
http://jsfiddle.net/ruchan/4fk6y2wu/
Use some more css3 power!
See Demo here
See Fullscreen
<nav>
<ul id="menu">
<li class="category top_level"><a class="selected" href="#">Home</a></li>
<li class="category top_level">About</li>
<li class="category top_level">Secure
<ul class="dropdown">
<li class="item">How secure are we?</li>
<li class="item">We are not secure enough!!</li>
</ul>
</li>
<li class="category top_level last">Mad
</li>
</ul>
</nav>
css
body {
font-family:'Montserrat', sans-serif;
background:#000;
}
ul {
list-style-type: none;
}
#menu a {
text-decoration: none;
white-space: nowrap;
color: #222;
background-color: #fff;
}
#menu li.top_level {
vertical-align: top;
zoom: 1;
display: block;
float: left;
width: 16.5%;
margin-right: 0.2%;
position: relative;
text-align:center;
}
#menu li.last {
margin-right: 0px;
}
#menu .dropdown {
float: none;
z-index: 100;
position: absolute;
width: 100%;
height: 0;
overflow: hidden;
}
#menu .category:hover .dropdown, #menu .category:focus .dropdown {
height:auto;
}
#menu .item a, #menu .category a, #menu .category a:visited, #menu .item a:visited {
line-height:2em;
display:block;
padding:.6em;
border-top: #ffffff 2px solid;
}
#menu .item a:hover, #menu .category a:hover, #menu .item a:focus, #menu .category a:focus {
background:#007dac;
-webkit-transition: background-color 940ms;
-moz-transition: background-color 940ms;
}
#menu a.selected {
color: #ffffff;
background-color: #007dac;
}
I'm trying to make a vertical dropdown menu but doesn't seem to work. It currently doesn't display any text, just a bar going across the top of the page. It is being pushed to be by by 115px for due to requirements. Here's the HTML:
<div id="wrapper">
<h1>Flags </h1>
<nav>
<ul>
<li>Introduction</li>
<li>History</li>
<li>National Flags</li>
<li>International Maritime Signal Flags
<ul>
<li>Maritime Signals: Letters</li>
<li>Maritime Signals: Numbers</li>
</ul>
</li>
</ul>
</nav>
Here is the CSS:
nav {
height:30px;
}
nav ul {
background-color: #5d2c2c;
padding: 0;
list-style: none;
position: relative;
bottom: 115px;
display: block;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: right;
bottom: 115px;
position: relative;
}
nav ul li a {
display: block; padding: 5px 5px;
color: #FFF; text-decoration: none;
text-align:right;
}
nav ul ul {
background: #5d2c2c; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #000;
border-bottom: 1px solid #575f6a;
position: relative;
}
The CSS needed a little work on
Try this FIDDLE it'll work
This was missing:
nav ul li:nth-child(4) ul { display:none; }
nav ul li:nth-child(4):hover ul { display:block; color:red; }
and bottom was removed from this one
nav ul li {
float: left;
position: relative;
}
I found this link the other day, it's an step by step guide with full examples, check it out: http://www.adam-bray.com/blog/91/Easy+HTML+5+%26+CSS+3+Navigation+Menu/
check this fiddle , a similar implementation
<nav>
<ul>
<li class="header">
People
<ul class="content">
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>
<li class="header">
Animals
<ul class="content">
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>
</ul>
</nav>
nav > ul{}
nav > ul > li{float:left;margin:0 5px;background:#cc3333;}
.header li a{background:#eee;color:#cc3333;}
.header li a:hover{color:#fff;background:#cc3333;}
ul{padding:0;}
li{list-style-type:none;}
a{color:#fff;text-decoration:none;padding:5px;display:block;text-align:center;}
.content{
display:none;
}
.header:hover > .content{display:block;}
Check out the JSFiddel Here
I have a CSS Based dropdown menu that drops down on hover but all lists displayed on hover are in the same location, not under the menu item they are associated with. I believe the problem lies with this part of the code...
#menu ul li {
}
but even when I edit this and take away the float I can't seem to figure it out. Maybe someone can point out the mistake I've made. Thanks in advance for the help.
CSS
#menu ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu ul li {
display: block;
position: relative;
float: left;
}
#menu li ul {
display: none;
}
#menu ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
#menu ul li a:hover {
background: #3b3b3b;
}
#menu li:hover ul {
display: block;
position: absolute;
}
#menu li:hover li {
float: none;
font-size: 11px;
}
#menu li:hover a { background: #3b3b3b; }
#menu li:hover li a:hover {
background: #1e7c9a;
}
HTML
<ul id="menu">
<li>Find Us
<ul>
<li>Web Design</li>
<li>Graphic Design</li>
<li>Logo Design</li>
<li>Blog Design</li>
</ul>
</li>
<li>Our Menu
<ul>
<li>This is a project</li>
<li>So is this</li>
<li>and this</li>
<li>don't forget this too</li>
</ul>
</li>
<li>Our Story
<ul>
<li>Support</li>
<li>Quote</li>
<li>General Enquiry</li>
</ul>
</li>
</ul>
http://jsfiddle.net/UfpCm/1/
Use inline-block on #menu li.
I have this site here http://surfthecurve.ca/ and I have a navigation for each nav item there is a drop down menu, the menu works fine, I just cant seem to get it to go vertically.
Here is the CSS for the navigation
.navigation{
width:100%;
background-color:#353636;
font-size:18px;
float:left;
}
.navigation ul {
list-style-type: none;
margin: 0 auto;
width:825px;
}
.navigation li {
float: left;
}
.navigation ul a {
color: #ffffff;
display: block;
padding: 0 105px 0 0;
text-decoration: none;
width:100%;
text-align:center;
text-transform:uppercase;
}
and the CSS for the drop-down
.submenu {
display: none;
}
.submenu li a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 5px 15px 5px 15px;
margin-left: 1px;
white-space: nowrap;
}
.navigation li:hover .submenu {
display: block;
position: absolute;
}
.navigation li:hover .submenu li {
float: left;
font-size: 13px;
}
ul li a:hover {
background: #353636;
}
li:hover a {
background: #353636;
}
li:hover li a:hover {
background: #353636;
}
.navigation ul li ul li a{
padding-left:10px !important;
padding-right:10px !important;
padding-top:0px !important;
padding-bottom:0px !important;
}
and here is the HTML
<div class="navigation">
<ul>
<li>tutoring
<ul class="submenu">
<li>Our Approach</li>
<li>Pricing</li>
</ul>
</li>
<li>the cause
<ul class="submenu">
<li>How It Works</li>
<li>How We Give</li>
<li>Why We Give</li>
</ul>
</li>
<li>company
<ul class="submenu">
<li>About Us</li>
<li>Let's Get In Touch</li>
</ul>
</li>
<li>get involved
<ul class="submenu">
<li>Students</li>
<li>Work For Us</li>
</ul>
</li>
</ul>
</div><!--navigation-->
How would I fix this for my menu goes vertically?
Thanks in advanced,
J
This should be easy enough to get it to display vertically:
.submenu li {
clear: both;
}
What you have to do now is style it, as the individual li elements are different sizes (the element shrink wraps to the size of the text).