I am trying to style the dropdown similar to the image . I am close but there are few things which I am unable to figure out.
- How can I add the lines between each item in the list
- How can I make the list start from under the "SELECT".
is what I have so far.
Is there a better way to do this without using CSS? I am fairly new to CSS.
I am not sure how my question is similar. If someone can explain. The post does not have similarity to what I am trying to achieve.
.dropbtn {
color: white;
width: 180px;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
text-align: left;
font-weight: 900;
background: rgba(0, 173, 239, 1);
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 50px 50px 50px 50px;
}
.dropdown {
position: relative;
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);
}
.sphere {
height: 45px;
width: 45px;
border-radius: 50%;
vertical-align: top;
/* position: relative; */
background: black;
display: inline-block;
margin-top: 5px;
margin-left: -55px;
}
.dropdown-content a {
table-layout: fixed;
color: black;
margin-left: 6px;
padding: 12px 16px 13px 30px;
text-decoration: none;
display: block;
}
.dropdown a {
background:url('sidearrow.png') no-repeat left;
}
.dropdown-content a:hover {
background:url('sidewhite.png') no-repeat left;
background-color: rgb(255,131,0);
color:white;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
div#arrow {
position: absolute;
margin-left: 10px;
margin-top: 11px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="dropdown.css">
</head>
<body>
<h2>Dropdown Menu</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">SELECT</button>
<div class="sphere">
<div id="arrow">
<img src="arrow.png" width="29" height="27" alt=""/>
</div>
</div>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</body>
</html>
You still need to adjust some sizes, but it works:
.dropbtn {
color: white;
width: 180px;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
text-align: left;
font-weight: 900;
background: rgba(0, 173, 239, 1);
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 50px 50px 50px 50px;
position: relative;
z-index:2;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: relative;
z-index:1;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
right: 5px;
top:-20px;
}
.sphere {
height: 45px;
width: 45px;
border-radius: 50%;
vertical-align: top;
/* position: relative; */
background: black;
display: inline-block;
position:relative;
margin-top: 5px;
margin-left: -55px;
z-index:2;
}
.dropdown-content a {
table-layout: fixed;
color: black;
margin-left: 6px;
padding: 12px 16px 13px 30px;
text-decoration: none;
display: block;
border: 1px solid #000;
border-top: none;
}
.dropdown-content a:first-child {
padding-top:22px;
}
.dropdown a {
background:url('sidearrow.png') no-repeat left;
}
.dropdown-content a:hover {
background:url('sidewhite.png') no-repeat left;
background-color: rgb(255,131,0);
color:white;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
div#arrow {
position: absolute;
margin-left: 10px;
margin-top: 11px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="dropdown.css">
</head>
<body>
<h2>Dropdown Menu</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">SELECT</button>
<div class="sphere">
<div id="arrow">
<img src="arrow.png" width="29" height="27" alt=""/>
</div>
</div>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</body>
</html>
.dropbtn {
color: white;
width: 180px;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
text-align: left;
font-weight: 900;
background: rgba(0, 173, 239, 1);
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 50px 50px 50px 50px;
}
.dropdown {
position: relative;
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);
}
.sphere {
height: 45px;
width: 45px;
border-radius: 50%;
vertical-align: top;
/* position: relative; */
background: black;
display: inline-block;
margin-top: 5px;
margin-left: -55px;
}
.dropdown-content a {
table-layout: fixed;
color: black;
margin-left: 6px;
padding: 12px 16px 13px 30px;
text-decoration: none;
display: block;
}
.dropdown a {
background:url('sidearrow.png') no-repeat left;
}
.dropdown-content a:hover {
background:url('sidewhite.png') no-repeat left;
background-color: rgb(255,131,0);
color:white;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
div#arrow {
position: absolute;
margin-left: 10px;
margin-top: 11px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="dropdown.css">
</head>
<body>
<h2>Dropdown Menu</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">SELECT</button>
<div class="sphere">
<div id="arrow">
<img src="arrow.png" width="29" height="27" alt=""/>
</div>
</div>
<div class="dropdown-content">
Link 1<hr/>
Link 2<hr/>
Link 3<hr/>
</div>
</div>
</body>
</html>
You can simply add a border-bottom: 1px solid black and you're done.
Working jsFiddle
.dropbtn {
color: white;
width: 180px;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
text-align: left;
font-weight: 900;
background: rgba(0, 173, 239, 1);
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 50px 50px 50px 50px;
}
.dropdown {
position: relative;
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);
}
.sphere {
height: 45px;
width: 45px;
border-radius: 50%;
vertical-align: top;
/* position: relative; */
background: black;
display: inline-block;
margin-top: 5px;
margin-left: -55px;
}
.dropdown-content a {
table-layout: fixed;
color: black;
margin-left: 6px;
padding: 12px 16px 13px 30px;
text-decoration: none;
display: block;
border-bottom: 1px solid black;
}
.dropdown a {
background: url('sidearrow.png') no-repeat left;
}
.dropdown-content a:hover {
background: url('sidewhite.png') no-repeat left;
background-color: rgb(255, 131, 0);
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
div#arrow {
position: absolute;
margin-left: 10px;
margin-top: 11px;
}
<h2>Dropdown Menu</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">SELECT</button>
<div class="sphere">
<div id="arrow">
<img src="arrow.png" width="29" height="27" alt="" />
</div>
</div>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
Check this provide below jsfiddle, make changes in your .dropdown-content i.e. add left and margin values and set it's z-index value to -1, now to add border, you can make use of border-bottom in .dropdown-content a.
jsFiddle
.dropdown-content{
left:8px;
margin-top:-5px;
z-index:-1;
..........
..........
..........
}
.dropdown-content a {
border-bottom:1px solid #111;
..........
..........
..........
}
.dropbtn {
color: white;
width: 180px;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
text-align: left;
font-weight: 900;
background: rgba(0, 173, 239, 1);
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 50px 50px 50px 50px;
z-index:2;
position:relative;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 177px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
margin-top:-20px;
left:2px;
z-index:0;
}
.sphere {
height: 45px;
width: 45px;
border-radius: 50%;
vertical-align: top;
/* position: relative; */
background: black;
display: inline-block;
margin-top: 5px;
margin-left: -55px;
}
.dropdown-content a:first-child{
padding-top: 30px;
}
.dropdown-content a {
table-layout: fixed;
color: black;
padding: 12px 16px 13px 30px;
text-decoration: none;
display: block;
}
.dropdown-content a{
border:1px solid #000;
border-bottom:0;
}
.dropdown-content a:last-child{
border-bottom:1px solid #000;
}
.dropdown a {
background:url('sidearrow.png') no-repeat left;
}
.dropdown-content a:hover {
background:url('sidewhite.png') no-repeat left;
background-color: rgb(255,131,0);
color:white;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
div#arrow {
position: absolute;
margin-left: 10px;
margin-top: 11px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="dropdown.css">
</head>
<body>
<h2>Dropdown Menu</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">SELECT</button>
<div class="sphere">
<div id="arrow">
<img src="arrow.png" width="29" height="27" alt=""/>
</div>
</div>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</body>
</html>
Related
I've been trying with a dropdown menu for a while now and managed to get it to work with overflow being hidden in the navbar, however doing so breaks the rest of the navbar.
The navbar works fine when overflow is set to hidden in .navbar, however this hides the dropdown menu. I've tried to find a solution for this but haven't had much luck.
* {
font-family: Open Sans, Trebuchet MS, Tahoma, Helvetica, sans-serif;
background-color: white;
margin: 0px;
box-sizing: border-box;
}
.darkmode {
background-color: #3d3d3d;
color: white;
}
.navbar {
text-align: center;
background-color: #197053;
margin: 0px;
padding: 0px;
position: relative;
box-shadow: 0px 1px 5px #262626;
}
.navbar a, .navbar p, .dropdown button {
color: white;
text-decoration: none;
font-weight: bold;
font-size: 150%;
display: inline-block;
padding: 14px 12px;
background-color: #197053;
margin: 0px;
border: none;
border-bottom: 5px solid transparent;
}
.navbar-title {
position: relative;
float: left;
margin: 0px;
}
.navbar-current {
float: none;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
ul.navbar-nav {
float: right;
margin: 0px;
list-style-type: none;
padding: 0px;
}
.navbar-nav li {
float: left;
}
.navbar a:hover, .dropdown:hover button {
border-bottom: 5px solid #3aa682;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover button {
border-bottom: 5px solid #3aa682;
}
.dropdown {
display: inline-block;
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
display: block;
color: black;
background-color: white;
padding: 14px 12px;
text-decoration: none;
margin: 0px;
font-size: 150%;
font-weight: normal;
border: none;
}
.dropdown-content a:hover {
background-color: #c9c9c9;
border: none;
}
.title p {
font-size: 250%;
padding: 0px 50px;
padding-top: 20px;
margin: 0px;
}
.subtitle p {
font-size: 200%;
padding: 0px 50px;
margin: 0px;
}
.body p {
font-size: 120%;
padding: 0px 50px;
margin: 0px;
}
.body a:link, .body a:visited {
color: #262626;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: left;
color: black;
}
.darkmode-button {
color: black;
font-size: 80%;
padding: 10px 9px;
margin: 0px;
border: none;
font-family: Open Sans, Trebuchet MS, Tahoma, Helvetica, sans-serif;
background-color: white;
}
.darkmode .darkmode-button {
color: white;
background-color: #3d3d3d;
}
.darkmode-button:hover {
color: #878787;
}
<!doctype html>
<html>
<head>
<title>Home - Title</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src = "main.js"></script>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="navbar">
<div class="navbar-title">
<p>Title</p>
</div>
<div class="navbar-current">
Home
</div>
<ul class="navbar-nav">
<li class="dropdown">
<button onclick="location.href='school.html';">School</button>
<div class="dropdown-content">
Biology
Chemistry
Physics
</div>
</li>
<li>Photography</li>
<li>Music</li>
</ul>
</div>
<div class="title">
<p>Introduction</p>
</div>
<div class="body">
<p>---</p>
</div>
<div class="footer">
<button onclick="darkMode()" class="darkmode-button" id="darkmode-button">Dark Mode</button>
</div>
</body>
</html>
.navbar {
width: 100%;
display: inline-block;
text-align: center;
background-color: #197053;
margin: 0px;
padding: 0px;
position: relative;
box-shadow: 0px 1px 5px #262626;
}
Make width 100% and display inline-block. This should do the job.
So, my newer index is here, but the DropDown link list(when you hover over the link stuff you will see it) on the blog portion of my website which is here does not change. Any help would be nice. This is the menu bar for my website with the link list that is set up as a widget, since it's a blogger blog attached to the website itself:
<style type="text/css">
ul{
list-style-type: none;
margin: 0px;
padding: 150px;
overflow: hidden;
background-color: transparent;
position: absolute;
top: -79px;
left: -703.8px;
width: 940px;
font-size:19px;
font-family: Geo;
}
li {
float: left;
text-align: center;
color: #FF733B;
background-color: transparent;
}
li a {
float: left;
display: block;
padding: 20px;
color: #F2F2F2;
transition: .5s;
text-decoration: none;
background-color: transparent;
}
.dropbtn {
background-color: transparent;
color: #efefef;
padding: auto;
font-size: 12px;
border: none;
cursor: pointer;
}
.dropdown {
float: left;
display: relative;
font-color: #000;
}
.dropdown-content {
display: none;
position: fixed;
background-color: #f9f9f9;
min-width: 260px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
top: 65px;
z-index: 4;
}
.dropdown-content a {
color: #000;
padding: 8px 10px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
transition: .4s;
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: transparent;
}
</style>
<p align="center">
<div class="table">
<ul>
<li>Home</li><li>DATA</li><li>About</li><div class="dropdown">
<li class="dropbtn"><li>Stuff</li>
<div class="dropdown-content">
NIGHTCORE Creator
Artwork
BLOG
</div></li></div></ul></div></p>
<img style="float: right; margin: -69.9px -8.5px 0px 75px; height: 125.5%; width: 125.5%;" src="http://www.substructures.us/substructures2.png" />
I have two dropdown lists and they work as expected(that they show the content on hover) however, If I click on the area outside (left side) the list , the dropdown list still shows.
I have tried fixing the CSS but I have not been able to pin point the problem.
Is there a better approach for styling dropdown as I am still new to CSS.
UPDATE:
Testing this in firefox and I was unable to recreate the issue. How can I make sure that works consistently in all browsers?
.dropbtn {
color: white;
width: 200px;
margin-top: 160px;
margin-left: 276px;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
text-align: left;
font-weight: 900;
background: rgba(0, 173, 239, 1);
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 50px 50px 50px 50px;
position: relative;
z-index: 2;
}
.dropdown {
position: relative;
display: inline-block;
width: 480px;
height: 0px;
background: antiquewhite;
}
.dropdown-content {
display: none;
position: relative;
z-index: 1;
background-color: #f9f9f9;
/* min-width: 160px; */
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
right: 5px;
top: -20px;
margin-left: 283px;
}
.sphere {
height: 45px;
width: 45px;
border-radius: 50%;
vertical-align: top;
/* position: relative; */
background: black;
display: inline-block;
position: relative;
margin-top: 165px;
margin-left: -55px;
z-index: 2;
}
.dropdown-content a {
table-layout: fixed;
color: black;
margin-left: -1px;
padding: 12px 16px 13px 30px;
text-decoration: none;
display: block;
border: 1px solid #000;
border-top: none;
font-size: 21px;
}
.dropdown-content a:first-child {
padding-top: 35px;
background: url("Images/sidearrow.png") no-repeat 7px 36px;
}
.dropdown a {
background:url("Images/sidearrow.png") no-repeat 7px;
}
.dropdown-content a:first-child:hover {
padding-top: 35px;
background: url("Images/sidewhite.png") no-repeat 3px 36px;
color:black;
background-color: rgb(255,131,0);
}
.dropdown-content a:hover {
background:url("Images/sidewhite.png") no-repeat 3px;
background-color: rgb(255,131,0);
color:white;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
div#arrow {
position: absolute;
margin-left: 10px;
margin-top: 11px;
}
/* SENTINAL */
.dropbtn-sentinal {
color: white;
width: 200px;
margin-top: 160px;
margin-left: 276px;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
text-align: left;
font-weight: 900;
background: rgba(0, 173, 239, 1);
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 50px 50px 50px 50px;
position: relative;
z-index: 2;
}
.dropdown-sentinal{
position: relative;
display: inline-block;
width: 480px;
height: 0px;
background: antiquewhite;
}
.dropdown-content-sentinal {
display: none;
position: relative;
z-index: 1;
background-color: #f9f9f9;
/* min-width: 160px; */
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
right: 5px;
top: -20px;
margin-left: 283px;
}
.sphere-sentinal {
height: 45px;
width: 45px;
border-radius: 50%;
vertical-align: top;
/* position: relative; */
background: black;
display: inline-block;
position: relative;
margin-top: 165px;
margin-left: -55px;
z-index: 2;
}
.dropdown-content-sentinal a {
table-layout: fixed;
color: black;
margin-left: -1px;
padding: 12px 16px 13px 30px;
text-decoration: none;
display: block;
border: 1px solid #000;
border-top: none;
font-size: 21px;
}
.dropdown-content-sentinal a:first-child {
padding-top: 35px;
background: url("Images/sidearrow.png") no-repeat 7px 36px;
}
.dropdown-sentinal a {
background:url("Images/sidearrow.png") no-repeat 7px;
}
.dropdown-content-sentinal a:first-child:hover {
padding-top: 35px;
background: url("Images/sidewhite.png") no-repeat 3px 36px;
color:black;
background-color: rgb(255,131,0);
}
.dropdown-content-sentinal a:hover {
background:url("Images/sidewhite.png") no-repeat 3px;
background-color: rgb(255,131,0);
color:white;
}
.dropdown-sentinal:hover .dropdown-content-sentinal {
display: block;
}
.dropdown-sentinal:hover .dropbtn-sentinal {
background-color: #3e8e41;
}
div#arrow-sentinal {
position: absolute;
margin-left: 10px;
margin-top: 11px;
}
div#dropdown-one {
width: 500px;
height: 198px;
}
div#dropdown-two {
margin-left: 700px;
margin-top: -198px;
}
div#dropdown-content a {
text-decoration: none;
border: solid black 1px;
display: table-caption;
background-color: rgb(237,237,238);
background: url(Images/sidearrow.png) no-repeat 7px 36px;
}
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="dropdown.css">
<meta charset="utf-8">
</head>
<body>
<div class="averios-header">
<div id="averios-logo">
<img src="averioslogo.png" width="176" height="129">
</div>
<div id="setting-dropdown">
<!-- SETTING DROPDOWN WILL GO HERE -->
</div>
<div id="header-hr">
</div>
</div>
<div id="log-in">
<div id="loginHeader">
<h1>Portal</h1>
</div>
<div id="welcome-text">
<p> Welcome name </p>
<p> Your last login was time on date </p>
<br>
<p> Please select an application below to begin </p>
</div>
</div>
<div id="dropdown-one">
<div class="dropdown">
<button class="dropbtn">SELECT</button>
<div class="sphere">
<div id="arrow">
<img src="C:\Users\mseh\Desktop\Images\arrow.png" width="29" height="27" alt=""/>
</div>
</div>
<div class="dropdown-content">
Link 1
Link 1
Link 1
Link 1
</div>
</div>
</div>
<div id="dropdown-two">
<div class="dropdown-sentinal">
<button class="dropbtn-sentinal">SELECT</button>
<div class="sphere-sentinal">
<div id="arrow-sentinal">
<img src="C:\Users\mseh\Desktop\Images\arrow.png" width="29" height="27" alt=""/>
</div>
</div>
<div class="dropdown-content-sentinal">
Link 1
Link 1
Link 1
Link 1
</div>
</div>
</div>
</body>
</html>
Here - I shortened the example down a bit (I also don't think you need all that separate CSS for more than one button, you should be able to utilize the classes, and just change specifics by using #dropdown_two .classname for the things (like position) you might want to change.
The problem in Chrome, I think, was that the width of the container was wider than the button itself, and that made it misbehave. It might not be 100%, but it should get you started. I changed some values to dynamic (em instead of px) so there might be some issues.
#dropdown-one {
margin-left: 20em;
}
.dropbtn {
color: white;
width: 100%;
height: 3.2em;
font-size: 16px;
border: none;
cursor: pointer;
text-align: left;
font-weight: 900;
background: rgba(0, 173, 239, 1);
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 50px 50px 50px 50px;
position: relative;
z-index: 2;
}
.dropdown {
position: relative;
display: block;
width: 12.5em;
background:antiquewhite;
}
.dropdown-content {
display: none;
position: relative;
z-index: 1;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
top: -20px;
}
.sphere {
height: 2.9em;
width: 2.9em;
border-radius: 50%;
border: 2px solid rgba(0, 173, 239, 1);
/* position: relative; */
background: black;
position: absolute;
top: 0;
bottom: 0;
right: .1em;
z-index: 2;
}
.dropdown-content a {
table-layout: fixed;
color: black;
padding: .75em;
text-decoration: none;
display: block;
border: 1px solid #000;
border-top: none;
font-size: 21px;
box-sizing: border-box;
}
.dropdown-content a:first-child {
padding-top: 35px;
background: url("Images/sidearrow.png") no-repeat 7px 36px;
}
.dropdown a {
background:url("Images/sidearrow.png") no-repeat 7px;
}
.dropdown-content a:first-child:hover {
background: url("Images/sidewhite.png") no-repeat 3px 36px;
color:black;
background-color: rgb(255,131,0);
}
.dropdown-content a:hover {
background:url("Images/sidewhite.png") no-repeat 3px;
background-color: rgb(255,131,0);
color:white;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
div#arrow {
position: absolute;
margin-left: 10px;
margin-top: 11px;
}
<div class="averios-header">
<div id="setting-dropdown">
<!-- SETTING DROPDOWN WILL GO HERE -->
</div>
</div>
<div id="log-in">
<div id="loginHeader">
<h1>Portal</h1>
</div>
<div id="welcome-text">
<p> Welcome name </p>
<p> Your last login was time on date </p>
<p> Please select an application below to begin </p>
</div>
</div>
<div id="dropdown-one">
<div class="dropdown">
<button class="dropbtn">SELECT</button>
<div class="sphere">
<div id="arrow">
<img src="C:\Users\mseh\Desktop\Images\arrow.png" width="29" height="27" alt=""/>
</div>
</div>
<div class="dropdown-content">
Link 1
Link 1
Link 1
Link 1
</div>
</div>
</div>
I want the dropdown on my navbar to be wide enough the the text in it displays properly, but it's constrained to the size of the button you hover over to activate it. I want the dropdown to be a bigger width than the button.
The title displays fine in browser so not too sure why it is misaligned in the fiddle.
#center-title {
width: 200px;
font-size: 30px;
color: white;
position: fixed;
left: 50%;
transform: translateX(-50%);
text-align: center;
}
#cog {
width: 20px;
height: 20px;
margin-right: 50px;
margin-top: 15px;
}
#dropdown {
float: right;
position: relative;
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;
}
nav {
background-color: #2b569a;
width: 100%;
height: 50px;
margin-top: 0;
}
<nav>
<div class="center">
<h1 id="center-title"> Blocs </h1>
</div>
<div id="dropdown">
<img id="cog" src="/static/images/cog2.png" alt="" />
<div id="dropdown-content">
Profile
Settings
Logs
Email list
</div>
</div>
</nav>
Add right: 0; to #dropdown-content.
#center-title {
width: 200px;
font-size: 30px;
color: white;
position: fixed;
left: 50%;
transform: translateX(-50%);
text-align: center;
}
#cog {
width: 20px;
height: 20px;
margin-right: 50px;
margin-top: 15px;
}
#dropdown {
float: right;
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);
}
#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;
}
nav {
background-color: #2b569a;
width: 100%;
height: 50px;
margin-top: 0;
}
<nav>
<div class="center">
<h1 id="center-title"> Blocs </h1>
</div>
<div id="dropdown">
<img id="cog" src="/static/images/cog2.png" alt="" />
<div id="dropdown-content">
Profile
Settings
Logs
Email list
</div>
</div>
</nav>
You can use display:flex,instead of using float's and display:inline-block for layouts.
check this snippet
. #center-title {
width: 200px;
font-size: 30px;
color: white;
position: fixed;
left: 50%;
transform: translateX(-50%);
text-align: center;
}
#cog {
width: 20px;
height: 20px;
margin-right: 50px;
margin-top: 15px;
}
.center {
margin: auto;
}
#dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
right: 20px;
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;
}
nav {
background-color: #2b569a;
width: 100%;
height: 50px;
margin-top: 0;
display: flex;
justify-content: flex-end;
align-content: center;
}
<nav>
<div class="center">
<h1 id="center-title"> Blocs </h1>
</div>
<div id="dropdown">
<img id="cog" src="/static/images/cog2.png" alt="" />
<div id="dropdown-content">
Profile
Settings
Logs
Email list
</div>
</div>
</nav>
</div>
Hope it helps
I've made a top bar that contains drop-down MENU button on the right side. But this drop-down content has exactly the same size (width) as my MENU button. Finally - my goal is to make this drop-down content as wide as the top bar is.
My HTML code looks like this:
<div id="top-bar">
<div class="dropdown">
<button class="dropbtn">MENU</button>
<div class="dropdown-content">
Link
Link
Link
</div>
</div>
</div>
And more important part - CSS:
#top-bar{
left: 0;
top: 0;
float: left;
width:100%;
height:40px;
background-color: black;
}
.dropbtn {
background-color: blue;
color: white;
height: 40px;
font-size: 12px;
border: none;
cursor: pointer;
}
.dropdown {
float: right;
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
float: left;
position: absolute;
background-color: #f9f9f9;
width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 10px 14px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
width: 100%;
float: left;
left: 0;
}
.dropdown:hover .dropbtn {
background-color: blue;
}
If you want to see how does it look like HERE is jsFiddle link.
Don't you have any idea how to solve my problem?
Just move position: relative from .dropdown to #top-bar.
By doing this, .dropdown-content will calculate width according to the nearest element with position: relative i.e #top-bar.
#top-bar{
position: relative;
height:40px;
float: left;
width: 100%;
background-color: black;
}
.dropbtn {
background-color: blue;
color: white;
height: 40px;
font-size: 12px;
border: none;
cursor: pointer;
}
.dropdown {
float: right;
}
.dropdown-content {
display: none;
left: 0;
top: 100%;
position: absolute;
background-color: #f9f9f9;
width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 10px 14px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: blue;
}
<div id="top-bar">
<div class="dropdown">
<button class="dropbtn">MENU</button>
<div class="dropdown-content">
Link
Link
Link
</div>
</div>
</div>
I think that's what you want
#top-bar{
left: 0;
top: 0;
float: left;
width:100%;
height:40px;
background-color: black;
}
.dropbtn {
display: block;
float: right;
background-color: blue;
color: white;
height: 40px;
font-size: 12px;
border: none;
cursor: pointer;
}
.dropdown {
width: 100%;
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
float: left;
background-color: #f9f9f9;
width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 10px 14px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
width: 100%;
float: left;
left: 0;
}
.dropdown:hover .dropbtn {
background-color: blue;
}
<div id="top-bar">
<div class="dropdown">
<button class="dropbtn">MENU</button>
<div class="dropdown-content">
Link
Link
Link
</div>
</div>
</div>
https://jsfiddle.net/69uts0dr/3/