here I have two menu.my problem is I can't change the text color of vertical menu. I use 'color: red !important' in list-item class but it did't work.I think I should change '.dropbtn ,li a ' but I don't know how to change it.(I want to define 2 different color)
and it is complete code:
http://jsfiddle.net/cudn8es7/63/
* {
padding: 0;
margin: 0;
direction: rtl;
font-family: "tahoma";
}
html, body {
height: 100%;
}
u1{
list-style: none;
}
.firstmenu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgba(20,30,250,0.5);
font-family: "B Nazanin";
direction: rtl;
font-size: 20px;
}
.firstmenu a:hover {
background-color: aqua;
transition: all 0.5s;
}
.firstmenu li {
float: right;
}
.dropbtn ,li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
direction: rtl;
transition: all 1s;
}
li.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);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: right;
transition: all 0.5s;
}
.dropdown-content a:hover {
color: white;
background-color: black;
transition: all 0.5s;
}
.dropdown:hover .dropdown-content {
display: block;
}
.menu {
width: 12%;
float: right;
direction: rtl;
text-align: center;
font-family: "B Nazanin";
margin-top: 30px;
color: red;
}
.list-item{
box-shadow:-5px 4px 3px 1px gray ;
background-color: deepskyblue;
font-size: 20px;
color: red !important;
padding: 10px;
border-radius: 10px 0px 0px 10px;
margin-bottom: 10px;
transition: transform 1s;
}
.menu li:hover{
transform: scalex(1.4);
transition: all 0.5s;
background-color: blue;
color: pink !important;
}
a:active{
color:yellow;
}
#banner{
width: 100%;
height: auto;
position: fixed;
top: 0;
z-index: -1 ;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>دومین صفحه وب من</title>
</head>
<body>
<ul class="firstmenu">
<li class="dropdown">
menu
<div class="dropdown-content">
home
exprience
education
CV
contact
</div>
</li>
<li>exprience</li>
<li>education</li>
<li>CV</li>
<li>contact</li>
</ul>
<img src="https://splashingpaint.files.wordpress.com/2018/03/corella-remnants.jpg" id="banner">
<div id="wrapper">
<div class="menu">
<ul>
<li class="list-item">
exprience
</li>
<li class="list-item">
education
</li>
<li class="list-item">
CV
</li>
<li class="list-item">
contact
</li>
</ul>
</div>
</body>
</html>
Try to Add This class
#wrapper > div > ul > li > a {
color:red;
}
Try using this and no need to add !important in .menu li:hover
.menu li:hover a{
color: pink;
}
Update jsfiddle here
.menu ul li a{
color:red!important;
}
This is the solution , But ill recommend you to don't use !important , coz it is not consider as good programming practise and try to use class based sections , It will help you desiring your web page
You can just write the css for styling vertical menu anchor tags. There is no need of !important to use it over here.
.menu li a {color: red;}
Related
so I am pretty new to development and come across a problem, I think I am missing somthing but I can't tell. So I am building a nav bar and then a drop down menu. I believe that the li is in the ul so that why it is not coming out of it. So how could I fix this. If you know any website that would be good let me know thank you
Code:
https://codepen.io/Giannilmgc/pen/JjrgZdr?editors=1111
Output:
https://codepen.io/Giannilmgc/full/JjrgZdr
To see what wrong keep your cursor over the to do tab and scroll down
#import url("https://fonts.googleapis.com/css2?family=Inter:wght#300&display=swap");
/* Here is the body style where we change the background */
body {
background: linear-gradient(135deg, #36454f 0%, #ffdd3c 100%);
margin: 5px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: auto;
background-color: white;
border-radius: 50px;
}
li {
float: left;
width: 16.667%;
transition-duration: 1s;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition-duration: 1s;
}
li:hover {
background-color: black;
}
li a:hover {
background-color: #36454f;
color: white;
}
#homepageLink {
background-color: #cccccc;
}
.dropdown {
position: relative;
display: inline-block;
}
ul li ul {
display: none;
position: absolute;
background-color: #cccccc;
width: 20%;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 10;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #36454f;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
<head>
<title> My Site </title>
<link rel="stylesheet" href="CSS/Homepage-Css.css" />
</head>
<body>
<body>
<div>
<ul>
<li>HomePage</li>
<li>Journal</li>
<li>Calander </li>
<li class="dropdown">To do
<ul class="dropdown-content">
<a herf="#">Latin</a>
<a herf="#">Scince</a>
<a herf="#">Ela</a>
</ul>
</li>
<li>Service</li>
<li>Contact</li>
</ul>
</div>
<div class="time">
<span id="display_ct"></span>
</body>
<!-- Adding Script to the bottom ... Very Imporantent -->
<script src="Javascript/Homepage-Java.js"></script>
Thank you
In the dropdown class you have set the position in relative. Change it to absolute and your drop down menu will come out.
.dropdown {
position: absolute;
display: inline-block;
}
you put display none on the dropdown and try to show it when its hover on li.
but when the mouse go out from li the display:none on dropdown is return.
try to make it with after pseudo element and change the code from .dropdown { position: relative; display: inline-block; }
to:li:after.dropdown { position: relative; display: inline-block; }
it will work but not an ideal, improve it with css
If you want to create a dropdown menu with pure CSS there is this example from w3schools
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
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: red;
}
li.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);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
I am a developer in training and I was trying to get this code to show a drop down menu when hovering over the list items "Music" and "Podcasts". But I can't seem to get it to work, what am I doing wrong?
I found some people doing the same thing, but my list never shows, which is logical of course because of the display: none; but I would like it to show after hovering over Music or Podcasts. Sorry, but I am still learning if it is messy/bad.
body {
background-image: url(../images/top.png), url(../images/achtergrond.png);
background-size: cover ;
font-family: 'Neucha', cursive;
background-repeat: no-repeat;
}
img {
width: 1000px;
height: 400px;
}
.navbar{
margin: auto;
width: 50%;
padding: 10px;
}
.list{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
list-style: none;
font-size: 35px;
}
li:hover .sublist-music a {
display: block;
color: black;
}
li{
background-color: white;
border-radius: 30%;
}
li:hover{
background-color: #A1CCB6;
}
.sublist-music{
display: none;
}
.sublist-podcasts{
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght#400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../css/test.css">
<title>banana split</title>
<link href="https://fonts.googleapis.com/css2?family=Neucha&display=swap" rel="stylesheet">
</head>
<body>
<div class="navbar">
<div class="list">
<li> <a>Home</a></li>
<li> <a>Music</a></li>
<div class="sublist-music">
Shows
Live
</div>
<li> <a>Podcasts</a></li>
<div class="sublist-podcasts">
<li>Plants</li>
<li>Food</li>
<li>Youtubers</li>
<li>Mindfull</li>
</div>
<li> <a>Live</a></li>
<li> <a>About us</a></li>
<li> <a>Contact</a></li>
</div>
</div>
</body>
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="navbar">
Home
<div class="dropdown">
<button class="dropbtn">Music
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Shows
Live
</div>
</div>
Live
About us
</div>
Reference link : https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp
body {
font-family: 'Neucha', cursive;
background-repeat: no-repeat;
}
a {
text-decoration: none;
}
nav {
font-family: monospace;
}
ul {
list-style: none;
margin: 0;
padding-left: 0;
}
li {
display: block;
float: left;
padding: 1rem;
position: relative;
text-decoration: none;
transition-duration: 0.5s;
border-radius: 30%;
background-color: white;
}
li a {
color: #000;
}
li:hover,
li:focus-within {
background-color: #A1CCB6;
cursor: pointer;
}
li:focus-within a {
outline: none;
}
ul li ul {
visibility: hidden;
opacity: 0;
min-width: 5rem;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
left: 0;
display: none;
}
ul li:hover > ul,
ul li:focus-within > ul,
ul li ul:hover,
ul li ul:focus {
visibility: visible;
opacity: 1;
display: block
}
ul li ul li {
clear: both;
width: 100%;
}
<nav role="navigation">
<ul>
<li>Home</li>
<li>Music
<ul class="dropdown">
<li>Shows</li>
<li>Live</li>
</ul>
</li>
<li>Podcast
<ul class="dropdown">
<li>Plants</li>
<li>Food</li>
<li>Youtubers</li>
<li>Mindful</li>
</ul>
</li>
<li>Live</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
why is my drop down menu not working?
attaching image with the code.
what additions do i need to add in oder to make the dropdown menu work
the output is somewhat like this
exams
java c c++
the is not drop down menu.
html code :
<html>
<head>
<title> Website Design </title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="nav">
<ul class="menu">
<li>Home</li>
<li>
Exams
<ul>
<li>
JAVA
</li>
<li>
C
</li>
<li>
C++
</li>
</ul>
</li>
<li>Login</li>
<li>Review</li>
<li>Contact</li>
</ul>
</div>
</header>
</body>
</html>
and css code
header{
background: rgba(0,0,100,0.5);
height: 100vh;
}
.nav{
background: rgba(0,0,0,.5);
height: 80px;
}
.menu{
float: right;
list-style: none;
margin: 20px;
}
.menu li{
display: inline-block;
margin: 10px 5px;
}
.menu li a{
text-decoration: none;
color: #fff;
padding: 5px 10px;
font-family: sans-serif;
letter-spacing: 2px;
border-bottom: 1px solid #fff;
}
.menu li a:hover{
background: coral;
border-bottom: 1px solid coral;
transition: .4s;
}
.
--> Please update following code in your existing file
header{
background: rgba(0,0,100,0.5);
height: 100vh;
}
.nav{
background: rgba(0,0,0,.5);
height: 80px;
}
.menu{
float: right;
list-style: none;
margin: 20px;
}
.menu li{
display: inline-block;
margin: 10px 5px;
position: relative;
}
.menu li a{
text-decoration: none;
color: #fff;
padding: 5px 10px;
font-family: sans-serif;
letter-spacing: 2px;
border-bottom: 1px solid #fff;
}
.menu li a:hover{
background: coral;
border-bottom: 1px solid coral;
transition: .4s;
}
ul.menu ul {
visibility: hidden;
opacity: 0;
position: absolute;
padding: 0;
top: 26px;
transition: 0.3s ease-in-out;
}
ul.menu ul li {
margin-left: 0;
margin-right: 0;
width: 100%;
}
ul.menu > li:hover ul {
visibility: visible;
opacity: 1;
}
<html>
<head>
<title> Website Design </title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="nav">
<ul class="menu">
<li>Home</li>
<li>
Exams
<ul>
<li>
JAVA
</li>
<li>
C
</li>
<li>
C++
</li>
</ul>
</li>
<li>Login</li>
<li>Review</li>
<li>Contact</li>
</ul>
</div>
</header>
</body>
</html>
You have not yet added the css code to make the dropdown work. Try this css code with your html to make it work.
header{
background: rgba(0,0,100,0.5);
height: 100vh;
}
.nav{
background: rgba(0,0,0,.5);
height: 80px;
}
.menu{
float: right;
list-style: none;
margin: 20px;
}
.menu li{
display: inline-block;
margin: 10px 5px;
}
.menu li a{
text-decoration: none;
color: #fff;
padding: 5px 10px;
font-family: sans-serif;
letter-spacing: 2px;
border-bottom: 1px solid #fff;
}
.menu li a:hover{
background: coral;
border-bottom: 1px solid coral;
transition: .4s;
}
.menu > li {
position: relative;
}
.menu > li > ul {
display: none;
position: absolute;
left: 0;
top: 100%;
background: red;
width: 120px;
}
.menu > li > ul > li {
display: block;
width: 100%;
}
.menu > li:hover > ul {
display: block;
}
I'm wondering why (looking to achieve a drop down menu), my nav is not aligned horizontally, I've looked for every error I know, obviously didn't find anything. Can anyone help me to find the error? Or a way which I can use to make that nav aligned? :)
body {
background: #182530;
}
.clearfix:after {
display: block;
clear: both;
}
.menu-wrap {
width: 100%;
box-shadow: 0px 1px 3px #000000;
background: #ffffff;
}
.menu {
width: 1000px;
margin: 0px auto;
}
.menu li {
margin: 0px;
list-style: none;
font-family: helvetica;
font-weight: bold;
color: #000000;
}
.menu a {
transition: all linear 0.15s;
color: #000000;
text-decoration: none;
}
.menu li:hover>a,
.menu .current-item>a {
text-decoration: none;
color: #be5b70;
}
menu>ul>li {
float: left;
display: inline-block;
position: relative;
font-size: 19px;
}
.menu>ul>li>a {
padding: 10px 40px;
display: inline-block;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
}
.menu>ul>li:hover>a,
.menu>ul>.current-item>a {
background: #2e2728;
}
.submenu {
width: 10%;
padding: 5px 0px;
position: absolute;
right: auto;
z-index: -1;
opacity: .0;
transition: opacity linear 0.15s;
background: #2e2728;
}
.menu li:hover .submenu {
z-index: 1;
opacity: 1;
}
.submenu li a {
display: block;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
Test Page
</title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
</head>
<body>
<header>
<div class="menu-wrap">
<nav class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>
Projects
<ul class="submenu">
<li>WebIdentity</li>
<li>LogoDesign</li>
<li>Branding</li>
</ul>
</li>
<li>Contacts</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
How can I align my nav? Where is the error?
maybe you need
.menu > ul > li {
display: inline-block;
}
I fixed the code just by adding
nav ul li {
display:inline;
}
Here is a working fiddle
Been working on a navbar in html/css and the dropdown doesn't appear. I've been playing around with the code but nothing seems to work. Once I delete the display: none from the .dropdown-content class, it seems to appear...
Could anyone please take a look? I've been at it for hours and reading every thread on this issue, but cannot figure it out. Thx in advance!
Here are my css and html snippets:
body {
width: 100%;
background-image: url("https://images.unsplash.com/photo-1458682625221-3a45f8a844c7?ixlib=rb0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=05e92845cd4b48607787e676d0d7d2e5");
background-size: cover;
}
#navdiv {
opacity: 0.70;
filter: (opacity=70;
)
}
#navdiv ul {
list-style-type: none;
width: 100%;
background: white;
line-height: 3rem;
float: right;
overflow: hidden;
}
#navdiv ul a {
text-decoration: none;
color: black;
padding: 2em;
}
#navdiv ul li {
float: right;
margin-right: 1em;
}
#logo {
float: left !important;
font-size: 2em;
margin-left: 1em;
}
#navdiv ul #logo:hover {
background: none;
}
#navdiv ul li a:hover,
dropdown:hover #dropbtn {
background: #B266FF;
transition: all 0.8s;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
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;
text-align: center;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: inline-block;
}
<body>
<div id="maindiv">
<div id="navdiv">
<ul>
<li id="logo">Potayto-Potatoh</li>
<li class="dropdown">About</li>
<li>Portfolio
<div class="dropdown-content">
work 1
work 2
work 3
</div>
</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
You need to Add dropdown for portfolio li not for about as it doesnt have dropdown-content
Demo
HTML:
<li class="dropdown">Portfolio
The dropdown-content div is not under dropdown div, the parent <li> element lacks the dropdown class specification.
Add the trigger class to the li element. Your CSS was also incorrect for the trigger, you wre refering to .dropdown (which is actually a class on the li for "about"!)
See https://jsfiddle.net/qxjbtot1/ for a working example.
body {
width: 100%;
background-image: url("https://images.unsplash.com/photo-1458682625221-3a45f8a844c7?ixlib=rb0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=05e92845cd4b48607787e676d0d7d2e5");
background-size: cover;
}
#navdiv {
opacity: 0.70;
filter: (opacity=70;
)
}
#navdiv ul {
list-style-type: none;
width: 100%;
background: white;
line-height: 3rem;
float: right;
}
#navdiv ul a {
text-decoration: none;
color: black;
padding: 2em;
}
#navdiv ul li {
float: right;
margin-right: 1em;
}
#logo {
float: left !important;
font-size: 2em;
margin-left: 1em;
}
#navdiv ul #logo:hover {
background: none;
}
#navdiv ul li a:hover,
dropdown:hover #dropbtn {
background: #B266FF;
transition: all 0.8s;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
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;
text-align: center;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
li:hover div.dropdown-content {
display: block;
}
<body>
<div id="maindiv">
<div id="navdiv">
<ul>
<li id="logo">Potayto-Potatoh</li>
<li class="dropdown">About</li>
<li>Portfolio
<div class="dropdown-content">
work 1
work 2
work 3
</div>
</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>