I made a dropdown menu with css and i wanted to activate it by hovering over menu button and it works just fine. But problem is that,when i hover below menu button dropdown menu is activated again ,and i don't want that. Here is my HTML and CSS and every help would be more than appreciate.
PS Sorry if you find some typos english is not my native language.
#charset "UTF-8";
body {
background-image: url(../images/home.jpg);
background-repeat: no-repeat;
height: 100%;
}
* {
list-style: none;
text-decoration: none;
margin: 0px;
padding: 0px;
}
.container {
width: 1000px;
height: 100%;
margin: 0px auto;
}
nav ul a {
color: white;
}
nav ul {
width: 100px;
height: 30px;
margin: 270px 460px;
padding-top: 15px;
padding-bottom: 5px;
background-color: #52b3d9;
text-align: center;
color: white;
border-radius: 20px;
}
nav ul li {
width: 100px;
height: 30px;
padding-top: 15px;
padding-bottom: 5px;
background-color: #52b3d9;
margin-top: 5px;
position: relative;
top: 17px;
opacity: 0;
transition: opacity 1s;
-webkit-transition: opacity 1s;
text-align: center;
color: white;
border-radius: 20px;
}
nav ul:hover li {
opacity: 1;
}
nav ul li:hover a {
border-bottom: 2px solid white;
}
li:hover {
background-color: #19B5FE;
border-bottom: 2px solid #434141;
}
ul:hover {
background-color: #19B5FE;
border-bottom: 2px solid #434141;
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Your Website!</title>
<link rel="stylesheet" type="text/css" href="css/screen_styles.css" />
<img id="logo" url(../images/Your_Logo.png) />
</head>
<body>
<div class="container">
<nav>
<ul>HOME
<li>About Us
</li>
<li>Why Us
</li>
<li>Products
</li>
<li>Contact
</li>
</ul>
</nav>
</div>
</body>
</html>
Try this made some css changes to your code. see the overflow hidden changes.
nav ul{
list-style-type:none;
transition:all 0.3s;
max-height:50px;
overflow:hidden;
width:120px;
padding:0px;
}
nav ul li{
height:30px;
width:100px;
padding:10px;
margin-top:5px;
background:teal;
text-align:center;
cursor:pointer;
transition:all 0.3s;
}
nav ul li a{
color:white;
font-family:'segoe ui';
text-decoration:none;
}
nav ul li:hover{
background:yellowgreen;
}
nav ul li:not(:first-child){
opacity:0;
}
nav ul:hover{
max-height:600px;
}
nav ul:hover li{
opacity:1;
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Your Website!</title>
<link rel="stylesheet" type="text/css" href="css/screen_styles.css" />
<img id="logo" url(../images/Your_Logo.png) />
</head>
<body>
<div class="container">
<nav>
<ul>
<li>Home</li>
<li>About Us
</li>
<li>Why Us
</li>
<li>Products
</li>
<li>Contact
</li>
</ul>
</nav>
</div>
</body>
</html>
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>
I'm having some issues with the sliding menu links. Each sliding menu works as intended, but if I try to hover the sliding link in the same horizontal space as the h1 text (the first one, the one that says "PERFIL"), it doesn't work until the cursor leaves the h1 area.
<!doctype html>
<html class="video">
<head>
<meta charset="utf-8">
<title>Title</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<div class="wrapper">
<ul id="menu">
<li id="home">
PERFIL<img src="menu/home.png">
</li>
<li id="3d">
GRAFICA 3D<img src="menu/3d.jpg">
</li>
<li id="3">
AUDIOVISUAL<img src="menu/audio.jpg">
</li>
<li id="4">
FOTOMONTAJE DIGITAL<img src="menu/ps.png">
</li>
<li id="5">
CONTACTO<img src="menu/contact.png">
</li>
</ul>
</div>
<body>
<h1><div id="video">VIDEO</div></h1>
</body>
</html>
.wrapper * {
overflow:hidden;
list-style:none;
margin:0;
padding:0;
}
.wrapper ul li {
display:flex;
margin-bottom:10px;
}
.wrapper ul li a {
background:black;
color:white;
padding:5px 10px;
transform: translateX(calc(-100% + 45px));
transition: transform 1s ease;
text-decoration: none;
}
.wrapper img {
max-width:32px;
margin-left:5px;
}
.wrapper ul li a:hover {
background:black;
color:white;
padding:5px 10px;
transform: translateX(0);
}
.wrapper:hover a:focus {
left: 0;
background: none;
}
.video h1 {
font-family: verdana;
color: white;
text-align: right;
margin-right: 5%;
margin-top: -280px;
margin-bottom: 50px;
text-transform: uppercase;
background-position: center;
transform: skewX(-20deg);
transform-origin: top;
}
.video div {
padding: 2%;
display: inline;
border-radius: 15px;
}
#video {
background-color: black;
padding: 1%;
display: inline;
border-radius: 15px;
}
Here's a mockup of the site
(Jfiddle)
It's because the width of the h1 element overlaps the menu. You can change the width of the h1 and it should works as expected.
See updated fiddle
so, managed to sort my nav bar out the way I like it... However now I've moved onto what I want underneath it. Except I cannot appear to 'gain control' over the 'list' element... What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<title>St George's League - Home</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="shortcut icon" href="images/favicon.ico">
</head>
<body>
<Div class="container">
<ul>
<div class="nav">
<li><img src="images/sgl-logo.jpg" height="145px" alt="SGLLogo" /></li>
<div class="navbar">
<li class="contact">CONTACT</li>
<li class="about">ABOUT
<strong><li class="leagues">LEAGUES</li></strong>
<li class="home">HOME</li>
</div><!--Navbar End-->
</div><!--Nav End-->
</div><!--Container End-->
</div class="list"><strong>
<li>Essex</li>
<li>London</li>
</strong></div><!--Leagues End-->
</body>
</html>
.container {
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
font-family: arial;
z-index: 2;
}
.navbar a {
float: right;
text-decoration: none;
padding-left: 10px;
color: #003399;
}
.nav li {
display: inline;
}
.navbar {
float: right;
padding-top: 67px;
padding-bottom: 45px;
padding-right: 0px;
z-index: 2;
}
#intro img {
position: absolute;
left:0px;
display: block;
margin: 0;
max-width: 100%;
height: auto;
z-index: 1;
}
.list {
position:relative;
top:300px;
}
.list a {
position:relative;
text-decoration:none;
float:left;
font-family:arial;
font-size:75px;
color:black;
}
li a{
color: #000000;
}
This is all you need to gain control of these in css. See the jsfiddle example here
http://jsfiddle.net/fwvc6zsc/
If you want more certainty that you are using the right one you could also change it like this:
strong li a{
color: #000000;
text-decoration: none;
}
Because you using different class
Use this:
.navbar li {
css code
}
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%;
}
I have coded a horizontal navigation as shown below.
But I am having a hard time trying to code a drop down menu for it.
If someone can help me with coding a plain simple drop down menu below Rentals (highlight in the navigation bar in sea blue), I can improve on that.
Thanks
Here is my current html file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<title>Untitled Document</title>
</head>
<body>
<ul class="glossymenu">
<li class="separator"><b>Reservations</b></li>
/* Added for the drop down */
<ul class="child">
<li><b>New Reservation</b></li>
<li><b>Search Reservation</b></li>
<li><b>Search Customer</b></li>
<li><b>Search Vehicle</b></li>
</ul>
<li class="separator"><b>Rentals</b></li>
<li class="separator"><b>Tariffs</b></li>
<li class="separator"><b>Fleet</b></li>
<li class="separator"><b>Tools</b></li>
<li class="separator"><b>Reports</b></li>
<li class="separator"><b>System Management</b></li>
</ul>
</body>
Here is my css code:
.glossymenu{
padding: 0 0 0 0px;
margin: 0 auto 0 auto;
background: url(../images/menur_bg.gif) repeat-x;
height: 36px;
list-style: none;
border:solid 1px #CCC;
}
.glossymenu li{
float:left;
}
.glossymenu li a{
float: left;
display: block;
color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
height: 36px;
line-height: 36px;
text-align: center;
cursor: pointer;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 20px;
}
.glossymenu li a b{
float: left;
display:block;
padding: 0 28px 0 8px;
}
.glossymenu li a:hover{
color: #fff;
background: url(../images/menur_hover_left.gif) no-repeat;
background-position: left bottom;;
}
.glossymenu li a:hover b{
color: #fff;
background-image: url(../images/menur_hover_right.gif);
background-repeat: no-repeat;
background-position: right bottom;
}
.glossymenu li.separator {
background:url(../images/separator.gif) no-repeat;
background-position:right;
padding: 0 5px 0 3.5px;
}
/* Added for the drop down */
.glossymenu .child {
position:absolute;
visibility:hidden;
top:100px;
}
.glossymenu ul li:hover {
visibility:visible;
z-index:9999;
}
Do you want something like
http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm
Added:
Some css based menus
http://purecssmenu.com/ -- guess you can generate the css
http://cssmenumaker.com/drop_down_css_menu.php
http://sperling.com/examples/menuh/
in your example i can not see where you set on hover the Second-Level to "display:block".
Here is a simple example for CSS-Dropdown-Menu.
HTML:
<ul class="topLevel">
<li>Car
<ul class="secondLevel">
<li>Car1</li>
<li>Car2</li>
<li>Car3</li>
</ul>
</li>
</ul>
CSS:
.secondLevel{display:none;}
.topLevel:hover ul{display:block;}