Well, according to the video I saw on YouTube, I wanted to start by creating a dropdown list. Everything was fine in the first step, and I created two sub-menus, host and domain, for the Services tag. Now I want to create several submenus for the host and domain submenus, but unfortunately the submenus are not fully displayed and only the last submenu is displayed?
What do you think I should do? where is the problem from ?
Attached image and html and css files
Note: I am totally newbie so simple explanations would be better
*{
box-sizing: border-box;
}
body{
margin: 0;
}
header{
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
}
header .menu{
margin: 0px;
background-color: orange;
}
header nav ul{
margin: 0px;
}
a{
text-decoration: none;
}
.menu ul li{
display: inline-block;
margin: 20px;
padding: 20px;
font-weight: bold;
color: black;
}
ul li:hover{
background-color: rgb(132, 127, 127);
color:rgb(249, 249, 249);
}
.sub-menu1{
width:200px;
display: none;
background-color: orange;
position: absolute;
margin-left: -20px !important;
padding: 0px !important;
transform: translateY(20px);
}
.sub-menu1 li{
width:200px;
margin: 0px !important;
}
.dropdown_menu:hover ul{
display: block ;
}
.sub-menu1 li:hover{
background-color: rgb(103, 197, 109);
color:rgb(249, 249, 249);
}
.sub-host ul li{
width:200px;
background-color: green;
display: none;
margin: 0px !important;
padding: 20px !important;
position: absolute;
transform: translate(140px, -55px);
}
.sub-domain ul li{
width:200px;
background-color: green;
display: none;
margin: 0px !important;
padding: 20px !important;
position: absolute;
transform: translate(140px, -55px);
}
.sub-domain ul li{
display: none;
}
.sub-host:hover li{
display: block;
}
.sub-domain:hover li{
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meat charset="UTF-8">
<meta name="viewport" content="width=device-width, intital-scale=1.0">
<title> Dropdown Menu </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav class="menu">
<ul>
<li> Home </li>
<li> About us </li>
<li> Contact us </li>
<li class="dropdown_menu">
Services
<ul class="sub-menu1" >
<li class="sub-host" >
Host
<ul class="sub-menu2">
<li>1-month</li>
<li>3-month</li>
<li>6-month</li>
<li>12-month</li>
</ul>
</li>
<li class="sub-domain">
Domain
<ul class="sub-menu3">
<li>.ir</li>
<li>.com</li>
<li>.org</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</header>
</body>
</html>
Image
You are facing this issue because by mistake you have made position of .sub-domain ul li and .sub-host ul li as absolute due to which all the sub-menus are stacking on each other and only last one is visible. To fix the issue remove position:absolute. I have also removed two bugs which occur while hovering on submenu. You can see the code.
* {
box-sizing: border-box;
}
body {
margin: 0;
}
header {
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
}
header .menu {
margin: 0px;
background-color: orange;
}
header nav ul {
margin: 0px;
}
a {
text-decoration: none;
}
.menu ul li {
display: inline-block;
margin: 20px;
padding: 20px;
font-weight: bold;
color: black;
}
ul li:hover {
background-color: rgb(132, 127, 127);
color: rgb(249, 249, 249);
}
.sub-menu1 {
width: 200px;
display: none;
background-color: orange;
position: absolute;
margin-left: -20px !important;
padding: 0px !important;
transform: translateY(20px);
}
.sub-menu1 li {
width: 200px;
margin: 0px !important;
}
.dropdown_menu:hover ul {
display: block;
}
.sub-menu1 li:hover {
background-color: rgb(103, 197, 109);
color: rgb(249, 249, 249);
}
.sub-host ul li {
width: 200px;
background-color: green;
display: none;
margin: 0px !important;
padding: 20px !important;
transform: translate(140px, -55px);
}
.sub-domain ul li {
width: 200px;
background-color: green;
display: none;
margin: 0px !important;
padding: 20px !important;
transform: translate(140px, -55px);
}
.sub-domain ul li {
display: none;
}
.sub-host:hover li {
display: block;
}
.sub-domain:hover li {
display: block;
}
.sub-menu2,
.sub-menu3 {
position: absolute;
height: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meat charset="UTF-8">
<meta name="viewport" content="width=device-width, intital-scale=1.0">
<title> Dropdown Menu </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav class="menu">
<ul>
<a href="#">
<li> Home </li>
</a>
<li> About us </li>
<li> Contact us </li>
<li class="dropdown_menu">
Services
<ul class="sub-menu1">
<li class="sub-host">
Host
<ul class="sub-menu2">
<li>1-month</li>
<li>3-month</li>
<li>6-month</li>
<li>12-month</li>
</ul>
</li>
<li class="sub-domain">
Domain
<ul class="sub-menu3">
<li>.ir</li>
<li>.com</li>
<li>.org</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</header>
</body>
</html>
Related
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 am trying to use CSS so when you hover on something it changes background colors. The code I am using does not work though. I can't seem to find out why though. It should work, right?
body {
margin: 0;
font-family: Arial;
font-size: 1em;
}
.navbar-ul, a {
margin: 0;
color: white;
overflow: hidden;
}
li, a {
text-decoration: none;
display: inline-block;
padding: 10px;
background: black;
}
li a :hover {
background-color: blue;
}
li {
list-style-type: none;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dark Website Template by Jordan Baron</title>
<link rel="stylesheet" href="styles-main.css">
</head>
<body>
<div class="navbar">
<ul class="navbar-ul">
<li>HOME</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
</div>
</body>
</html>
Please help!
Adjust your on-hover rule slightly and consider the a element as well:
li:hover, li:hover a {
background: blue;
}
body {
margin: 0;
font-family: Arial;
font-size: 1em;
}
.navbar-ul, a {
margin: 0;
color: white;
overflow: hidden;
}
li, a {
text-decoration: none;
display: inline-block;
padding: 10px;
background: black;
transition: .7s;
}
li:hover, li:hover a {
background: blue;
}
li {
list-style-type: none;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dark Website Template by Jordan Baron</title>
<link rel="stylesheet" href="styles-main.css">
</head>
<body>
<div class="navbar">
<ul class="navbar-ul">
<li>HOME</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
</div>
</body>
</html>
You have a VERY simple mistake.
When you have this code...
li a: hover
remove the space between a and :hover and see the magic.
Now, it should look like this.
li a:hover
#Joseph Young mentioned this, don't forget to upvote his comment.
body {
margin: 0;
font-family: Arial;
font-size: 1em;
}
.navbar-ul, a {
margin: 0;
color: white;
overflow: hidden;
}
li, a {
text-decoration: none;
display: inline-block;
padding: 10px;
background: black;
}
li a:hover {
background-color: blue;
}
li {
list-style-type: none;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dark Website Template by Jordan Baron</title>
<link rel="stylesheet" href="styles-main.css">
</head>
<body>
<div class="navbar">
<ul class="navbar-ul">
<li>HOME</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
.wrapper {
padding-top: 10px;
width: 320px;
margin: 0 auto;
overflow: hidden;
}
.menu {
background: #093;
}
.menu ul {
margin-left: 0;
list-style: none;
text-align: center;
}
.menu ul li {
display: inline-block;
}
.menu ul li a {
display: block;
padding: 10px;
color: #CC0;
text-decoration: none;
}
.menu ul li a:hover {
background: #C30;
color: #FFF;
}
<div class="wrapper">
<div class="menu">
<ul>
<li>HOME
</li>
<li>CONTACT
</li>
<li>ABOUT
</li>
</ul>
</div>
function ServicesMenu() {
document.getElementsByClassName("services-cont")[0].classList.toggle("showS");
}
#charset "UTF-8";
*{padding:0;margin:0;}
body{min-width:300px; margin: 0px; padding: 0px; background:#f8f8f8 }
.wrapper {
max-width: 980px;
height:2000px;
margin: 0px auto;
position: relative;
background-color: #fff;
}
header{
width:980px;
height:105px;
background: #e60000;
}
ul.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
top:63px;
right:60px;
width: 560px;
display: block;
position: absolute;
}
ul.navbar li {
display:inline-block;
Margin-left:15px;
background: black;
}
ul.navbar li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 5px 15px;
text-decoration: none;
font-size: 17px;
}
ul.navbar li a:hover {background-color: #660000;}
.services-cont{display: none;}
.services-cont.showS {
list-style-type: none;
display: block;
background-color: #707070 ;
}
.services-cont.showS li {
float: none;
display: inline;
height:0;
border:none;
}
.services-cont.showS li a {
display: block;
text-align: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="menustyle.css">
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1" />
<script src="MenuFunc.js"></script>
<Title>Menu</title>
</head>
<body>
<div class="wrapper">
<header>
</header>
<ul class="navbar">
<li>Home</li>
<li>Services
<ul class="services-cont">
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
However, the parent <li> appears on top with the nested list below and the rest <li> of the parent list are below aligned with the end of the child list.
How do I get the parent list items Home, Services and Contact horizontally aligned in a straight line?
Explanation
The position: absolute and overflow: hidden properties were interfering and not allowing the dropdown list to display properly. I have commented them in the code so you can see.
You should refrain from using absolute positioning where you can achieve the same effect by simply nesting the tags properly. For instance, I nested your navbar inside the red header.
Code
Press the 'Run code snippet' button below to see the code output.
* {
padding: 0;
margin: 0;
}
body {
min-width: 300px;
margin: 0px;
padding: 0px;
background: #f8f8f8
}
.wrapper {
max-width: 980px;
height: 2000px;
margin: 0px auto;
/*position: relative;*/
background-color: #fff;
}
header {
padding: 20px;
width: 980px;
height: 30px;
background: #e60000;
}
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
/*overflow: hidden;*/
top: 63px;
right: 60px;
width: 560px;
display: block;
/*position: absolute;*/
}
.navbar li {
display: inline-block;
Margin-left: 15px;
background: black;
}
.navbar li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 5px 15px;
text-decoration: none;
font-size: 17px;
}
.navbar li a:hover {
background-color: #660000;
}
.navbar li ul {
position: absolute;
top: auto;
list-style-type: none;
display: none;
background-color: #707070;
}
.navbar li ul li {
float: none;
display: inline;
height: 0;
border: none;
}
.navbar li ul li a {
display: block;
text-align: left;
}
.navbar li:hover>ul {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<Title>Menu</title>
</head>
<body>
<div class="wrapper">
<header>
<ul class="navbar">
<li>Home
</li>
<li>Services
<ul>
<li>Service 1
</li>
<li>Service 2
</li>
<li>Service 3
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</header>
</div>
</body>
</html>
Explanation
You need to add the following two line of CSS code for the nested <li> tag.
ul li ul {
position: absolute;
top: auto;
}
Setting the position to absolute and top to auto will display your nested ul under the parent tag.
Code
Press the 'Run code snippet' button below to see the code output.
ul li {
background: black;
color: white;
display: inline-block;
width: 100px;
}
ul li ul {
margin: 0px;
padding: 0px;
background: grey;
/*YOU NEED THE TWO LINES BELOW*/
position: absolute;
top: auto;
}
ul li ul li {
color: white;
background: grey;
display: block;
width: 80px;
padding: 10px;
}
<html>
<body>
<ul>
<li>
Home
</li>
<li>
Services
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>
Contact
</li>
</ul>
</body>
</html>
I've finished coding my website for a 1024x768 resolution and now want to add #media queries to my code so that the sidebar disappears when the screen is at a width of 980px and then stays like that all the way down from there. I have tried adding the #media max-width 980 myself but it does not seem to be working at all. I've also tried in various places on the page but again, no luck. It's so frustrating! Code Below (Sorry if it's really long, I'm gonna leave it all in there to avoid any questions regarding code).
HTML:
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<title>Lakeside Books</title>
<link rel="stylesheet" type="text/css" href="masterstyle.css">
<meta name="viewsize" content="width-device-width,initial-scale=1.0">
<!--[if IE]>
<script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<nav id="nav">
<h3 id="welcometext">Welcome To<br>Lakeside Books</h3>
<div id="searchbar">
<form action="http://www.example.com/search.php">
<input type="text" name="search" placeholder=" ...Search Book Title" class="searchstyle"/>
</form>
</div>
<ul>
<li style="background-color: #333">
<a href="1Index.html" class="link">
<span style="color: #ed786a">Home</span>
</a>
</li>
<li>
<a href="2Catgeories.html" class="link">
Categories
</a>
</li>
<li>
<a href="http://example.com" class="link">
Bestsellers
</a>
</li>
<li>
<a href="http://example.com" class="link">
Find Us
</a>
</li>
<li>
<a href="http://example.com" class="link">
Contact
</a>
</li>
</ul>
</nav>
</div>
CSS:
html, body { /* ### */
margin:0;
padding:0;
height:100%;
width:100%;
}
body {
background-color: #fdfdfd;
font-family: Arial, "Open Sans", sans-serif-light, sans-serif, "Segoe UI";
}
#wrapper {
width: 100%;
height: 100%;
margin:0 0 0 20%; /* ### */
}
#sidebar {
background-color: #212528;
position: fixed;
width: 20%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
text-shadow: 0.1em 0.1em 0 rgba(0, 0, 0, 0.1);
}
#nav {
color: #DADADA;
display: block;
max-width: 100%;
}
#nav ul {
padding-left: 0;
}
#nav li {
list-style-type: none;
margin: 0;
padding: 0.75em 0 0.75em 0;
text-align: center;
max-width: 100%;
}
#nav li:hover {
background:#333;
}
#nav li a {
display: block;
padding: 0.5em 0;
}
.link {
text-align: right;
margin-right: 25%;
letter-spacing: 1px;
display: block;
}
#nav li a:link{
color: #DADADA;
text-decoration: none;
}
#nav li a:visited{
color: #DADADA;
text-decoration: none;
}
#nav li a:hover{
color: #DADADA;
text-decoration: none;
}
#nav li a:active{
color: #DADADA;
text-decoration: none;
}
#welcometext {
text-align: center;
/*font-style: italic;*/
text-transform: uppercase;
font-size: 1em;
margin-top: 2em;
}
#searchbar {
width: 70%;
margin-left: auto;
margin-right: auto;
padding: 1em 1em 0.5em 1em;
text-align: right;
}
#searchbar .searchstyle{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#searchbar input {
max-width: 95%;
}
/*-------Media Styles-------*/
#media all and (max-width: 980px){
#sidebar{
float: none;
}
}
I am creating ul li submenu for responsive,I dont know how to write for mobile device so far I have done this,Can any one help me to finish this menu. I have written for mobile alone if I execute in firefox and gave the ctrl+shift+m,It is not coming properly.kindly share you knowledge.below I have listed my sample code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>BRIGHT BRIAN</title>
<link rel="shortcut icon" type="image/x-icon" href="css/images/faveicon1.png" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
</head>
<body>
<div id="wrapper">
<header>
<div class="header">
<div class="container">
<div id="logo">
<span class="red">BRIGHT </span><span class="blue">BRAIN</span>
</div>
<!-- navigation -->
<nav id="navigation">
<ul>
<li class="active">Home</li>
<li>About us
<ul class="submenu">
<li>Mission</li>
<li>Vission</li>
<li>Special Features</li>
</ul>
</li>
<li> Course</li>
<li> Feedback
<ul class="submenu">
<li>From Training</li>
<li>From Student</li>
<li>From Parents</li>
</ul>
</li>
<li> Gallery</li>
<li> Franchise
<ul class="submenu">
<li>Low investment</li>
<li>Student work</li>
<li>Monthly good income</li>
</ul>
</li>
<li> Contacts</li>
</ul>
<div class="cl"> </div>
</nav>
<!-- navigation -->
</div><!--End of container-->
</div><!--End of header-->
</header><!--End of header element-->
</div><!--End of wrapper-->
</body>
</html>
For default css:
#charset "utf-8";
/* CSS Document */
#wrapper {
width: 100%;
margin: auto;
}
body {
margin: 0px;
font-size: 12px;
line-height: 16px;
font-family: arial, sans-serif;
color: #808080;
background: #efefef url(images/body.png) repeat-x 0 0;
}
.header {
background: url(images/header1%20copy.png) repeat-x 0 0;
height: 58px;
padding: 29px 0 0 0;
}
#font-face {
font-family: Comic_Sans_MS;
src: url(../font/Comic_Sans_MS.ttf);
}
#logo a {
font-family: Comic_Sans_MS;
text-decoration: none;
font-size: 40px;
font-weight: bold;
line-height: 0px;
}
#logo {
width:250px;
padding: 10px 0px 0px 0px;
float:left;
}
.red {
font-family: Comic_Sans_MS;
color: #E31C00;
}
.blue {
font-family: Comic_Sans_MS;
color: #29166F;
}
.header .container {
margin: auto;
width: 1000px;
}
#navigation {
float:left;
padding-top: 0px;
width:750px;
}
#navigation ul {
list-style: none;
list-style-position: outside;
font-size: 11px;
text-transform: uppercase;
font-weight: bold;
}
#navigation ul li {
float: left;
padding: 0 0 0 44px;
}
#navigation ul li a {
color: #77777b;
text-decoration: none;
}
#navigation ul li a:hover, #navigation ul li.active a {
color: #2497e0;
text-decoration: none;
}
#navigation ul li:hover .submenu {
display: block;
}
#navigation ul .submenu {
position: absolute;
display: none;
width: 800px;
list-style: none;
margin-left: -200px;
}
#navigation ul .submenu li {
float: left;
margin: 0px;
height: 30px;
padding-top: 10px;
cursor: pointer;
}
For mobile css:
#charset "utf-8";
/* CSS Document (common width:260px;)*/
#media only screen and (max-width:530px)
{
.header .container {
width: 260px !important;
}
#logo {
float:left;
width:260px !important;
text-align:center;
}
#logo a {
font-size:25px !important;
}
#navigation {
float:left !important;
width:260px !important;
}
#navigation ul li{
float:left !important;
width:260px !important;
background-color:#CCCCCC;
}
}
.header .container {
width: 480px !important;
}
you have to set the container size properly 260 is small
#media only screen and (max-width:530px)
{
.header .container {
width: 260px !important;
margin:0px;
}