My dropdown effect is not working what am I doing wrong. I have tried by putting display to none and using the :hover but nothing works.
As soon as I hover over the Menu, .drp-btn:hover .menu-content-container doesn't work.
<div class="nav-container">
<div class="drp-btn"> Menu </div>
<div class="menu-content-container">
<ul class="menu-content">
<li>Home</li>
<li>About</li>
<li>Booking</li>
</ul>
</div>
</div>
.nav-container {
margin-top: 2px;
display: flex;
flex-direction: column;
}
.menu-content-container {
border: 5px solid red;
}
.drp-btn {
margin-left: 60vw;
border: 2px solid red;
font-size: 20px;
}
.drp-btn:hover .menu-content-container {
display: flex;
background-color: red;
color: white;
}
.menu-content-container {
display: none;
}
.nav-container ul li {
margin-left: 2%;
list-style-type: none;
}
.nav-container a {
font-size: 20px;
text-decoration: none;
}
<div class="nav-container">
<div class="drp-btn"> Menu
<div class="menu-content-container">
<ul class="menu-content">
<li>Home</li>
<li>About</li>
<li>Booking</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
wrap the code drp-btn div
You need to wrap your menu-content-container into the drp-btn div to make that work:
.nav-container {
margin-top: 2px;
display: flex;
flex-direction: column;
}
.menu-content-container {
border: 5px solid red;
}
.drp-btn {
margin-left: 60vw;
border: 2px solid red;
font-size: 20px;
}
.drp-btn:hover .menu-content-container {
display: flex;
background-color: red;
color: white;
}
.menu-content-container {
display: none;
}
.nav-container ul li {
margin-left: 2%;
list-style-type: none;
}
.nav-container a {
font-size: 20px;
text-decoration: none;
}
<div class="nav-container">
<div class="drp-btn"> Menu
<div class="menu-content-container">
<ul class="menu-content">
<li>Home</li>
<li>About</li>
<li>Booking</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
Related
I have already put a div tag along the place where I want to split the list items. However, when I do float left or right, it doesn't work. I want to create a navigation bar where the user can browse the website on the left and manage their account on the right. Can anyone help me?
This Is The HTML and CSS Code:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #0f0f0f;
border-radius: 50px;
}
li {
float: left;
background-color: #0f0f0f;
}
li a {
display: block;
color: #8ca2ff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}
li a:hover {
background-color: #111;
}
<div class="header">
<ul>
<div class="first">
<li>Home</li>
<li>Updates</li>
<li>Blog</li>
</div>
<div class="last">
<li>Sign In</li>
<li>Login</li>
</div>
</ul>
</div>
How The Navigation Bar Looks Now
Can you please check the below code? Hope it will work for you.
As per Html standards, we can not use div directly inside ul(unordered list) so we added 2 ul inside .navigation div. With the help of flex properties, display:flex; and justify-content:space-between; we have separated items in .navigation as per your requirement.
Please refer to this link:
https://jsfiddle.net/yudizsolutions/764rdezq/1/
.navigation {
background-color: #0f0f0f;
border-radius: 50px;
overflow: hidden;
display:flex;
display: -webkit-flex;
justify-content:space-between;
-webkit-justify-content:space-between;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display:flex;
display: -webkit-flex;
}
li {
background-color: #0f0f0f;
}
li a {
display: block;
color: #8ca2ff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}
li a:hover {
background-color: #111;
}
<div class="header">
<div class="navigation">
<ul>
<li>Home</li>
<li>Updates</li>
<li>Blog</li>
</ul>
<ul>
<li>Sign In</li>
<li>Login</li>
</ul>
</div>
</div>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #0f0f0f;
border-radius: 50px;
display: flex;
justify-content: space-between;
}
.last,
.first {
display: flex;
}
li {
background-color: #0f0f0f;
}
li a {
display: block;
color: #8ca2ff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}
li a:hover {
background-color: #111;
}
<div class="header">
<ul>
<div class="first">
<li>Home</li>
<li>Updates</li>
<li>Blog</li>
</div>
<div class="last">
<li>Sign In</li>
<li>Login</li>
</div>
</ul>
</div>
I am trying to style my menu, but I am having a small problem.
I want the red border on hover to touch the border-bottom of the nav. So it looks like this:
How can I get this effect? I have tried but my code below is doing this:
nav {
display: flex;
align-items: center;
border-bottom: 1px solid #546478;
padding: 5px 20px;
}
.nav__container {
max-width: 93.75rem;
margin: 0 auto;
}
li {
list-style: none;
margin: 20px;
}
li:hover {
border-bottom: 1px solid red;
}
.hero__nav-items {
margin-left: auto;
}
.hero_nav-list {
display: flex;
}
<section class="hero">
<div class="hero__container">
<nav>
<div class="hero__nav-logo">
<img src="img/logo.png">
</div>
<div class="hero__nav-items">
<ul class="hero_nav-list">
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</div>
</nav>
</div>
</section>
Remove padding and margin from hero_nav-list and add padding in li
nav {
display: flex;
align-items: center;
border-bottom: 1px solid #546478;
padding: 0 20px;
}
.nav__container {
max-width: 93.75rem;
margin: 0 auto;
}
li {
list-style: none;
margin: 0 20px;
padding: 20px 0;
border-bottom: 1px solid transparent;
transition: all 0.4s;
}
li:hover {
border-bottom-color: red;
}
.hero__nav-items {
margin-left: auto;
}
.hero_nav-list {
display: flex;
padding: 0;
margin: 0;
}
<section class="hero">
<div class="hero__container">
<nav>
<div class="hero__nav-logo">
<img src="img/logo.png">
</div>
<div class="hero__nav-items">
<ul class="hero_nav-list">
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</div>
</nav>
</div>
</section>
Just use padding rather than margin
nav {
display: flex;
align-items: center;
border-bottom: 1px solid #546478;
padding: 0px 20px;
}
.nav__container {
max-width: 93.75rem;
margin: 0 auto;
}
li {
list-style: none;
padding: 20px;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
li:hover {
border-bottom-color: red;
transition: all .3s
}
.hero__nav-items {
margin-left: auto;
}
.hero_nav-list {
display: flex;
margin: 0;
}
<section class="hero">
<div class="hero__container">
<nav>
<div class="hero__nav-logo">
<img src="img/logo.png">
</div>
<div class="hero__nav-items">
<ul class="hero_nav-list">
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</div>
</nav>
</div>
</section>
The problem is that you are using margin instead of padding to create the space underneath the text. Borders apply to the outside including padding, but excluding the margin`.
See the working example at the end, and the changes you need are here:
Change the margin to padding for your li: li { padding: 20px; /* change margin to padding */ }
You also need to remove the margin from the ul as it is adding more space.
.hero_nav-list { margin: 0;}
Remove the padding to the top & bottom of nav: nav { padding: 0px 20px; }
To make the borders overlap, make the li bottom margin -1px: li { margin-bottom: -1px; }
dd an "invisible" border that will be replaced by the red border - this will stop the nav border jumping on hover: li { border-bottom: 1px solid transparent; }
Working Example:
nav {
display: flex;
align-items: center;
border-bottom: 1px solid #546478;
padding: 0px 20px;
}
.nav__container {
max-width: 93.75rem;
margin: 0 auto;
}
li {
list-style: none;
padding: 20px;
border-bottom: 1px solid transparent;
margin-bottom: -1px;
}
li:hover {
border-bottom: 1px solid red;
}
.hero__nav-items {
margin-left: auto;
}
.hero_nav-list {
margin: 0;
display: flex;
}
<section class="hero">
<div class="hero__container">
<nav>
<div class="hero__nav-logo">
<img src="img/logo.png">
</div>
<div class="hero__nav-items">
<ul class="hero_nav-list">
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</div>
</nav>
</div>
</section>
Hey guys I'm not sure what I'm doing wrong, but I want the 3rd li item (input) to go to the end of the container, when I use the justify-content: space-between; - nothing happens, I've tried aligning them, but still nothing.
nav {
width: 100%;
background-color: black;
padding-left: 30px;
padding-right: 10px;
}
.navContact {
margin-left: auto;
}
.navbar {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.mainNav {
display: flex;
}
.navitem a {
color: white;
text-decoration: none;
border-right: 2px solid rgb(255, 123, 0);
padding: 10px 15px;
}
<hr class="hrNav">
<nav class="navbar">
<ul class="mainNav">
<li class="navitem">About me</li>
<li class="navitem">Contact</li>
<li class="navitem"><input type="text" placeholder="Search..."></li>
</ul>
</nav>
You can set flex: 1 in the ul and the last item of the ul, then set margin-left: auto in the last li inside ul as well
*,
*::after,
*::before {
box-sizing: border-box
}
nav {
width: 100%;
background-color: black;
padding-left: 30px;
padding-right: 10px;
display: flex;
justify-content: space-between;
}
.mainNav {
display: flex;
flex: 1;
}
.navitem a {
color: white;
text-decoration: none;
border-right: 2px solid rgb(255, 123, 0);
padding: 10px 15px;
}
.navitem:last-of-type {
margin-left: auto
}
<hr class="hrNav">
<nav class="navbar">
<ul class="mainNav">
<li class="navitem">About me</li>
<li class="navitem">Contact</li>
<li class="navitem"><input type="text" placeholder="Search..."></li>
</ul>
</nav>
I am trying to make a Navigation Bar for the top of my page
.header {
width: 100%;
background-color: #2C2F33;
border-bottom: 2.5px #FF9F00 solid;
font-size: 15px;
}
#logo img {
float: left;
margin: 0;
padding: 20px;
width: 187.5px;
height: 63.75px;
}
.navbar {
display: flex;
justify-content: space-between;
}
.navbar,
li {
display: inline;
padding: 0 22.5px 0 22.5px;
}
.navbar,
li,
a {
text-decoration: none;
list-style-type: none;
}
.navbar,
li,
a:hover {
color: #FF9F00;
text-decoration: none;
list-style-type: none;
}
#dollarydoos,
#dsh {
color: #FF9F00;
}
#dosh {
color: #FFFFFF;
}
<div class="header">
<div id="logo">
<img src="./img/logo.png"></img>
</div>
<div class="navbar">
<div id="leftnavbar">
<ul>
<li><span id="dollarydoos">Dollarydoos:</span> <span id="dosh">1.00000000</span> <span id="dsh">DSH</span></li>
</ul>
</div>
<div id="rightnavbar">
<ul>
<li>Button1</li>
<li>Button2</li>
<li>Button3</li>
<li>Button4</li>
</ul>
</div>
</div>
</div>
I cant get the buttons and the dollardoos to have a small box that surrounds it (inside) and to align to the center of the logo and get listed in line in the center.
Like this:
How can I do this as I am not too experienced in HTML/CSS. I am a newbie trying to build his own site.
I made a flexbox of the header and removed display:inline for the navbar
.header {
width: 100%;
background-color: #2C2F33;
border-bottom: 2.5px #FF9F00 solid;
font-size: 15px;
display: flex;
align-items: center;
}
#logo img {
margin: 0;
padding: 20px;
width: 187.5px;
height: 63.75px;
}
.navbar {
display: flex;
justify-content: space-between;
margin-left: auto;
}
li {
display: inline;
padding: 0 22.5px 0 22.5px;
}
.navbar,
li,
a {
text-decoration: none;
list-style-type: none;
}
.navbar,
li,
a:hover {
color: #FF9F00;
text-decoration: none;
list-style-type: none;
}
#dollarydoos,
#dsh {
color: #FF9F00;
}
#dosh {
color: #FFFFFF;
}
<div class="header">
<div id="logo">
<img src="http://placehold.it/200x100">
</div>
<div class="navbar">
<div id="leftnavbar">
<ul>
<li><span id="dollarydoos">Dollarydoos:</span> <span id="dosh">1.00000000</span> <span id="dsh">DSH</span></li>
</ul>
</div>
<div id="rightnavbar">
<ul>
<li>Button1</li>
<li>Button2</li>
<li>Button3</li>
<li>Button4</li>
</ul>
</div>
</div>
</div>
I am trying to display some content in div tag when hovering on the menu. Here I am trying to display a div when hovering on About. But it does not work.Kindly only check the commented portion. Ignore rest!
Here is my html:
<html>
<head>
<link rel="stylesheet" href="Style/styling.css">
<head>
<body>
<div class="container">
<header class="head-nav">
<img class="logo" src="Images/Logo.jpg">
<nav class="navigation">
<ul>
<li>Home</li>
<!––The hovering Menu––>
<li class="dispmenu">About</li>
<li >Center</li>
<li >Team </li>
<li>Team</li>
<li>Testing</li>
<li>Services</li>
<ul>
</nav>
</header>
<div class="submenu">
Hello
</div>
</div>
</body>
</html>
And CSS:
.container {
width: 1000px;
height: 1000px;
margin: 0 auto;
border: 1px solid gray;
}
header {
overflow: hidden;
}
.logo {
float: left;
}
.navigation ul {
list-style: none;
}
.navigation ul li {
background-color: #e0e0d1;
margin-top: 40px;
width: 96px;
border: 1px solid lightblue;
height: 40px;
text-align: center;
float: left;
}
.navigation ul li a {
font-size: 11px;
text-decoration: none;
color: black;
}
li a:hover:not(.active) {
color: #2485ba;
}
.active {
color: #2485ba;
}
/*the css for hiding and displaying*/
.dispmenu:hover .submenu {
visibility: visible;
}
.submenu {
background-color: darkblue;
color: white;
width: 684;
height: 100px;
margin-left: 312px;
visibility: hidden;
}
Here's a jQuery option if you go that route..
fiddle
https://jsfiddle.net/Hastig/ns6j55zg/
You can read about .hover here
$('.dispmenu').hover(function() {
$('.submenu').addClass('dispmenu-hover');
}, function() {
$('.submenu').removeClass('dispmenu-hover');
})
body {
margin: 0;
}
.container {
/*width: 1000px;*/
/*height: 1000px;*/
margin: 0 auto;
border: 1px solid gray;
}
header {
overflow: hidden;
}
.logo {
float: left;
}
.navigation ul {
list-style: none;
display: flex;
}
.navigation ul li {
display: flex;
background-color: #e0e0d1;
margin-top: 40px;
/*width: 96px;*/
flex: 1;
border: 1px solid lightblue;
height: 40px;
text-align: center;
float: left;
}
.navigation ul li a {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
text-align: center;
font-size: 11px;
text-decoration: none;
color: black;
}
li a:hover:not(.active) {
color: #2485ba;
}
.active {
color: #2485ba;
}
.submenu {
background-color: darkblue;
color: white;
width: 684;
height: 100px;
margin-left: 312px;
visibility: hidden;
}
/*the css for hiding and displaying*/
/* this class moved to appear after .submenu class */
.dispmenu-hover {
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<header class="head-nav">
<img class="logo" src="Images/Logo.jpg">
<nav class="navigation">
<ul>
<li>Home</li>
<!––The hovering Menu––>
<li class="dispmenu">About</li>
<li>Center</li>
<li>Team </li>
<li>Team</li>
<li>Testing</li>
<li>Services</li>
</ul>
</nav>
</header>
<div class="submenu">
Hello
</div>
</div>
.dispmenu:hover .submenu {
You have a space between those selectors. A space is a descendant combinator.
The element <div class="submenu"> is not a descendant of the element <li class="dispmenu">. It is a sibling of the great-grandparent of the list item.
CSS selectors provide no way to describe going up the DOM tree, so you can't achieve this without either:
Changing the structure of the DOM
Using JavaScript
Ideally you should do both since:
It doesn't make much sense for a submenu to be completely disconnected from the menu item it is for. Think about how that type of data is normally represented.
You can't put in things like time delays before a menu vanishes, which makes a menu like the one you are trying to create challenging for people with some accessibility needs (e.g. sufferers of arthritis who many struggle to move the mouse in a straight line and keep the pointed inside the borders of the menu).