I'm training my CSS to pass to JS, but I'm worried because I'm having some problems doing a drop-down menu.
The concept I already get, but when I put it to work, it's kind of bugging, and moving the nav.
header {
overflow: auto;
}
header img {
float: left;
margin-left: 300px;
margin-top: 10px;
}
header img:hover {
opacity: 0.8;
}
nav {
float: right;
margin-right: 250px;
margin-top: 40px;
}
nav ul {
padding: 0px;
}
nav ul li {
display: inline;
margin-right: 50px;
border-right: 1px solid black;
}
nav ul li:last-child {
border-right: none;
}
nav ul li a {
color: black;
text-decoration: none;
font-weight: bold;
font-family: roboto;
margin-right: 50px
}
nav ul li a:hover {}
nav li ul {
display: none;
}
nav li:hover ul {
display: block;
position: relative;
}
nav li:hover li {
float: none;
}
<header>
<img src="logo.png">
<nav>
<ul>
<li>
Menu 01
<ul>
<li>Submenu 01</li>
</ul>
</li>
<li>Menu 02</li>
<li>Menu 03</li>
<li>Menu 04</li>
</ul>
</nav>
</header>
I sent the code with the img tag just to make clear the position of the stuff. I'm also learning the stuff, so it'll probably be very bad in others monitors.
nav li ul{
display: none;
position:absolute;
}
nav li:hover ul{
display: block;
}
thats all
Related
I'm trying to create a dropdown menu for my personal website but something doesn't seem to go right.
HTML:
<header class="mainheader">
<nav class="nav">
<ul>
<li>Home</li><li>
League</li><li>
<ul class="nav-dropdown">
<li>bbva</li>
<li>barclays premier league</li>
</ul>
Contact</li>
</ul>
</nav>
</header>
CSS:
.mainheader, .header-text, .header-text-soccer {
background-color: green;
margin-left: 60px;
margin-right: 60px;
margin-top: 20px;
height: 60px;
border-radius: 6px;
}
.mainheader nav ul li a {
text-decoration: none;
color: white;
}
.mainheader nav ul li {
display: inline-block;
padding: 20px;
color: white;
}
.nav ul li:hover {
background-color: #41a608;
height: 20px;
border-radius: 2px;
}
The last few lines of code are the problem I think. The hover part covers every line-item that is within the .nav , but I don't know how to seperate the main navigation links from the sub navigation links (which should drop down) in css.
Can anyone explain to me what code I should add to let it work?
thanks.
I modified your complete code:
Here is it, There are several modification. This is may be helpful for you. You need to hide your drop-down option first and find out the time when firing it out and also how to fire.
And one important thing, you have to set your drop-down options as absolute, so that it is the child of some main option/ menu.
Modified HTML:
<header class="mainheader">
<nav class="nav">
<ul>
<li>Home</li>
<li>
League
</li>
<li>Dropdown
<ul class="nav-dropdown">
<li>bbva</li>
<li>barclays premier league</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
</header>
Modified CSS:
.mainheader, .header-text, .header-text-soccer {
background-color: green;
margin-left: 60px;
margin-right: 60px;
margin-top: 20px;
height: 60px;
border-radius: 6px;
position: relative;
}
.mainheader nav ul li a {
text-decoration: none;
color: white;
}
.mainheader nav ul li ul{
display: none;
}
.mainheader nav ul li {
display: inline-flex;
padding: 20px;
color: white;
}
.nav ul li:hover {
background-color: #41a608;
border-radius: 2px;
}
.nav ul li:hover ul{
background: #aaa none repeat scroll 0 0;
display: block;
margin-left: -20px;
padding: 0;
position: absolute;
top: 60px;
width: 200px;
}
.mainheader nav ul li ul li{
box-sizing: border-box;
color: white;
display: inline-block;
padding: 20px;
width: 100%;
}
I suppose this is what you need:
https://jsfiddle.net/8f2hvdfh/1/
Your CSS was a mess. Check out a guide on how to make CSS dropdown menus: http://www.w3schools.com/css/css_dropdowns.asp
This gives you the basic setup:
nav ul ul {
position:absolute;
display:none;
padding-left:0;
}
nav ul li {
display:inline-block;
height:60px;
}
nav ul ul li {
display:block;
}
nav ul li a {
text-decoration:none;
color:white;
display:block;
padding:21px;
}
nav ul li:hover ul {
display:block;
}
The rest is bells and whistles. Good luck.
I made a drop down nav menu which also partially hovers over the aside. But when I hover over the drop down menu part that is over the aside, the nav bar collapses and I end up selecting the aside. Also parts of the aside are over the nav sub menu.
This picture shows the overlap. The orange one is being hovered, when moving the mouse to the left half, into the grey aside area but still over the nav sub menu, the 'Stats' sub menu collapses and the 'Data sheet' link gets selected.
I've tried all kinds of things with z-index and adjusting positions and so on but I don't know what I'm doing wrong.
JSFiddle shows the problem.
HTML:
<nav>
<ul>
<li>Home</li>
<li>Stats
<ul>
<li>Graph</li>
<li>DataSheet</li>
<li>Print</li>
</ul>
</li>
<li>Projects
<ul>
<li>View</li>
<li>Add</li>
<li>Edit</li>
</ul>
</li>
<li>Employees
<ul>
<li>View</li>
<li>Add</li>
<li>Edit</li>
</ul>
</li>
<li>Settings</li>
<li>About</li>
</ul>
</nav>
<aside>
<ul>
<li><a>Graph</a></li>
<li><a>Data sheet</a></li>
<li><a>Print graph</a></li>
</ul>
</aside>
CSS:
nav {
background: black;
width: auto;
height: 50px;
font-weight: bold;
}
nav ul {
list-style: none;
}
nav ul li {
height: 50px;
width: 125px;
float: left;
line-height: 50px;
background-color: #000;
text-align: center;
position: relative;
}
nav ul li a {
text-decoration: none;
color: #fff;
display: block;
}
nav ul li a:hover {
background-color: #ff6a00;
}
nav ul ul {
position: absolute;
display: none;
}
nav ul li:hover > ul {
display: block;
}
aside {
float: left;
width: 200px;
height: 700px;
background: grey;
}
aside input {
background-color: red;
}
aside ul {
list-style: none;
/*no bulets*/
height: 100%;
}
aside ul li {
height: 50px;
width: 100%;
float: left;
border-bottom: 1px solid black;
line-height: 50px;
text-align: center;
position: relative;
}
aside ul li a {
text-decoration: none;
width: 100%;
color: #fff;
display: block;
}
aside ul li a:hover {
background-color: #ff6a00;
display: block;
}
Add z-index to your nav ul element:
nav ul {
list-style: none; /*no bulets*/
z-index: 100;
}
Updated Fiddle
For more information about the z-index style and what it does, click here.
I am working on a project and I am assigned to show a nested menu, I mean Drop down menu but I dont know what am I doing wrong here. Can anyone help me out ?
HTML
<div id="nav">
<ul>
<li>Menu Num 1</li>
<li>Menu Num 2
<ul>
<li>Sub Menu 2.1</li>
<li>Sub Menu 2.2</li>
<li>Sub Menu 2.3
<ul>
<li>Sub Sub Menu 2.3.1</li>
<li>Sub Sub Menu 2.3.2</li>
<li>Sub Sub Menu 2.3.3</li>
<li>Sub Sub Menu 2.3.4</li>
</ul>
</li>
<li>Sub Menu 2.4</li>
</ul>
</li>
<li>Menu Num 3</li>
<li>Menu Num 4</li>
</ul>
</div>
CSS
* {
margin: 0px;
padding: 0px;
}
#nav ul {
list-style-type: none;
font-size: 0px;
}
#nav ul li {
display: inline-block;
position: relative;
}
#nav ul li a {
padding: 10px;
display: block;
font-size: 12px;
text-decoration: none;
font-family: sans-serif;
border: 1px solid #008080;
margin: 5px;
}
#nav ul li a:hover {
background: #a1a1a1;
}
#nav ul ul {
display: none;
}
#nav ul li:hover > ul {
position: absolute;
display: block;
width: 100%;
}
My only problem is the li items are not shown properly under each parent li. I need a solution and for further code inspection I have a jsFiddle link.
I have a solution of your problem .you have to do some changes in your css sheet .I add a new block on content in css sheet which helps you to solve your problem.
* {
margin: 0px;
padding: 0px;}
#nav ul {
list-style-type: none;
font-size: 0px;
}
#nav ul li {
display: inline-block;
position: relative;
}
#nav ul li a {
padding: 10px;
display: block;
font-size: 12px;
text-decoration: none;
font-family: sans-serif;
border: 1px solid #008080;
margin: 5px;
}
#nav ul li a:hover {
background: #a1a1a1;
}
#nav ul ul {
display: none;
}
#nav ul li:hover > ul{
position: absolute;
display: block;
width: 100%;
}
#nav ul ul li:hover > ul{
position: absolute;
margin-left:100px;
top:0px;
display: block;
width: 100%;)/* CSS Document */
Trying adding display:block; to your top level hover class
#nav ul li a:hover {
background: #a1a1a1;
display:block;
}
I came across this which may be useful for you http://htmldog.com/techniques/dropdowns/
I have a simple nav with some ULs and LIs. But in some LIs I have another UL to create a sub menu but the submenu is just going towards the right side.
See this fiddle.
HTML:
<header>
<h1 style="float: left; margin-top: 2%;"> Naughty Mama.</h1>
<nav>
<ul>
<li>My Profile
</li>
<li>Inbox
</li>
<li> Notifications
<ul>
<li>Notification 1</li>
<li>Notification 2</li>
<li>Notification 3</li>
</ul>
</li>
</ul>
</nav>
</header>
CSS:
header {
background-color: #ddd;
}
nav {
float: right;
margin-right: 5%;
margin-top: 2%;
}
nav ul li {
display: inline-block;
background-color: #eee;
vertical-align: top;
}
nav ul li a {
color: #fff;
text-decoration: none;
display: block;
padding: 15px;
}
nav ul li a:hover {
color: #000;
background: #aaa;
}
nav ul li ul li {
display: block;
}
How can I align those double nested LIs to left side of the main menu?
Hope I am clear.
Thanks in advance.
Here you go
nav ul li ul{
padding-left:0px;}
Reset your CSS
ul { padding:0;}
Are you talking about doing something like this?
Changes:
nav {
float: right;
margin-right: 5%;
margin-top: 2%;
}
nav ul {
padding-left:0;
margin-left:0;
}
nav > ul { position:relative; }
nav ul li ul {
display: block;
position:absolute;
left:0;
}
I am currently looking into developing a CSS only drop down menu. The idea is when the mouse hovers over a ul tag it will make another ul class appear.
Below is the code that I currently have.
HTML
<head>
<link href="nav.css" rel="stylesheet" type="text/css">
</head>
<ul class="nav">
<li class="topMenu">Home</li>
<ul class="subMenu" id="home">
<li>Hello</li>
<li>World</li>
</ul>
</ul>
CSS
.nav, .topMenu, .subMenu
{
position: relative;
list-style: none;
}
.topMenu
{
position: relative;
float: left;
}
.subMenu
{
display: none;
}
.topMenu a:hover + li
{
display: block;
background-color: blue;
}
The idea is that when the mouse hovers over the li class="topMenu" then the ul class="subMenu" id="home" should appear underneath.
Ideally this should be only in a CSS format without requiring any javascript etc.
Thanks for any help you can provide.
All you really need to do is nest the <ul> within your <li> element.
<nav>
<ul>
<li>Link</li>
<li>
Link
<ul>
<li>Submenu</li>
<li>Submenu</li>
</ul>
</li>
<li>Link</li>
</ul>
</nav>
Here's some CSS that will help you get started:
/* Resets */
nav a {
text-decoration: none;
font: 12px/1 Verdana;
color: #000;
display: block; }
nav a:hover { text-decoration: underline; }
nav ul {
list-style: none;
margin: 0;
padding: 0; }
nav ul li { margin: 0; padding: 0; }
/* Top-level menu */
nav > ul > li {
float: left;
position: relative; }
nav > ul > li > a {
padding: 10px 30px;
border-left: 1px solid #000;
display: block;}
nav > ul > li:first-child { margin: 0; }
nav > ul > li:first-child a { border: 0; }
/* Dropdown Menu */
nav ul li ul {
position: absolute;
background: #ccc;
width: 100%;
margin: 0;
padding: 0;
display: none; }
nav ul li ul li {
text-align: center;
width: 100%; }
nav ul li ul a { padding: 10px 0; }
nav ul li:hover ul { display: block; }
Preview: http://jsfiddle.net/Wexcode/BEhvQ/
It will need some tweaking:
<ul class="nav">
<li class="topMenu">Home</li>
<li class="subMenu">
<ul id="home">
<li>Hello</li>
<li>World</li>
</ul>
</li>
</ul>
.topMenu:hover + .subMenu
{
display: block;
background-color: blue;
}
Demo