this is my first post. Hope I'm specific enough to get some help :)
I created a dropdown menu in my navigation bar for my clanwebsite. But I can't change the css in a way that it would be the same as my other titles from the navigation bar.
Also when I go over it with my cursor, the login button is being moved. And the css of my navigation is different when I go to the Main team page in the dropdown menu.
Thanks!
NOTE don't mind the php. Still working on that.
my HTML of the home page
<html>
<head>
<link rel="stylesheet" href="Opmaak.css">
<title>WKG</title>
</head>
<body>
<ul>
<li>Home</li>
<li>Line-ups</li>
<li><div class="dropdown">
<button class="dropbtn">Teams</button>
<div class="dropdown-content">
Main Team
Team 2
</div>
<li>Matchen</li>
<li>About</li>
<li>Games</li>
</ul>
</body>
</html
my CSS
p {
font-size: 20px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: visible;
background-color: #444;
}
li {
float: left;
box-shadow: 15px 15px 50px #888888;
font-size: 20px;
}
li a {
display: block;
color: darkgray;
text-align: center;
padding: 20px 50px;
text-decoration: inherit;
box-shadow: 3px 3px 3px crimson;
border-color: crimson;
position: relative;
display: inline-block;
}
.dropdown-content a {
display: block;
background-color: slategray;
}
.dropdown-content {
display: none;
position: inherit;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropbtn {
overflow: hidden;
background-color: slategray;
color: darkgray;
text-align: center;
padding: 20px 50px;
text-decoration: inherit;
box-shadow: 3px 3px 3px crimson;
border-color: crimson;
font-size: 20px;
position: relative;
display: inline-block;
}
. dropbtn:hover {
background-color: crimson;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: crimson;
padding: 20px 50px;
}
and my Main Team page
<html>
<head>
<link rel="stylesheet" href="Opmaak.css">
<title>WKG</title>
</head>
<body>
<ul>
<li>Home</li>
<li>Line-ups</li>
<div class="dropdown">
<button class="dropbtn">Teams</button>
<div class="dropdown-content">
Main Team
Team 2
</div>
<li>Matchen</li>
<li>About</li>
<li>Games</li>
</ul>
</body>
</html
Related
So I was creating the beginning of my hopefully, useful website. I started making the header and the menu part. In the search engine part, my intention is to create a dropdown menu with some options when I hover over Search Engine, until that it should disappear. I commented out in the CSS code display: none so that you can see how the dropdown looks like. I tried the pseudo-class .dropdown: hover but it didn't work. How can I make the dropdown menu only appear when I hover over the search Engine?
The linked image as the example of how it looks like, not how it should
HTML
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<title>SerFin</title>
<link href="https://fonts.googleapis.com/css2?family=Cinzel&display=swap" rel="stylesheet">
<style>
.title {
font-family: 'Cinzel', cursive;
}
</style>
<link href='test.css' rel='stylesheet'/>
</head>
<body>
<header>
<nav>
<ul class="menu">
<li><a href='#'>Customer Service</a></li>
<li><a href='#'>Submission</a></li>
<li class="dropdown">Search Engine ▾<li>
</ul>
<ul class="dropdown-menu">
<li>Universities</li>
<li>Jobs</li>
<li>Courses</li>
<li>Internships</li>
<li>Services</li>
</ul>
<ul class="setup">
<li><a href='#'>Login</a></li>
<li>Sign up</li>
</ul>
</nav>
<img class="logo" src="Logo.jpg"></img>
</header>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-size: 18px;
line-height: 1.8em;
}
header {
background-color:#5D6063;
}
nav {
display: flex;
justify-content: space-around;
background-color: #54575A;
width: 100%;
height: 40px;
}
li {
list-style: none;
display: inline;
padding-left: 10px;
padding-right: 10px;
}
a {
color: #D3D3D3;
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #54A5C4;
}
.menu {
color: #EEEEEE;
padding: 5px;
}
.setup {
color: #EEEEEE;
padding: 5px;
}
.title {
color: white;
display: flex;
justify-content: center;
padding: 150px;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
padding: 100px;
}
/*
---------------------------------------------------------------------------------------------
All of this is the heading, from now on everything has to do with the dropdown menu
*/
.dropdown {
position: relative;
z-index: 2;
}
.dropdown-menu {
display: flex;
flex-direction: column;
background: #54575A;
border-radius: 1px;
padding-top: 60px;
position: absolute;
top: -25px;
left: 490px;
z-index: 1;
}
.dropdown-menu li {
list-style: none;
border-bottom: 1px solid #FFF;
padding: 0 40px 10px 20px;
margin: 10px;
}
.dropdown-menu li:last-of-type {
border-bottom: none;
}
.dropdown > span {
z-index: 2;
position: relative;
cursor: pointer;
}
/*.dropdown-menu {
display: none;
}*/
You can use plain javascript or jquery in this.
This is how to do it using jquery.
$('.dropdown').hover( function(){ $('.dropdown-menu').show(); });
If you are using Javascript, you can use the following attachment, onmouseover inside the html element. Such as:
<img onmouseover="yourfunction()" src="path">
or you can do the following in the javascript file:
object = document.getElementByID("element") (or any other reference to element)
object.addEventListener("mouseover", myScript);
I had assistance from: https://www.w3schools.com/jsref/event_onmouseover.asp
Hopefully this was helpful.
I am trying to sort out creating a basic nav menu.
I created a nav menu with :hover properties for the choices in the menu.
However, I have the current page, set as an active, and I do not want the active page on the menu bar to highlight like the other choices.
I have tried every which way to get it to work with no success. Please help!
/* Main Navigation Menu */
ul#main-menu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #336699;
}
li {
float: right;
}
li a, .menu-drop-btn {
display: inline-block;
color: white;
padding: 15px;
text-decoration: none;
}
/* li a:hover, .menu-drop-btn:hover .menu-drop-btn{
background-color: #6699cc;
cursor: pointer;
} */
li a:hover, :not(.menuactive #active):hover {
background-color: #6699cc;
cursor: pointer;
}
/* #active:hover {
background-color: #336600;
cursor: pointer;
} */
li.menu-drop-btn {
display: inline-block;
}
.menu-drop-content {
display: none;
position: absolute;
background-color: #003300;
min-width: 160px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.3)
}
.menu-drop-content a {
color: white;
padding: 15px 15px 0 0;
display: block;
text-align: left;
}
.menu-dropdown:hover .menu-drop-content {
display: block;
}
.menu-drop-content a:hover {
background-color: #6699cc;
}
.menu-active {
float: left;
background-color: #336600;
}
/* Body and Background */
body {
background-color: #ffcc80;
height: 200vh;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<ul id="main-menu">
<li class="menu-active" id="active"><a>Home</a></li>
<li><a>Contact</a></li>
<li class="menu-dropdown"><a class="menu-drop-btn">Portfolio</a>
<div class="menu-drop-content">
<a>Link 1</a>
<a>Link 2</a>
<a>Link 3</a>
</div></li>
<li><a>About Us</a></li>
</ul>
<div>
<h1>Testing testing...</h1>
</div>
</body>
</html>
I would suggest moving the :not filter to the list item. This seems to work:
li:not(#active) a:hover {
background-color: #6699cc;
cursor: pointer;
}
The rule, when written like this, selects the hover "event" of any anchor element that is a child (a descendant) of a list item that does not have the ID of "active".
Like so:
/* Main Navigation Menu */
ul#main-menu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #336699;
}
li {
float: right;
}
li a, .menu-drop-btn {
display: inline-block;
color: white;
padding: 15px;
text-decoration: none;
}
/* This is the change that seems to work */
li:not(#active) a:hover {
background-color: #6699cc;
cursor: pointer;
}
li.menu-drop-btn {
display: inline-block;
}
.menu-drop-content {
display: none;
position: absolute;
background-color: #003300;
min-width: 160px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.3)
}
.menu-drop-content a {
color: white;
padding: 15px 15px 0 0;
display: block;
text-align: left;
}
.menu-dropdown:hover .menu-drop-content {
display: block;
}
.menu-drop-content a:hover {
background-color: #6699cc;
}
.menu-active {
float: left;
background-color: #336600;
}
/* Body and Background */
body {
background-color: #ffcc80;
height: 200vh;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<ul id="main-menu">
<li class="menu-active" id="active"><a>Home</a></li>
<li><a>Contact</a></li>
<li class="menu-dropdown"><a class="menu-drop-btn">Portfolio</a>
<div class="menu-drop-content">
<a>Link 1</a>
<a>Link 2</a>
<a>Link 3</a>
</div></li>
<li><a>About Us</a></li>
</ul>
<div>
<h1>Testing testing...</h1>
</div>
</body>
</html>
I have went through W3Schools to attempt understanding the coding structure of dropdown menus. When opening the page and hovering your cursor to the 'Merch' text it is supposed to display the dropdown menu. For some reason, however, it is not showing. Please amplify for me and show me where I went wrong.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
overflow: hidden;
background-color: dimgray;
list-style-type: none;
}
li {
float: left;
}
li a {
text-decoration: none;
font-family: sans-serif;
display: inline-block;
color: white;
padding: 12px;
}
li a:hover {
background-color: gray;
}
#dropdown {
position: absolute;
display: none;
background-color: darkgray;
min-width: 140px;
}
#dropdown a {
color: white;
text-align: left;
padding: 10px;
display: block;
text-align: left;
}
#dropdown a:hover {
background-color: gray;
}
#dropbtn:hover #dropdown {
display: block;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>Merch
<div id="dropdown">
Shirts
Pants
</div>
</li>
<li>About Us</li>
</ul>
</body>
</html>
You need this change in CSS
#dropbtn:hover + #dropdown {
display: block;
}
Dropdown is not a child, it is next element in your current html setup, so, this selector will find it.
Or, better, place id on li element (parent):
<ul>
<li>Home</li>
<li id="dropbtn"><a href="#" >Merch</a>
<div id="dropdown">
Shirts
Pants
</div>
</li>
<li>About Us</li>
</ul>
#dropbtn:hover #dropdown {
display: block;
}
Demo: https://jsfiddle.net/3bfgzf37/
If you use first solution, dropdown dissapears fast, and behave strange...
Explanation: hover on a is not hover on dropdown (a is sibling), hover on li element, is, in the same time, hover on dropdown (parent-child, dropdown is 'inside' li - that produces consistent, desired, behavior).
Second one is better.
ul {
margin: 0;
overflow: hidden;
background-color: dimgray;
list-style-type: none;
}
li {
float: left;
}
li a {
text-decoration: none;
font-family: sans-serif;
display: inline-block;
color: white;
padding: 12px;
}
li a:hover {
background-color: gray;
}
#dropdown{
position: absolute;
display:none;
background-color: darkgray;
min-width: 140px;
}
#dropdown a {
color: white;
text-align: left;
padding: 10px;
display: block;
text-align: left;
}
#dropdown a:hover {
background-color: gray;
}
#dropbtn:hover #dropdown {
display: block;
}
<ul>
<li>Home</li>
<li id="dropbtn"><a href="#" >Merch</a>
<div id="dropdown">
Shirts
Pants
</div>
</li>
<li>About Us</li>
</ul>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
Your style tag should be outside the head tag. Plus, the dropdown in this code works now. Just do some slight changes to the colors to your desire. :)
<html>
<head></head>
<style>
ul {
margin: 0;
overflow: hidden;
background-color: dimgray;
list-style-type: none;
}
li {
float: left;
}
li a {
text-decoration: none;
font-family: sans-serif;
display: inline-block;
color: white;
padding: 12px;
}
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: gray;
}
</style>
<body>
<ul>
<li>Home</li>
<li>
<div class="dropdown">
<button class="dropbtn">Merch</button>
<div class="dropdown-content">
Shirts
Pants
</div>
</div>
</li>
<li>About Us</li>
</ul>
</body>
</html>
I have developed an CSS navigation menu and for each navigation item I have written php.file.
homepage.php
<html>
<head>
<title>My First Try Of CSS Navigation Bar</title>
<style>
/* Begin Navigation Bar Styling */
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
#nav li {
float: left;
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc;
}
#nav li a:hover {
color: #c00;
background-color: #fff;
}
/*
End navigation bar styling. */
/* This is just styling for this
specific page. */
body {
background-color: #555;
font: small/1.3 Arial, Helvetica, sans-serif;
}
#wrap {
width: 900px;
margin: 0 auto;
background-color: #fff;
}
h1 {
font-size: 1.5em;
padding: 1em 8px;
color: #333;
background-color: #069;
margin: 0;
}
#content {
padding: 0 50px 50px;
}
.active {
background-color: red;
}
</style>
</head>
<body>
<div id="wrap">
<h1>Shree Shree Property, Kolhapur</h1>
<!-- Here's all it takes to make this navigation bar. -->
<ul id="nav">
<li>Home
</li>
<li>About US
</li>
<li><a href="#">Contact
US</a>
</li>
<li>Login
</li>
</ul>
<!-- That's it! -->
<div id="content">Area
<tr>
<td height="20px" />
<td style="text-align:left">
<select name="leavetype" id="leavetype">
<?php $query="select code,areaname from areamaster" ; $query_run=mysql_query($query); mysql_num_rows($query_run); while($row=mysql_fetch_assoc($query_run)) { ?>
<option value="<?php echo $row['code']?>">
<?php echo $row[ 'areaname']?>
</option>
<?php } ?>
</select>
</td>
</tr>
</div>
</body>
</html>
aboutus.php
<?php include( "$_SERVER[DOCUMENT_ROOT]/riteshproject/config.php"); ?>
<html>
<head>
<title>Shree Shree Property,Kolhapur</title>
<style>
/* Begin Navigation Bar Styling */
#nav {
width: 100%;
float: left;
margin: 0 0 5em 0;
padding: 0;
list-style: none;
background-color: #f3f3f3;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
ul.primary li:hover a {
background: pink;
color: #666;
text-shadow: none;
}
#nav li {
float: left;
background: #0080ff;
}
#nav li a {
display: block;
padding: 8px 17.5px;
text-decoration: none;
font-weight: bold;
color: black;
border-right: 1px solid #ccc;
}
#nav li a:hover {
color: black;
background-color: #00bfff;
}
/* End navigation bar styling. */
/* This is just styling for this specific page.
*/
body {
background-color: #555;
font: small/1.3 Arial, Helvetica, sans-serif;
}
#wrap {
width: 900px;
margin: 0 auto;
background-color: #00bfff;
}
h1 {
font-size: 1.5em;
padding: 1em 8px;
color: #333;
background-color: #069;
margin: 0;
}
#content {
padding: 0 50px 50px;
}
h4 {
font-size: 1.1em;
float: center;
padding: 1em 8px;
color: #333;
background-color: #00bfff;
margin: 0;
-webkit-align-content: center;
align-content: center;
}
#content {
padding: 1em 8px;
}
#current a {
color: #ff0000;
}
#dddd {
color: red;
}
.active {
background-color: red;
}
</style>
</head>
<body>
<div id="wrap">
<form name="tstest" action="test20.php" onsubmit="return CommonFunction(this); method=" POST "> <h1>Shree
Shree Property, Kolhapur</h1>
<!-- Here's all it takes to make this navigation bar. --> <ul id="nav ">
<li>Home</li> <li class="current " id="dddd ">About US</li> <li>Contact US</li>
<li>Login</li> <li>Add Property</li> <li>Luxarious Property</li>
<li>Property For Sale</li> <li><a href="# ">Other
Services</a></li> </ul> <!-- That's it! --> <div> <html>
<body> <div id="wrap ">
<h4>Shree Shree Property<h4> <p>Shree Shree Property provides
leading property consultancy in Kolhapur</p> </div>
<body> </html> </form> </table> </div> </div>
</body> </html>
i need to set color of only home menu that is first from left manu. then
i need to change color of only selected menu background
and whenver i navigate to another menu that menu color also need to change
and previously changed menu's color need as like i at home page
You have done like this already. In home.php you use
<a href="../riteshproject/home.php" class="active">
So if you want to add same style to other pages just add this to your current php window.
class="active"
For example if you are on about.php Then open the file and change it to look like this. Also make sure that other a href tags do not have the same active class.
About US
If you want to style it better just find or create active class in your css file
.active {
background-color: red;
}
I have the following code, and it works fine, except for the "Contact" link that needs to be the last link. However, the dropdown always seems to be placed last?
IT is basically the navbar at http://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar that I want to create, with 2 additional links after the dropdown link.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
float:right;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #111;
}
.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.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;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<div class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<li>Products</li>
<li>Contact</li>
</ul>
</body>
</html>
It does not render correctly, i'm not sure how to change the css to accomplish this. Or perhaps there is another way?
Thanks
Try changing the tag of dropdown from div to li. Probably the browser renders all li first and then the div.
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
Try this
.dropdown {
display: inline-block;
float:left
}
<li>
<div class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</li>
Put the <div> into an <li> try with this.
For you reference, here are 2 sites with examples.
Example 1
Example 2
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
float: right;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: #111;
}
.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.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;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>
<div class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</li>
<li>Products</li>
<li>Contact</li>
</ul>
</body>
</html>