I am trying to created a drop down menu with HTML/CSS with hover effect.Below is my HTML code.
<!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" />
<title>Untitled Document</title>
</head>
<style>
body {
background-color:#181818;
margin: 0px;
}
ul li {
display: inline-block;
font-size: 140%;
color: orange;
width: 150px;
background-color: #505050;
height: 50px;
border-radius: 150px;
position: relative;
}
p {
margin-top: 10px;
text-align: center;
margin-bottom: 20px;
}
ul li:hover {
color: #505050;
background-color: orange;
}
/*ul li ul {
visibility: hidden;
}*/
#id2 {
display: none;
position: absolute;
z-index: 999;
left: 0;
}
#id1:hover #id2 {
display: block; /* display the dropdown */
}
</style>
<body>
<ul id="topMenu">
<li><p>Home</p></li>
<li><p id="id1">Projects</p></li>
<ul id="id2">
<li><p>Project 1</p></li>
<li><p>Project 2</p></li>
<li><p>Project 3</p></li>
</ul>
<li><p>About Us</p></li>
<li><p>contact us</p></li>
</ul>
</body>
</html>
I am not sure what I am doing wrong in css code here. Can anyone please help me with the code and How I can implement the hover drop down menu correctly.?
Thanks,
Bhavik
you wrong markup for a drop-down menu
instead
<ul id="topMenu">
<li><p>Home</p></li>
<li><p id="id1">Projects</p></li>
<ul id="id2">
<li><p>Project 1</p></li>
<li><p>Project 2</p></li>
<li><p>Project 3</p></li>
</ul>
<li><p>About Us</p></li>
<li><p>contact us</p></li>
</ul>
to
<ul id="topMenu">
<li><p>Home</p></li>
<li><p>Projects</p>
<ul>
<li><p>Project 1</p></li>
<li><p>Project 2</p></li>
<li><p>Project 3</p></li>
</ul>
</li>
<li><p>About Us</p></li>
<li><p>contact us</p></li>
</ul>
Example:
body {
background-color:#181818;
margin: 0px;
}
ul li {
display: inline-block;
font-size: 140%;
color: orange;
width: 150px;
background-color: #505050;
height: 50px;
border-radius: 150px;
position: relative;
}
p {
margin-top: 10px;
text-align: center;
margin-bottom: 20px;
}
ul li:hover {
color: #505050;
background-color: orange;
}
ul li ul{
display: none;
padding-left: 0;
}
ul li:hover ul{
display: block;
position: absolute; top: 100%; left: 0;
}
<ul id="topMenu">
<li>
<p>Home</p>
</li>
<li>
<p id="id1">Projects</p>
<ul id="id2">
<li>
<p>Project 1</p>
</li>
<li>
<p>Project 2</p>
</li>
<li>
<p>Project 3</p>
</li>
</ul>
</li>
<li>
<p>About Us</p>
</li>
<li>
<p>contact us</p>
</li>
</ul>
look this:
http://jsfiddle.net/412cosa7/
HTML:
the #id1 is not the ancestor of the #id2, so, first ,you can remove #id2 from <p> and add it to <li>, then put #id2's element in #id1's.
In fact,<p> in your source is not necessary.
CSS:
use parent selector ">" .
e.g: #id1:hover > #id2
Related
I have the topnav bar in the middle and when zooming out it stays there, but the picture(logo) and the tickets thing don't. Like you can see everythings is position relative. Also tried with margin auto, margin-left and margin-right auto but it just doesnt stay there. Also tried making the div just in the middle but that didn't work either. Every help is appreciated. :)
body{
margin: 0;
}
#header{
background-color: #a61b2b;
display: grid;
grid-template-columns: 20% 80%;
height: 120px;
align-content: center;
justify-content: flex-end
}
#topnav li{
margin: 0px 5px;
}
#topnav{
position: relative;
top: 40px;
right: 460px;
font-family: 'Open Sans',arial,sans-serif;
color: #f2f2f2;
padding: 14px 16px;
font-size: 12px;
font-weight: bold;
list-style: none;
display: flex;
margin: auto;
}
#topnav a:hover {
background-color: #eb0627;
}
#topnav a{
text-decoration:none;
color: #fff
}
#topnav li:hover ul{
display: block;
list-style: none;
background: black;
color: #fff;
padding: 10px;
position: absolute;
left: 0;
}
#topnav li ul li{
margin: 10px 0px;
}
#logo{
position: relative;
left: 500px;
width: 55%;
}
#tickets{
position: relative;
left: 450px;
background-color: black;
}
.hidden{
display:none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Granada Club de Fútbol | Granada </title>
<link href="style.css" rel="stylesheet" type="text/css"/>
<script src="scripts.js"></script>
</head>
<body>
<div id="header">
<img alt="Logo" id="logo" src="https://i.ibb.co/gTqYynf/logo.png">
<ul id="topnav">
<li>NEWS
<ul class="hidden">
<li>CLUB
</li>
<li>FIRST TEAM
</li>
</ul>
</li>
<li>
THE CLUB
<ul class="hidden">
<li>CLUB INFORMATION
</li>
<li>STRUCTURE
</li>
</ul>
</li>
<li>
FIRST TEAM
<ul class="hidden">
<li>SQUAD </li>
<li>TRAINING</li>
</ul>
</li>
<li>TEAMS
<ul class="hidden">
<li>GRANADA B </li>
<li>GFC LADIES</li>
</ul>
</li>
<li>GRANADA TV
</li>
<li><a id="tickets" href="#">TICKETS</a>
</li>
</ul>
</div>
</body>
</html>
For everyone having a similiar problem, i found a solution. just make a second div tag under the header tag which has a fixed with and margin left and right auto. this makes a div tag in the middle which won't move.
Here's the code of how i fixed it.
body{
margin: 0;
}
a{
transition: all .25s;
}
#header{
background-color: #a61b2b;
display: flex;
grid-template-columns: 20% 80%;
height: 110px;
align-content: center;
justify-content: flex-end;
}
#h2{
width: 975px;
margin-left: auto;
margin-right: auto;
padding-top: 6px;
}
#topnav li{
margin: 0px 5px;
}
#topnav{
position: relative;
font-family: 'Open Sans',arial,sans-serif;
color: #f2f2f2;
padding: 14px 16px;
font-size: 12px;
font-weight: bold;
list-style: none;
display: flex;
margin: auto;
}
#topnav a:hover {
background-color: #eb0627;
}
#topnav a{
text-decoration:none;
color: #fff
}
#topnav li:hover ul{
display: block;
list-style: none;
background: black;
color: #fff;
padding: 10px;
position: absolute;
left: 0;
}
#topnav li ul li{
margin: 10px 0px;
}
#logo{
position: relative;
width: 20%;
}
#tickets{
position: relative;
left: 480px;
background-color: #343434;
padding: 8px;
}
#search{
position: relative;
top: -30px;
left: 650px;
width: 20px;
}
#fb{
padding-right: 5px;
width: 10px;
}
.hidden{
display:none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Granada Club de Fútbol | Granada </title>
</head>
<body>
<div id="header">
<div id="h2">
<img alt="Logo" id="logo" src="https://i.ibb.co/gTqYynf/logo.png">
<img id="search" src="https://cdn.discordapp.com/attachments/629756354701295616/707198877857480744/search-icon.png">
<ul id="topnav">
<li>NEWS
<ul class="hidden">
<li>CLUB
</li>
<li>FIRST TEAM
</li>
</ul>
</li>
<li>
THE CLUB
<ul class="hidden">
<li>CLUB INFORMATION
</li>
<li>STRUCTURE
</li>
</ul>
</li>
<li>
FIRST TEAM
<ul class="hidden">
<li>SQUAD </li>
<li>TRAINING</li>
</ul>
</li>
<li>TEAMS
<ul class="hidden">
<li>GRANADA B </li>
<li>GFC LADIES</li>
</ul>
</li>
<li>GRANADA TV
</li>
<li><a id="tickets" href="#"><img id="fb" src="https://image.flaticon.com/icons/svg/27/27212.svg">TICKETS</a>
</li>
</ul>
</div>
</div>
</body>
</html>
I tried so many times to work on a nested list but it appears in the middle of the page not under its parent. Also does not appear using hover. I tried an tried but nothing works. below is both the html and css. wahat margin and position should I use? what is the problem with hover?
<html>
<head>
<title> Life Clinck </title>
<link href="style.css" type="text/css" rel="stylesheet" >
</head>
<body>
<div id="header">
<img height="200px " width="200px" src="logo.jpg">
<h1> Life Clinck
</h1>
<hr>
</div>
<nav class="navClass">
<ul>
<li> map </li>
<li> apponintment</li>
<li> contact </li>
<li> clincks </li>
<ul class="submenu">
<li> 1 </li>
<li> 2</li>
<li> 3 </li>
<li> 4 </li>
<li> 5 </li>
</ul>
</ul>
</nav>
</body>
</html>
Here is the css code
body {
background-image: linear-gradient(to top, #c1dfc4 0%, #deecdd 100%);
text-align: center;
}
#header {
background: #FFFFFF;
width: 100%;
height:280px;
margin: 0px auto;
}
h1{
text-align: center;
font-family: "Times new Romans";
font: 28pt;
color:#CC0000;
}
hr
{
color: #dfcaca;
height:10pt;
width: 100%;
}
.navClass > ul{
list-style: none;
}
.navClass > ul > li{
padding: 5px 25px;
display: inline-block;
position: relative;
}
a {
text-decoration: none;
}
ul.submenu{
list-style: none;
margin-left: -10px;
display: none;
}
ul.submenu > li{
font-family: "Tahoma";
}
.navClass li:hover
{
background: #FFFFFF;
left: 0;
}
.navClass li:hover .submenu {
display: block;
}
Best Regards
body {
background-image: linear-gradient(to top, #c1dfc4 0%, #deecdd 100%);
text-align: center;
}
#header {
background: #FFFFFF;
width: 100%;
height:280px;
margin: 0px auto;
}
h1{
text-align: center;
font-family: "Times new Romans";
font: 28pt;
color:#CC0000;
}
hr
{
color: #dfcaca;
height:10pt;
width: 100%;
}
.navClass > ul{
list-style: none;
}
.navClass > ul > li{
padding: 5px 25px;
display: inline-block;
position: relative;
}
a {
text-decoration: none;
}
ul.submenu{
list-style: none;
margin-left: -10px;
display: none;
}
ul.submenu > li{
font-family: "Tahoma";
}
.navClass li:hover
{
background: #FFFFFF;
left: 0;
}
.navClass li:hover .submenu {
display: block;
}
<html>
<head>
<title> Life Clinck </title>
<link href="style.css" type="text/css" rel="stylesheet" >
</head>
<body>
<div id="header">
<img height="200px " width="200px" src="logo.jpg">
<h1> Life Clinck
</h1>
<hr>
</div>
<nav class="navClass">
<ul>
<li> map </li>
<li> apponintment</li>
<li> contact </li>
<li> clincks
<ul class="submenu"> /*---> Moved this ul inside upper li, and done...*/
<li> 1 </li>
<li> 2</li>
<li> 3 </li>
<li> 4 </li>
<li> 5 </li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
Move the nested ul inside the li to make it work. See the snippet...
See below the changes...
<li> apponintment</li>
<li> contact </li>
<li> clincks
<ul class="submenu"> /*---> Moved this ul inside upper li, and done...*/
<li> 1 </li>
<li> 2</li>
<li> 3 </li>
<li> 4 </li>
<li> 5 </li>
</ul>
</li>
you need to put the <ul> inside the parent <li>.
Like this:
<ul>
<li>test</li>
<li>test
<ul>
<li>sub-item</li>
<li>sub-item</li>
</ul>
</li>
<li>test</li>
<ul>
I am learning html and css for front-end web development. While writing code for drop-down box in navigation-menu, i am not getting the desired output. In the navigation menu drop down is opening at the left corner but the navigation link is somewhere else. Please help.
HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>
<div id="wpback"></div>
<div id="wallpaper" ></div>
<div id="name"> <!
========================Name of Company================= >
<header>
<h1 class="prince">PRINCE Institute</h1>
<input type="button" value="Log In" style="float:right"></input>
<input type="button" value="Sign Up" style="float:right">
</input>
</header>
What do you want to know?<br><input type="text"></input>
<input type="button" value="Search"></input>
</div>
<div id="menu"> <!
========================Navigation Menu================= >
<ul>
<li>Home</li>
<li>About
<ul>
<li>A1</li>
<li>A2</li>
<li>A3</li>
</ul></li>
<li>Courses
<ul>
<li>Java</li>
<li>Python</li>
<li>Data Base Management System</li>
<li>Machine Learning</li>
<li>Blockchain</li>
</ul></li>
<li>Settings
<ul>
<li>Your Profile</li>
<li>Your Cart</li>
<li>Mode</li>
</ul></li>
</ul>
</div>
<div> <!
========================Content=========================== >
<ul >Courses Offered:
<li>Java</li>
<li>Python</li>
<li>Machine Learning</li>
<li>Block Chain</li>
<li>Data Base Management System</li></ul>
</div>
</body>
</html>
CSS code:
body {
font-family: lucida console;
font-size: 14px;
color: white;
margin-top: 0;
margin-left: 0;
margin-right: 0;
}
#name {
position: relative;
top: 0;
left: 0;
}
.prince {
color: white;
text-align: center;
padding: 5px;
background-color: rgba(65, 15, 0, 0.5);
}
#wpback {
background-color: black;
position: absolute;
width: 100%;
height: 100%;
}
#wallpaper {
background-image: url('tech.jpg');
opacity: 0.1;
position: absolute;
width: 100%;
height: 100%;
}
#menu {
margin-top: 10px;
background-color: rgba(65, 15, 0, 1);
height: 50px;
position: relative;
}
#menu ul {
padding: 0;
margin: 0;
}
#menu ul li {
list-style: none;
display: inline;
}
#menu ul li a {
margin: 10px;
padding: 16px;
text-decoration: none;
color: white;
line-height: 50px;
}
#menu ul li a:hover {
background-color: gray;
color: black;
transition: ease-in-out 0.2s;
}
#menu ul li ul li {
display: none;
}
#menu ul li:hover ul li {
background-color: silver;
display: block;
width: 220px;
}
#menu ul li:hover ul li a {
margin: 10px;
padding: 15px;
text-decoration: none;
line-height: 50px;
color: black;
}
#menu ul li ul li a:hover {
background-color: gray;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>
<div id="wpback"></div>
<div id="wallpaper"></div>
<div id="name">
<!
========================Name of Company================= >
<header>
<h1 class="prince">PRINCE Institute</h1>
<input type="button" value="Log In" style="float:right"></input>
<input type="button" value="Sign Up" style="float:right">
</input>
</header>
What do you want to know?<br><input type="text"></input>
<input type="button" value="Search"></input>
</div>
<div id="menu">
<!
========================Navigation Menu================= >
<ul>
<li>Home</li>
<li>About
<ul>
<li>A1</li>
<li>A2</li>
<li>A3</li>
</ul>
</li>
<li>Courses
<ul>
<li>Java</li>
<li>Python</li>
<li>Data Base Management System</li>
<li>Machine Learning</li>
<li>Blockchain</li>
</ul>
</li>
<li>Settings
<ul>
<li>Your Profile</li>
<li>Your Cart</li>
<li>Mode</li>
</ul>
</li>
</ul>
</div>
<div>
<!
========================Content=========================== >
<ul>Courses Offered:
<li>Java</li>
<li>Python</li>
<li>Machine Learning</li>
<li>Block Chain</li>
<li>Data Base Management System</li>
</ul>
</div>
</body>
</html>
When i am putting no options in the navigation menu then the options Home, About, Couses & Settings are in line but when i am adding options in the menu in dropdown the individual options come downward.
Aligned Dropdown Content
Determine whether the dropdown content should go from left to right or
right to left with the left and right properties.
CSS code
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
right: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
And HTML code is
<div class="dropdown" style="float:left;">
<button class="dropbtn">Left</button>
<div class="dropdown-content" style="left:0;">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown" style="float:right;">
<button class="dropbtn">Right</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
I am trying to build a simple website and i cannot figure out how to do a couple of things.
There is a nav bar, but it is stuck underneath the image at the top, how do i move it down?
I would like to arrange all of the ul's to be alongside each other, horizontally not vertically.
.jumbotron h1 {
color: #ffffff;
font-size: 150px;
font-family: Sans-serif;
font-weight: bold;
text-align: center;
margin-top: 0px;
}
.nav a {
color: #ff0000;
font-size: 50px;
padding-top: 250px;
}
.jumbotron {
background-image: url('http://i118.photobucket.com/albums/o117/Shawnthebro/bandicam2014-03-2311-20-03-210_zpse7f7712f.jpg');
position: absolute;
left: 0px;
top: 0px;
height: 350px;
}
.page h3 {
color: #000000;
font-size: 30px;
font-family: Calibri;
padding-top: 250px;
padding-left: 50px;
}
.page ul {
color: #000000;
font-size: 20px;
font-family: Calibri;
padding-left: 75px;
}
.page a {
color: #000000;
font-size: 15px;
font-family: Calibri;
padding-left: 70px;
}
.nav li {
display: inline;
left: 20px;
position: relative;
}
background:url(./image.png) no-repeat top center;
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="nav">
<div class="container">
<ul>
<li>History of Gaming
</li>
<li>Atari
</li>
<li>Other Games
</li>
<li>Future
</li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1>Gaming: Then, Now & Beyond</h1>
</div>
</div>
<div class="page">
<div class="container">
<div>
<div>
<div>
<h3>History of Gaming</h3>
<ul>
<li>What is gaming?</li>
<li>Pong</li>
<li>Technology Boom</li>
</ul>
<p>Learn more about the history of gaming
</p>
</div>
<div>
<h3>Atari</h3>
<ul>
<li>40 years of fun</li>
<li>Who is Nolan Bushnell</li>
<li>Bought & Sold</li>
</ul>
<p>Learn more about Atari
</p>
</div>
<div>
<h3>Other Games</h3>
<ul>
<li>PC</li>
<li>Xbox</li>
<li>PlayStation</li>
</ul>
<p>Learn more about other games
</p>
</div>
<div>
<h3>Future</h3>
<ul>
<li>Gaming in society</li>
<li>Who is driving who?</li>
<li>CrowdFunding</li>
</ul>
<p>Learn about future gaming
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Well you can either change the jumbotron to position: relative/static
or
make the nav go down a bit:
.nav{
margin-top: 350px;
}
Regarding the uls:
ul {
text-align: center;
background: grey;
}
ul li {
display: inline;
}
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<ul>
Here's what I would do:
First move all of the jumbotron above the nav in the HTML. Set them both to display: block; if you need to.
For the uls, add
.page ul li {
display: inline-block;
}
or
ul li {
display: inline-block;
}
for all of them on the page
I have a menu. I need to show the submenus when I mouse hover on them. I have some code as follows. But the submenus overlaps with existing menu.
Following is my code:
<!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" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Drop Down Menus</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: "Trebuchet MS", Helvetica, Sans-Serif;
font-size: 14px;
}
a {
text-decoration: none;
color: #838383;
}
a:hover {
color: black;
}
#menu {
position: relative;
margin-left: 30px;
}
#menu a {
display: block;
width: 140px;
}
#menu ul {
list-style-type: none;
padding-top: 5px;
}
#menu li {
float: top;
position: relative;
padding: 3px 0;
text-align: center;
}
#menu ul.sub-menu {
display: none;
position: absolute;
top: 20px;
left: -10px;
padding: 10px;
z-index: 90;
}
#menu ul.sub-menu li {
text-align: top;
}
#menu li:hover ul.sub-menu {
display: block;
border: 1px solid #ececec;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>Home
<ul class="sub-menu">
<li>Pages</li>
<li>Archives</li>
<li>New Posts</li>
<li>Recent Comments</li>
</ul>
</li>
<li>About
<ul class="sub-menu">
<li>Get to know us</li>
<li>Find out what we do</li>
</ul>
</li>
<li>Contact
<ul class="sub-menu">
<li>E-mail Us</li>
<li>Use Our Contact Form</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I need some effect like this.
How can I make it.
You've set left: -10px on #menu ul.sub-menu, which is why it's overlapping #menu. You should set that to a value that'll move it far enough to the right for your purposes, perhaps left: 140px since that's the width of the menu div.
I think you're looking for something called a "navigation rollover with dropdowns".
This is one of the best implementations that you can find - adapt and use as necessary:
http://jorenrapini.com/blog/web-development/css-navigation-rollovers-with-drop-downs#post-170
And, to see if it's worth what trying, this is the end result:
http://jorenrapini.com/posts/css-rollovers/post2.html
Good luck!