I'm trying to make a basic dropdown menu with css and html. However when I hover on the li that has to drop down, my whole menu comes down with it.
This is my code:
<nav class="icons">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Account
<ul id="login">
<li>Change password</li>
<li>Update details</li>
<li>Logout</li>
</ul>
</li>
</ul>
</nav>
And the CSS
nav {
height: 70px;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
ul {
margin: 0;
padding: 0;
list-style: none;
margin-left: 5%;
}
ul li {
display: inline-block;
width: 15%;
text-align: center;
line-height: 70px;
}
ul li a {
text-decoration: none;
color: #fff;
font-size: 2em;
display: block;
}
ul li a:hover {
border-bottom: solid black 1px;
}
ul#login{
margin: 0;
padding: 0;
list-style: none;
}
ul#login li {
display: block;
width: 30%;
text-align: center;
line-height: 70px;
}
ul#login li a {
text-decoration: none;
color: #fff;
font-size: 2em;
display: block;
}
ul#login li ul li{
width: 20%;
}
ul#login li ul li a {
text-decoration: none;
color: #fff;
font-size: 0.7em;
display: block;
}
ul#login li a:hover {
border-bottom: solid black 1px;
}
I know it's a lot of CSS for such a basic menu but I don't know how to make it more compact.
Can someone please tell me what I'm doing wrong with the dropdown menu?
Add this css
ul li{
position:relative;
}
#login{
position:absolute;
top:71px;
left:0;
}
FIDDLE
Related
I can't figure out why the hover state in my css does not work. I've been successful in hiding the sub navigation, but can't get it to reappear on rollover. I Any help would be appreciated. Thanks.
Here's the html:
<nav>
<ul>
<li>writings</li>
<ul>
<li>devotionals</li>
<li>published</li>
<li>articles</li>
</ul>
<li>fundraising</li>
<li>about</li>
<li>contact</li>
</ul>
</nav>
and the css:
.nav {
position: relative;
margin-left: 200px;
margin-top: -50px;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav > ul > li {
float: left;
font-size: 30px;
}
.nav ul::after {
content:'';
display: block;
clear: both;
}
.nav ul li:hover > ul {
display: block;
}
.nav ul ul {
float: left;
display: block;
position: absolute;
top: 90%;
display: none;
line-height: 5px;
}
nav ul li a {
display: inline-block;
color: rgb(92,178,227);
font-family: 'Josefin Sans', sans-serif;
padding: 10px 20px;
text-decoration: none;
}
You need the sub nav inside of the list item:
<li>writings
<ul>
<li>devotionals</li>
<li>published</li>
<li>articles</li>
</ul>
</li>
I made a menu, and I want the dropdown to go centered underneath the 'Fruitsoorten' tab. But now all three of the items are next to each other.
Does anyone know how to fix this? Thanks in advance.
nav {
float: right;
border-radius: 15px;
margin-right: 15%;
}
nav ul {
list-style-type: none;
margin-top: 55px;
background-color: black;
}
nav li {
display: inline-block;
position: relative;
padding: 10px;
}
nav li ul {
display: none;
}
nav li li {
display:
}
nav li:hover ul {
display: block;
}
nav a {
text-decoration: none;
color: white;
font-size: 20px;
}
nav li:hover {
background-color: gray;
}
<nav>
<ul>
<li>Home</li>
<li>
Fruitsoorten
<ul>
<li>Kersen</li>
<li>Appels</li>
<li>Pruimen</li>
</ul>
<li>
<li>Team</li>
<li>Agenda</li>
<li>Foto's</li>
<li>Vacatures</li>
<li>Contact</li>
</ul>
</nav>
You can also try this styles.
http://codepen.io/nehemc/pen/LkyQvq
nav {
float: right;
border-radius: 15px;
margin-right: 15%;
}
nav ul {
list-style-type: none;
margin-top: 55px;
background-color: black;
}
nav li {
display: inline-block;
position: relative;
}
nav a {
text-decoration: none;
color: white;
font-size: 20px;
padding: 10px;
display:block;
}
nav ul ul {
display: none;
position: absolute;
z-index: 999;
left: 0;
margin-top: 0;
}
nav li:hover ul {
display: block;
}
nav li:hover {
background-color: gray;
}
Add following code to reflect
nav ul { margin-top: 0; }
nav li ul {
display: none;
position: absolute;
left: 0;
z-index: 9;
}
Also clear your HTML code with proper closing of </li>
To affect your inline-block styling to main ul only,
Do this:
nav>ul>li {
display: inline-block;
position: relative;
padding: 10px;
}
instead of
nav li { display: inline-block; position: relative; padding: 10px; }
nav {
float: right;
border-radius: 15px;
margin-right: 15%;
}
nav ul {
list-style-type: none;
margin-top: 55px;
background-color: black;
}
nav>ul>li {
display: inline-block;
position: relative;
padding: 10px;
}
nav li ul {
display: none;
}
nav li li {
display:
}
nav li:hover ul {
display: block;
}
nav a {
text-decoration: none;
color: white;
font-size: 20px;
}
nav li:hover {
background-color: gray;
}
<nav>
<ul>
<li>Home
</li>
<li>Fruitsoorten
<ul>
<li>Kersen
</li>
<li>Appels
</li>
<li>Pruimen
</li>
</ul>
</li>
<li>Team
</li>
<li>Agenda
</li>
<li>Foto's
</li>
<li>Vacatures
</li>
<li>Contact
</li>
</ul>
</nav>
is that what you want?
nav {
float: right;
border-radius: 15px;
margin-right: 15%;
}
nav ul {
list-style-type: none;
background-color: black;
}
nav li {
display: inline-block;
position: relative;
padding: 10px;
}
nav li ul {
display: none;
}
nav li li {
display:
}
nav li:hover ul {
display: block;
position: absolute;
left: 0;
padding:0;
}
nav a {
text-decoration: none;
color: white;
font-size: 20px;
}
nav li:hover {
background-color: gray;
}
ul.inner li{width:83%}
<nav>
<ul>
<li>Home</li>
<li>Fruitsoorten
<ul class="inner">
<li>Kersen</li>
<li>Appels</li>
<li>Pruimen</li>
</ul>
<li>
<li>Team</li>
<li>Agenda
<li>Foto's</li>
<li>Vacatures</li>
<li>Contact</li>
</ul>
</nav>
I'm new with html and css but I'm making a responsive dropdown menu and I cant find why my menu/navigation bar won't center in the desktop version.
I found the menu from here and downloaded it.
Here is my code:
<style>
#import url(http://fonts.googleapis.com/css?family=roboto);
body {
background: #212121;
font-size: 22px;
line-height: 32px;
color: #ffffff;
margin: 0;
padding: 0;
word-wrap: break-word !important;
font-family: 'roboto', sans-serif;
}
h1 {
font-size: 60px;
text-align: center;
color: #FFF;
}
h3 {
font-size: 30px;
line-height: 34px;
text-align: center;
color: #FFF;
}
h3 a { color: #FFF; }
a { color: #FFF; }
h1 {
margin-top: 100px;
text-align: center;
font-size: 60px;
line-height: 70px;
font-family: 'roboto', sans-serif;
}
#container {
margin: 0 auto;
max-width: 890px;
}
p { text-align: center; }
.toggle, [id^=drop] {
display: none;
}
nav {
margin: 0;
padding: 0;
background-color: #254441;
}
#logo {
display: block;
padding: 0 30px;
float: left;
font-size: 20px;
line-height: 60px;
}
nav:after {
content: "";
display: table;
clear: both;
}
nav ul {
float: right;
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
margin: 0px;
display: inline-block;
float: left;
background-color: #254441;
}
nav a {
display: block;
padding: 0 20px;
color: #FFF;
font-size: 20px;
line-height: 60px;
text-decoration: none;
}
nav ul li ul li:hover { background: #000000; }
nav a:hover { background-color: #000000; }
nav ul ul {
display: none;
position: absolute;
top: 60px;
}
nav ul li:hover > ul { display: inherit; }
nav ul ul li {
width: 170px;
float: none;
display: list-item;
position: relative;
}
nav ul ul ul li {
position: relative;
top: -60px;
left: 170px;
}
li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }
/* Media Queries
--------------------------------------------- */
#media all and (max-width : 768px) {
#logo {
display: block;
padding: 0;
width: 100%;
text-align: center;
float: none;
}
nav { margin: 0; }
.toggle + a,
.menu { display: none; }
.toggle {
display: block;
background-color: #254441;
padding: 0 20px;
color: #FFF;
font-size: 20px;
line-height: 60px;
text-decoration: none;
border: none;
}
.toggle:hover { background-color: #000000; }
[id^=drop]:checked + ul { display: block; }
nav ul li {
display: block;
width: 100%;
}
nav ul ul .toggle,
nav ul ul a { padding: 0 40px; }
nav ul ul ul a { padding: 0 80px; }
nav a:hover,
nav ul ul ul a { background-color: #000000; }
nav ul li ul li .toggle,
nav ul ul a { background-color: #212121; }
nav ul ul {
float: none;
position: static;
color: #ffffff;
}
nav ul ul li:hover > ul,
nav ul li:hover > ul { display: none; }
nav ul ul li {
display: block;
width: 100%;
}
nav ul ul ul li { position: static;
}
}
#media all and (max-width : 330px) {
nav ul li {
display: block;
width: 94%;
}
}
</style>
<body>
<nav>
<div id="logo">Demo Page</div>
<label for="drop" class="toggle">Menu</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li>Home</li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-1" class="toggle">Service +</label>
Service
<input type="checkbox" id="drop-1"/>
<ul>
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
</ul>
</li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-2" class="toggle">Portfolio +</label>
Portfolio
<input type="checkbox" id="drop-2"/>
<ul>
<li>Portfolio 1</li>
<li>Portfolio 2</li>
<li>
<!-- Second Tier Drop Down -->
<label for="drop-3" class="toggle">Works +</label>
Works
<input type="checkbox" id="drop-3"/>
<ul>
<li>HTML/CSS</li>
<li>jQuery</li>
<li>Python</li>
</ul>
</li>
</ul>
</li>
<li>Blog</li>
<li>Submit</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
<h1> Mobile-compatible Responsive Dropdown Menu Demo </h1>
</body>
Try this.
#nav {
width:750px;
margin:0 auto;
list-style:none;
}
#nav li {
float:left;
}
#nav a {
display:block;
text-align:center;
width:150px; /* fixed width */
text-decoration:none;
}
Method #1 is primarily using margin:auto; to center the nav. If your menu items (li/a) are a fixed width, then this method is probably the easiest way to center your nav. The essentail pieces of code used to center the nav are in bold.
Check out this site for more. Hope it helps!
hey i was learning how to use the drop down menu with css, but i faced two problems:
The length of my first drop down menu changes, even though i kept playing with their percentages.
I am not able to bring my second drop down menu, i guess i don't know how to call the second drop down menu in css even though i gave it a different class name.
Here is the HTML code just for the drop down menu:
<div class="list">
<ul class="style">
<li class="international">International
<ul class="sub1">
<li class> Top 10</li>
<li> All</li>
</ul>
</li>
<li class="pop">Pop
<ul class="sub1" >
<li> Top 10</li>
<li> All</li>
</ul>
</li>
<li class="electronic">Electronic
<ul class="sub1">
<li> Top 10</li>
<li> All
<ul class="sub2">
<li> English</li>
<li> European</li>
<li> International</li>
</ul>
</li>
</ul>
</li>
</div>
and here is the CSS code:
div ul li {
display:inline-block;
background-color:#B2B28F;
float:right;
text-align: center;
width: 22%;
position: relative;
z-index: 1;
bottom: 19px;
padding-top: 5px;
font-size: 18px;
padding-bottom: 3px;
font-weight: bold;
font-family: harrington;
margin-right: 12px;
border-bottom:5px;
margin-bottom: 10px;
text-align: center;
margin-top: 2px;
}
div ul li a {
display: block;
height: 30px;
text-align: center;
border-bottom:5px;
position: relative;
font-size: 20;
z-index: 1;
margin-top: 2px;
}
.sub1 li {
display: none;
position:relative;
width:100%;
height: 20px;
margin-bottom:-8px;
margin-top:12px ;
float: right;
font-size: 17;
margin-right: 4px;
padding: 2px;
text-align: center;
left:-20px;
}
.sub1 li a {
text-align: left;
margin-right: 15px;
}
.sub2 li {
position: relative;
left: 15px;
top: -30px;
width: 100%;
text-align: left;
margin-top: -3px;
margin-bottom: 4px;
display: none;
float: left;
}
div ul li:hover ul li{
display: block;
position: absolute;
top: 27px;
float: left;
width: 97%;
left: 0px;
height: 23px;
border-top: 5px;
text-align: center;
}
div ul li :hover ul li ul li {
display: block;
position: absolute;
text-align: center;
}
a:link {
text-decoration: none;
}
a:visited {
color:#520029;
}
a:hover {
color: #293D66;
}
also any comments on how i did would be appreciated!
Hope you like this..
Just made some changes on your html and css.
HTML:
<div class="nav">
<ul>
<li>International
<ul>
<li> Top 10</li>
<li> All</li>
</ul>
</li>
<li>Pop
<ul>
<li> Top 10</li>
<li> All</li>
</ul>
</li>
<li>Electronic
<ul>
<li> Top 10</li>
<li> All
<ul>
<li> English</li>
<li> European</li>
<li> International</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
CSS:
.nav {
margin: 50px auto;
text-align: center;
}
.nav ul ul {
display: none;
}
.nav ul li:hover > ul {
display: block;
}
.nav ul {
background: #C0C0C0;
padding: 0 20px;
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 {
background: #4b545f;
}
.nav ul li:hover a {
color: #fff;
}
.nav ul li a {
display: block; padding: 10px 20px;
color: #757575; text-decoration: none;
}
.nav ul ul {
background: #5f6975; padding: 0;
position: absolute; top: 100%;
}
.nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a; position: relative;
}
.nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
.nav ul ul li a:hover {
background: #4b545f;
}
.nav ul ul ul {
position: absolute; left: 100%; top:0;
}
Also Here is the fiddle, Check this working here
I would recommend not using absolute positioning and floats to elements that don't need it..
regarding your second sub, I got it working in this example..
div > ul > li {
display:inline-block;
background-color:#B2B28F;
float:right;
text-align: center;
width: 22%;
position: relative;
z-index: 1;
bottom: 19px;
padding-top: 5px;
font-size: 18px;
padding-bottom: 3px;
font-weight: bold;
font-family: harrington;
margin-right: 12px;
border-bottom:5px;
margin-bottom: 10px;
text-align: center;
margin-top: 2px;
}
div ul li a {
display: block;
text-align: center;
padding:5px 0;
position: relative;
font-size: 20px;
z-index: 1;
color:#212121;
padding-left:10px; box-sizing:border-box;
}
ul { padding:0;}
ul li { list-style:none;}
.sub1 { display:none; width:100%;}
.sub1 li {
position:relative;
width:100%;
clear:both;
font-size: 17px;
text-align: center;
}
.sub1 li a {
text-align: left;
}
.sub2 { display:none; position: relative; background:#B2B28F;}
.sub2 li {
width: 100%;
text-align: left;
margin-bottom: 4px;
padding-left:20px;
box-sizing:border-box;
}
.sub2 li a { font-size:14px;}
div ul li:hover ul li{
width: 100%;
left: 0px;
border-top: 5px solid;
text-align: center;
}
div ul li:hover > ._sub { display:block;}
a:link {
text-decoration: none;
}
a:visited {
color:#520029;
}
a:hover {
color: #293D66;
}
http://jsfiddle.net/2mSzr/
notice I make more specific rules with the '>' option in css, so the styling rules will not
apply to the wrong elements..
Also in the HTML I've added _sub class to all sub menus, and changed the behavior so the display:none/block will be on the actual ul._sub elements and not on their li's.. it just
makes more sense..
go over the example above, let me know if you have any questions.
Below is my code, currently when I hover on "About Us" everything below the dropdown menu opens; how can i change the css so that it only hovers when i mouseover, this means, when i hover on "Team", then I should see the menus below it.
also how can i adjust the width so that it is shiffted more to the left.
also when the dropdown menu is longer in lenth, it hides below my content, i want the dropdown menu to be over the body of the page, not in hiding.
thanks in advance you all.
<style>
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #000061;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
display: block;
position: absolute;
}
ul li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
</style>
<body>
<ul id="menu">
<li><b>Home</b></li>
<li><b>About Us</b>
<ul>
<li>Team
<ul>
<li>Profile</li>
<li>Board</li>
</ul>
</li>
</ul>
</li>
<ul>
</body>
JSFiddle: http://jsfiddle.net/LWEry/
Like this:
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #000061;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover > ul {
display: block;
position: absolute;
width: 100%;
}
ul li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
.sub-menu
{
position: absolute;
top: 0;
left: 100%;
}
http://jsfiddle.net/3xWcu/2/
I changed one selector.
FROM
li:hover ul
TO
li:hover > ul
Edited my fiddle above. Added a sub-menu class to the ul containing the Profile and Board li tags:
<ul class="sub-menu">
<li>Profile</li>
<li>Board</li>
</ul>
and added some CSS above.
You mean like this? http://jsfiddle.net/3xWcu/
<style>
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #000061;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
display: block;
position: absolute;
width: 100%;
}
ul li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
</style>
<body>
<ul id="menu">
<li><b>Home</b></li>
<li><b>About Us</b>
<ul>
<li>Team
<ul>
<li>Profile</li>
<li>Board</li>
</ul>
</li>
</ul>
</li>
<ul>
</body>