What is the proper or best way to do this? I can't fix it :3
The submenu of members shows when you hover to the other menus
What's the problem with my code? I can't figure it out :3
you can see my codes in the link
http://codepen.io/anon/pen/MaxmvO
<html>
<head>
<title>Dashboard</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<header>
<div class="logo">WORKOUT <span>FITNESS CENTER</span></div>
</header>
<div id="container">
<nav>
<ul>
<li>Walk-In</li>
<li>Members</li>
<ul>
<li>List of Members
<li>Subscr</li>
<li>asdasd</li>
</ul>
</li>
<li>Sales</li>
<li>Inventory</li>
<li>Suppliers</li>
<li>Reports</li>
</ul>
</nav>
<div id="content">
SOME CONTENT YAY
</div>
</div>
</body>
</html>
CSS
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300italic,300);
*{
margin: 0;
padding: 0;
}
body {
font-family: 'Open Sans';
}
a{
text-decoration: none;
}
header{
width: 100%;
height: 50px;
border-bottom: 1px solid #858585;
}
.logo {
float: left;
margin-top: 9px;
margin-left: 15px;
}
.logo a{
font-size: 1.3em;
color: #070807;
}
.logo a span{
font-weight: 300;
color: #1AC93A;
}
nav{
width: 250px;
height: calc(100% - 50px);
background-color: #171717;
float: left;
}
#content {
width: :auto;
margin-left: 250px;
height: calc(100% - 50px);
padding: 15px
}
nav li{
list-style: none;
}
nav li a{
color: #ccc;
display: block;
padding: 10px;
font-size: 0.8em;
border-bottom: 1px solid #0a0a0a;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
nav li a:hover{
background-color: #030303;
color: #fff;
padding-left: 80px;
}
nav ul ul {
display: none;
}
nav ul:hover ul{
display: block;
}
Try this http://codepen.io/anon/pen/gaEWJw
HTML
<nav>
<ul>
<li>Walk-In</li>
<li>Members</li>
<li>List of Members
<ul>
<li>Subscr</li>
<li>asdasd</li>
</ul>
</li>
<li>Sales</li>
<li>Inventory</li>
<li>Suppliers</li>
<li>Reports</li>
</ul>
</nav>
CSS
nav ul > li > ul {
display: none;
}
nav ul li:hover ul{
display: block;
}
You need to target the specific element and then show the sub menu. I added an id to this li to make it easier to target and got rid of the </li> so the ul is inside li#members.
<li id="members">Members
<ul>
<li>List of Members</li>
<li>Subscr</li>
<li>asdasd</li>
</ul>
</li>
nav #members:hover ul{
display: block;
}
Related
My menu items are dropping down when I want to hide them off screen with CSS transitions.
I have attempted using display: none on the list items and leaving the menu text, and then on my hover trying to unset to call it back however the items wouldn't return.
CSS
nav {
padding: 2px;
border-radius: 7px;
background-color: #800020;
transition: margin-left 1s;
margin-left: 90%;
}
nav:hover {
margin-left: 275px;
}
nav > ul li {
color: beige;
display: inline;
list-style-type: none;
}
#menu {
color: black;
padding-right: 25px;
}
HTML
<nav>
<ul>
<li id="menu"><b>MENU</b></li>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Experience</li>
<li>Contact</li>
</ul>
</nav>
My goal is to just have the menu text showing and when it's hovered on have it extend out.
You can use white-space:nowrap on the ul to stop the li elements from wrapping.
nav {
padding: 2px;
border-radius: 7px;
background-color: #800020;
transition: margin-left 1s;
margin-left: 90%;
}
nav:hover {
margin-left: 275px;
}
nav > ul {
white-space:nowrap;
}
nav > ul li {
color: beige;
display: inline;
list-style-type: none;
}
#menu {
color: black;
padding-right: 25px;
}
<nav>
<ul>
<li id="menu"><b>MENU</b></li>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Experience</li>
<li>Contact</li>
</ul>
</nav>
I am looking to have it so that when you hover over the nav bar the drop-down menu sits above/on-top of the main content, however at the moment when the menu drops down it is pushing the main image down and not sitting on top as I would expect the z-index property to do.
I have set the nav div to relative and also the main section div to relative but still with no joy!
Anyone out there able to help with this, please?
<div id="top-bar-container">
<img src="img/MSO-logo.jpg" alt="MSO Digital Agency" />
<i id="hamburger-icon" class="fas fa-bars fa-2x"></i>
<nav id="nav-bar">
<ul id="test">
<li>Home</li>
<li>About Us</li>
<li>
Services
<ul>
<li>Web Design</li>
<li>Branding</li>
<li>Consulting</li>
<li>SEO</li>
</ul>
</li>
<li>Our Work</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
<div id="main-section">
<img id="main-img" src="img/main-image.png" alt="" />
</div>
#top-bar-container {
background-color: #ec671c;
width: 100%;
height: 75px;
}
#nav-bar {
width: 75%;
float: right;
padding-right: 50px;
position: relative;
z-index: 1;
}
ul {
list-style: none;
padding: 0;
float: right;
}
ul li {
float: left;
width: 90px;
list-style: none;
margin-top: 10px;
text-align: center;
padding: 5px;
}
ul li:hover {
background-color: #ec671c;
border-radius: 5%;
}
ul li a {
text-decoration: none;
color: white;
}
ul li a:hover {
color: orange;
}
ul li ul {
line-height: 25px;
}
ul li ul li {
display: none;
font-size: 13px;
}
ul li ul li a {
color: white;
}
ul li:hover ul li {
display: block;
padding: 0px;
}
#hamburger-icon {
display: none;
color: white;
position: absolute;
right: 20px;
top: 20px;
}
#hamburger-icon:hover {
color: orange;
}
#main-section {
width: 100%;
height: 100vh;
position: relative;
}
#main-img {
width: 100%;
height: 100vh;
}
The #main-section is pushed down because the dropdown menu is positioned within the flow of the document.
When it is not hovered, it has display: none which takes it out of the DOM.
When hover, it switches to position: block which puts it back - and it occupies space, and pushes the main-content down.
You can test this by adding the desired end-result display: block by default, and see how the document would look in it's expanded state.
You need to apply position: absolute to your drop-down, in order for it to not interfere with the document flow. You could also move the z-index: 1 directly on it, if that is the content that should be on top - or you could leave it on the parent, and should work just as well. - the z-index is not the problem here.
#top-bar-container {
background-color: #ec671c;
width: 100%;
height: 75px;
}
#nav-bar {
width: 75%;
float: right;
padding-right: 50px;
}
ul {
list-style: none;
padding: 0;
float: right;
background-color: #ec671c;
}
ul li {
float: left;
width: 90px;
list-style: none;
margin-top: 10px;
text-align: center;
padding: 5px;
position:relative;
}
ul li:hover {
background-color: #ec671c;
border-radius: 5%;
}
ul li a {
text-decoration: none;
color: white;
}
ul li a:hover {
color: orange;
}
ul li ul {
line-height: 25px;
}
ul li ul li {
display: none;
font-size: 13px;
}
ul li ul li a {
color: white;
}
ul li:hover ul li {
display: block;
padding: 0px;
}
#hamburger-icon {
display: none;
color: white;
position: absolute;
right: 20px;
top: 20px;
}
#hamburger-icon:hover {
color: orange;
}
#main-section {
width: 100%;
height: 100vh;
}
#main-img {
width: 100%;
height: 100vh;
}
#top-bar-container >nav >ul > li > ul{
position:absolute;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
</style>
</head>
<body>
<div id="top-bar-container">
<img src="img/MSO-logo.jpg" alt="MSO Digital Agency" />
<i id="hamburger-icon" class="fas fa-bars fa-2x"></i>
<nav id="nav-bar">
<ul id="test">
<li>Home</li>
<li>About Us</li>
<li>
Services
<ul>
<li>Web Design</li>
<li>Branding</li>
<li>Consulting</li>
<li>SEO</li>
</ul>
</li>
<li>Our Work</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
<div id="main-section">
<img id="main-img" src="img" alt="" />
</div>
</body>
</html>
hi
You can do in the section ul>li{position:relative} and Also, put in a second UL {position:absolute}
I'm currently doing my first website for fun and I decided to make a fan website of a band I really like, just to start. This is my current website but the element that says "store" is too spaced from the right side. The only way I can find to move is by using " margin '-number' " but it will affect the webpage and increase its width. Can anyone help me?
body {
margin: 0;
background: url(images/moonspell_concert_2.jpg) no-repeat;
background-size: cover;
color: #fff;
}
header {
background-color: #000;
}
header::after {
content:'';
display: table;
clear: both;
}
.logo {
}
nav {
float: right;
font-size: 1.45rem;
font-family: "Roboto",sans-serif;
}
nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
nav ul li {
float: left;
width: 100px;
height: 40px;
background-color: #000;
line-height: 40px;
text-align: left;
text-transform: uppercase;
font-weight: 700;
padding-top: 10px;
padding-bottom: 10px;
position: relative;
}
nav ul li a {
text-decoration: none;
color: #fff;
display: block;
font-size: 0.85rem;
}
nav ul li a:hover {
color: darkgoldenrod;
-webkit-transition: 300ms ease;
transition: 300ms ease;
}
nav ul li ul li {
display: none;
width: 140px;
padding: 0 7px;
text-transform: none;
font-weight: 400;
}
nav ul li ul li a:hover {
color: #fff;
}
nav ul li:hover ul li {
display: block;
}
nav ul li ul li:hover {
background-color: darkgoldenrod;
color: #fff;
}
#news {
margin-right: -46px;
}
#band {
margin-right: -50px;
}
#tour {
margin-right: -50px;
}
#media {
margin-right: -43px;
}
#discography {
margin-right: 10px;
}
#store {
}
.default-cursor /* Cursor fica default nos elementos que não são páginas */ {
cursor: default;
}
<!DOCTYPE html>
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moonspell - Fan Website</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body>
<header>
<div class="container" alt="logo" class="logo">
<img src="images/moonspell_logo.png"/>
<nav>
<ul>
<li id="news">News</li>
<li id="band">Band
<ul>
<li>Profiles</li>
<li>History</li>
</ul>
</li>
<li id="tour">Tour
<ul>
<li>Tour Dates</li>
<li>Tour Archive</li>
</ul>
</li>
<li id="media">Media
<ul>
<li>Photos</li>
<li>Videos</li>
</ul>
</li>
<li id="discography">Discography
<ul>
<li>Releases</li>
<li>Videography</li>
</ul>
</li>
<li id="store">Store</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
You have set width: 100px on nav ul li, this is what is determining how much space there is to the right of the store element.
If you're happy with using widths for layout in this way then you could simply reduce the width of the store element like so:
#store {
width: 60px;
}
I need some help with my code. I created a drop-down navigation menu. But when I hover over the sub-menus it pushes the main content of my website down. I don't want that. I want to be able to look at the sub-menus without infecting any of my main content. If I hover the menu it is pushing the other parts of the menu down. I like that, but when I tried to use position absolute, it isn't moving the other parts of the menu down anymore.
(Sorry for my bad English)
A part of the html code:
<nav class="navigation">
<ul class="mainmenu">
<li>Home</li>
<li>Trajecten
<ul class="submenu">
<li>Sport</li>
<li>Techniek</li>
<li>Moderne Menia</li>
<li>Fast Lane English</li>
</ul>
</li>
<li>2017/18
<ul class="submenu">
<li>Examenreis Berlijn</li>
<li>Examenreis Londen</li>
<li>Examenreis Parijs</li>
<li>Introductie</li>
</ul>
</li>
<li>2016/17
<ul class="submenu">
<li>Diploma uitreiking Havo</li>
<li>Diploma uitreiking Mavo</li>
<li>Introductie</li>
<li>Open Dag</li>
</ul>
</li>
</ul>
</nav>
<center>
<p id="content">2017/18</p>
<img id="picture" src="images/2017,18/Berlijn.jpg">
</center>
Css code:
#content{
font-size: 25px;
position:relative;
top: 25px;
}
#picture{
width: 285px;
position:relative;
top: 30px;
}
html, body {
font-family: Arial, Helvetica, sans-serif;
}
/* Navigatie */
.navigation {
position: relative;
top: 100px;
width: 230px;
}
.mainmenu, .submenu {
list-style: none;
padding: 0;
margin: 0;
}
.mainmenu a {
display: block;
background-color: #CCC;
text-decoration: none;
padding: 10px;
color: #000;
}
.mainmenu a:hover {
background-color: #C5C5C5;
}
.mainmenu li:hover .submenu {
display: block;
max-height: 420px;
}
.submenu a {
background-color: #999;
text-align: center;
}
.submenu a:hover {
background-color: #666;
}
.submenu {
overflow: hidden;
max-height: 0;
-webkit-transition: all 0.8s ease-out;
}
body{
display:flex;
flex-direction:row;
}
#content{
font-size: 25px;
}
#picture{
width: 285px;
}
html, body {
font-family: Arial, Helvetica, sans-serif;
}
/* Navigatie */
.navigation {
width: 230px;
}
.mainmenu, .submenu {
list-style: none;
padding: 0;
margin: 0;
}
.mainmenu a {
display: block;
background-color: #CCC;
text-decoration: none;
padding: 10px;
color: #000;
}
.mainmenu a:hover {
background-color: #C5C5C5;
}
.mainmenu li:hover .submenu {
display: block;
max-height: 420px;
}
.submenu a {
background-color: #999;
text-align: center;
}
.submenu a:hover {
background-color: #666;
}
.submenu {
overflow: hidden;
max-height: 0;
-webkit-transition: all 0.8s ease-out;
}
center{
width:calc(100% - 230px);
display:flex;
flex-grow:1;
text-align:center;
flex-direction:column;
align-items: center;
}
<nav class="navigation">
<ul class="mainmenu">
<li>Home</li>
<li>Trajecten
<ul class="submenu">
<li>Sport</li>
<li>Techniek</li>
<li>Moderne Menia</li>
<li>Fast Lane English</li>
</ul>
</li>
<li>2017/18
<ul class="submenu">
<li>Examenreis Berlijn</li>
<li>Examenreis Londen</li>
<li>Examenreis Parijs</li>
<li>Introductie</li>
</ul>
</li>
<li>2016/17
<ul class="submenu">
<li>Diploma uitreiking Havo</li>
<li>Diploma uitreiking Mavo</li>
<li>Introductie</li>
<li>Open Dag</li>
</ul>
</li>
</ul>
</nav>
<center>
<p id="content">2017/18</p>
<img id="picture" src="images/2017,18/Berlijn.jpg">
</center>
made a few changes,
now it's better centerd
you can make one of the menus open if you use js
Try this:
CSS
nav, center{
display: inline-block;
vertical-align: top;
}
center{
position: relative;
top: 100px;
}
Note: <center> tag is obsolete in HTML5
DEMO HERE
i have been trying to create a navigation bar with a drop-down menu in it. after a few hours of looking have had found the problem is that as the cursor moves down the drop-down and into the next div underneath it, it disappears.
i have been trying to but cannot figure out how to fix it.
here is the jsfiddle
the page html is :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>E-book</title>
<link href="../css/style.css" rel="stylesheet" type="text/css">
<link href="../css/button.css" rel="stylesheet" type="text/css">
<link href="../css/dropdown.css" rel="stylesheet" type="text/css">
<script src="../script/script.js"></script>
</head>
<body>
<div class="wrapper">
<div class="header">
<span><h1>AS Level E-Book</h1></span>
</div>
<div class="nav-wrapper">
<nav class="menu-wrap">
<ul>
<li>Introduction</li>
<li>Online Services
<ul>
<li>E-Mail</li>
<li>Social Network</li>
<li>Instant Messaging</li>
</ul>
</li>
<li>Life In Info Age</li>
<li>Digital Divide</li>
<li>Conclusion</li>
</ul>
</nav>
</div>
<div class="main"><!-- TemplateBeginEditable name="next and prev" -->
<a><button class="metal radial"><=</button></a>
<a><button class="metal radial">=></button></a>
<!-- TemplateEndEditable --></div>
<div class="cont"><!-- TemplateBeginEditable name="content" -->
content
<!-- TemplateEndEditable -->
</div>
</div>
</body>
</html>
and the css is:
.nav-wrapper{
position:absolute; top: 100px; right: 0; left: 0;
background: linear-gradient(to right, #aaa , #aaa, #ddd, #ddd, #aaa,#aaa);
}
nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
text-align: left;
}
nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
}
nav a:hover {
background-color: #005f5f;
}
nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
nav li li {
font-size: .8em;
}
nav li {
width: 250px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
nav a {
border-bottom: none;
}
nav > ul > li {
text-align: center;
}
nav > ul > li > a {
padding-left: 0;
}
nav li ul {
position: absolute;
display: none;
width: inherit;
}
nav li:hover ul {
display: block;
}
nav li ul li {
display: block;
}
any help would be much appreciated
thanks
Add high(er) z-index to:
nav li ul {
position: absolute;
display: none;
width: inherit;
z-index:9999;
}
About z-index: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
Demo: https://jsfiddle.net/0cd16xjj/1/