I am aware to use the absoulte position to the submenu tag; however when I do it solves the problem but only the last entry of the submenu displays. The others seem to have been swallowed up. Please help! My code is shown below:
* {
margin: 0;
padding: 0;
}
body {
background-color: #575768;
}
#topBar {
background-color: #C9A26B;
width: 100%;
height: 70px;
color: white;
font-family: arial, helvetica, sans-serif;
}
.fixedwidth {
width: 1500px;
margin: 0 auto;
}
#logodiv {
padding-top: 5px;
float: left;
border-right: #FFFFFF 1px solid;
padding-right: 30px;
}
#signindiv {
font-weight: bold;
float: left;
font-size: 1em;
width: 90px;
border-right: #FFFFFF 1px solid;
padding: 25px 0 27px 20px;
}
#topmenudiv {
padding-top: 20px;
}
/* Rules for Nav Menu ___________________________________ */
#mainmenu,
.submenu {
list-style-type: none;
}
#mainmenu li {
width: 185px;
text-align: center;
position: relative;
float: left;
margin-right: 4px;
}
#mainmenu ul li {} #mainmenu a {
text-decoration: none;
display: block;
width: 185px;
height: 40px;
background-color: #5E5D5B;
border: 1px solid #CCC;
border-radius: 5px;
color: #EE9A24;
}
#mainmenu .submenu a {
margin-top: 2px;
}
#mainmenu li:hover > a {
background-color: #CFC;
}
#mainmenu li:hover a:hover {
background-color: #FFD8A4;
}
#mainmenu .submenu {
display: none;
}
#mainmenu li:hover .submenu {
display: block;
}
#meat {
clear: both;
padding-top: 20px;
}
footer {
text-align: center;
margin: 0 auto;
}
<!doctype html>
<html>
<head>
<title>ST-LLC About Us</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div id="container">
<div id="topBar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/LLClogo.jpg" width="170px" />
</div>
<div id="signindiv">Sign In
</div>
<div id="topmenudiv">
<ul id="mainmenu">
<li>About Us
</li>
<li> Services
<ul class="submenu">
<li> Project Management
</li>
<li> Digital Content
</li>
</ul>
</li>
<li> Projects
<ul class="submenu">
<li>Active Projects
</li>
<li>Closed Projects
</li>
</ul>
</li>
<li> ST-LLC Publications
<ul class="submenu">
<li> Recent Publications
</li>
<li> Past Publications
</li>
</ul>
</li>
<li> Request for Proposals (RFP)
</li>
<li> Contacts
</li>
</ul>
</div>
<div id="meat">
<p>On June 6, 2004 the ASME Board of Governors (BOG) authorized</p>
Try this on your submenu
#mainmenu .submenu {
display: none;
position: absolute;
top: 100%;
}
Related
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>
Trying to make this drop down menu appear, but I'm not sure what is wrong.
Here is my codepen: https://codepen.io/JBeezy3/pen/PooQwZr
<body>
<div class="container">
<!-- will add in later -->
<div class="header" <img>
</div>
<div class="menu">
<nav>
<ul>
<li><a style="text-decoration:none" href="Home">Home</a></li>
<li><a style="text-decoration:none" href="Home">About</a></li>
<li><a style="text-decoration:none" href="works.html">Works</a>
<ul class="sub-menu">
<li> Digital </li>
<li> Physical </li>
<li> Animation </li>
</ul>
<li><a style="text-decoration:none" href="Home">Contact</a></li>
</ul>
</nav>
</div>
Above all, the text of your sub-menu is displayed black (which is the default color), that's why you don't see it on the black background. Add color: #fff to ul.sub-menu li to make those visible. Then you can fix the rest.
Replace this css
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
}
body {
font-family: verdana;
font-size: 14px;
font-weight: normal;
height: 100%;
background: url(../img) no-repeat;
background-size: cover;
background-attachment: fixed;
background-color: black;
}
.header{
padding: 15px 35px;
display: inline-block;
width: 100%;
}
a{
color: white;
text-decoration: none;
}
.menu {
float: right;
}
.menu ul li {
display: inline-block;
float: left;
line-height: 24px;
margin: 15px;
}
.menu ul li a{
text-decoration: none;
color: #ffffff;
font-size: 24px;
padding: 5px 10px;
}
.menu ul li a:hover{
color: red;
}
.name{
width: 350px;
margin-top: 300px;
margin-right: 500px;
}
.name h5{
color: red;
font-size: 24.5px;
text-align: left;
}
.name h1{
color: white;
font-size: 90px;
line-height: 75px;
}
.sub-menu{
position: absolute;
display: none;
background-color: white;
}
.menu li:hover a + .sub-menu { display: block;}
.sub-menu li{
position: relative;
display: block;
}
.column-left {
float: left;
width: 33.333%;
}
.column-right {
float: right;
width: 33.333%;
padding-left: 0px;
}
.column-center {
display: inline-block;
width: 33.333%;
padding-top: 80px;
}
.row {
color: white;
font-size: 24px;
margin: 150px;
text-align: center;
}
.preview {
width: 90%;
}
.preview2 {
width: 75%;
}
.preview3 {
width: 70%
}
.hero{
max-width: 500px;
margin-left: 500px;
padding-bottom: 1000px;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>John Blair Graphic Designer</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<!-- will add in later -->
<div class="header">
<div class="menu">
<nav>
<ul>
<li><a style="text-decoration:none" href="index.html">Home</a></li>
<li><a style="text-decoration:none" href="Home">About</a></li>
<li><a style="text-decoration:none" href="works.html">Works</a>
<ul class="sub-menu">
<li> Digital </li>
<li> Physical </li>
<li> Animation </li>
</ul>
</li>
<li><a style="text-decoration:none" href="Home">Contact</a></li>
</ul>
</nav>
</div>
<div class="name">
<h5>Graphic Designer</h5>
<h1> John Blair </h1>
</div>
<img class="hero" src="images/hero.jpg">
<footer>
<!-- nav menu when working-->
</footer>
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;
}