So how do I make a dropdown menu using this css? Tried some tuts, but with this css I can't get any of those dropdowns working ;(.
CSS:
.main {
list-style: none;
margin: 0;
margin-bottom: 100px;
padding: 0px;
height: 44px;
text-decoration: none;
background-color: #171a21;
width: 100%;
text-align: left;
font-size: 18px;
-webkit-box-shadow: 0px 0px 8px rgba(0, 6, 0, 0.45);
-moz-box-shadow: 0px 0px 8px rgba(0, 6, 0, 0.45);
box-shadow: 0px 0px 8px rgba(0, 6, 0, 0.45);
}
.main li {
float: left;
padding: 16px;
margin: 0;
line-height: 17px;
height: 16px;
margin-bottom: -6px;
margin-left: 45px;
list-style:none;
}
.main p {
float: left;
margin: 0;
padding: 0;
line-height: 17px;
height: 44px;
margin-bottom: -6px;
}
.main a {
display: block;
color: #b8b6b4;
text-decoration: none;
transition: all linear 0.15s;
}
.main a:hover {
display: block;
color: white;
text-decoration: none;
}
HTML:
<ul class="main">
<li>Test
<ul>
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
</ul>
</li>
</ul>
I'm just starting with html&css and making a site.
Thanks for any help ;).
Check this Fiddle:
The key is in those lines of CSS code:
.main li ul {
display: none;
}
.main li:hover > ul {
display: block;
}
Should be quite self explicative.
add these lines to your css file:
.main li ul {display: none;}
.main li:hover ul {display: block;}
Related
Hey i have my drop down menu here:
https://i.gyazo.com/642cdb023365cd8e7e086d53551fc385.png
I am having trouble getting the drop down text closer together i tried putting padding on content a {} but it doesn't seem to work
I included the html mark up as well along with the other styles I used for my nav bar.
nav {
padding-left: 5px
}
nav .main-nav {
height: 80px;
width: 100%;
margin-top: 64px;
background: url(../images/navHeader.png) no-repeat top;
position: relative
}
nav .main-nav ul {
width: 360px;
height: 80px;
margin-top: 2px;
padding: 0;
list-style-type: none
}
nav .main-nav ul a,
nav .main-nav ul li {
display: inline-block;
width: 115px;
line-height: 80px;
height: 80px
}
nav .main-nav ul a {
text-align: center;
font-weight: 750;
font-size: 15px;
color: #84827d;
text-shadow: 1px 1px 1px #000;
text-transform: uppercase;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out
}
nav .main-nav ul a:hover {
text-decoration: none;
color: #7289da
}
nav .main-nav li .dropdown {
}
nav .main-nav .dropdown-content {
position: absolute;
display: none;
float: left;
z-index: 10;
-webkit-box-shadow: 0 3px 5px 0 #999;
-moz-box-shadow: 0 3px 5px 0 #999;
box-shadow: 0 3px 5px 0 #999;
border: 1px solid #CCC;
background: #3A4FC5;
color: #656161;
opacity: .8;
min-width: 10%;
top: 60px;
}
nav .main-nav .dropdown-content a {
color: black;
text-decoration: none;
display: block;
text-align: center;
}
nav .main-nav .dropdown-content a:hover {
background-color: #3A4FC5
}
nav .main-nav .dropdown:hover .dropdown-content {
display: inline-block;
}
<nav>
<div class="main-nav">
<ul class="left">
<li class="dropdown">Home
<div class="dropdown-content">
Third
Third Link
Third Link 3
</div>
</li>
<li>Gods</li>
<li>Goddesses</li>
</ul>
<div class="play-now"></div>
<ul class="right">
<li>Heroes</li>
<li>Myths</li>
<li>Beasts</li>
</ul>
</div>
</nav>
This was problem with your code:
nav.main-nav ul a,
nav.main-nav ul li {
display: inline-block;
width: 115px;
line-height: 80px;
height: 80px;
}
You set line-height and height to be fixed size.
If you remove heightand set, for example, line-height: 2em; it should be much better.
nav.main-nav ul a,
nav.main-nav ul li {
display: inline-block;
width: 115px;
line-height: 2em;
}
Change height and line-height in tis rule:
nav .main-nav ul a,
nav .main-nav ul li {
display: inline-block;
width: 115px;
line-height: 8px;
height: 80px
}
That will solve your problem - I changed it to 30 px in the snippet below:
nav {
padding-left: 5px
}
nav .main-nav {
height: 80px;
width: 100%;
margin-top: 64px;
background: url(../images/navHeader.png) no-repeat top;
position: relative
}
nav .main-nav ul {
width: 360px;
height: 80px;
margin-top: 2px;
padding: 0;
list-style-type: none
}
nav .main-nav ul a,
nav .main-nav ul li {
display: inline-block;
width: 115px;
line-height: 30px;
height: 30px
}
nav .main-nav ul a {
text-align: center;
font-weight: 750;
font-size: 15px;
color: #84827d;
text-shadow: 1px 1px 1px #000;
text-transform: uppercase;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out
}
nav .main-nav ul a:hover {
text-decoration: none;
color: #7289da
}
nav .main-nav li .dropdown {}
nav .main-nav .dropdown-content {
position: absolute;
display: none;
float: left;
z-index: 10;
-webkit-box-shadow: 0 3px 5px 0 #999;
-moz-box-shadow: 0 3px 5px 0 #999;
box-shadow: 0 3px 5px 0 #999;
border: 1px solid #CCC;
background: #3A4FC5;
color: #656161;
opacity: .8;
min-width: 10%;
top: 60px;
}
nav .main-nav .dropdown-content a {
color: black;
text-decoration: none;
display: block;
text-align: center;
}
nav .main-nav .dropdown-content a:hover {
background-color: #3A4FC5
}
nav .main-nav .dropdown:hover .dropdown-content {
display: inline-block;
}
<nav>
<div class="main-nav">
<ul class="left">
<li class="dropdown">Home
<div class="dropdown-content">
Third
Third Link
Third Link 3
</div>
</li>
<li>Gods</li>
<li>Goddesses</li>
</ul>
<div class="play-now"></div>
<ul class="right">
<li>Heroes</li>
<li>Myths</li>
<li>Beasts</li>
</ul>
</div>
</nav>
Your dropdown anchors inherit properties from the following rule:
nav .main-nav ul a,
nav .main-nav ul li {
display: inline-block;
width: 115px;
line-height: 80px;
height: 80px
}
You can provide a more specific rule below like this:
nav .main-nav .dropdown-content a {
/* Set your height and line-height to whatever you want it to be to make the space between your items smaller */
height: 40px;
line-height: 40px
}
An easier way to manage this however would be set the height and line-height to their initial values and use padding:
nav .main-nav .dropdown-content a {
height: auto;
line-height: initial;
padding: 5px 0;
}
I have a navigation bar that contains elements, two of them are dropdown menus. I fixed the size of the elements on the navigation bar, but Im not able to do it on the elements that drop down. When the drop down comes down it is too wide, but when I hover over the elements, part of only the "fixed width" I specified is highlighted, and the rest isn't. I want them all to be 100px with no extra space on the side, how can I do that?
Code:
.topnav {
list-style-type: none;
margin: 0 auto;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
align-items: center;
}
.topnav ul {
list-style-type: none;
margin: 0 auto;
}
.topnav li {
float: left;
}
.topnav li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
width: 100px;
}
.topnav li a:hover,
.dropdown:hover .dropbtn {
background-color: #111;
}
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;
}
.topnav .dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav .dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="topnav">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li class="dropdown">Products
<div class="dropdown-content">
Computers
Tablets
Cell Phones
Wearable Technologies
Accessories
</div>
</li>
<li class="dropdown">Brands
<div class="dropdown-content">
Apple
Samsung
Lenovo
Dell
HP
Sony
Panasonic
Motorola
HTC
</div>
</li>
<li>Deals</li>
</ul>
</div>
JSFiddle: https://jsfiddle.net/29r9d18a/22/
Remove min-width: 160px from your .dropdown-content CSS class.
Change min-width of this one .dropdown-content and add max-width: 100px; also add word-break: break-word;.
Like this
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: auto;
max-width: 100px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
word-break: break-word;
z-index: 1;
}
Here is the working code.
.topnav {
list-style-type: none;
margin: 0 auto;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
align-items: center;
}
.topnav ul {
list-style-type: none;
margin: 0 auto;
display: inline-block;
-webkit-padding-start: 0;
}
.topnav li {
float: left;
}
.topnav li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
width: 100px;
}
.topnav li a:hover,
.dropdown:hover .dropbtn {
background-color: #111;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: auto;
max-width: 100px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
word-break: break-word;
z-index: 1;
}
.topnav .dropdown-content a {
color: black;
padding: 12px 5px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav .dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="topnav">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li class="dropdown">Products
<div class="dropdown-content">
Computers
Tablets
Cell Phones
Wearable Technologies
Accessories
</div>
</li>
<li class="dropdown">Brands
<div class="dropdown-content">
Apple
Samsung
Lenovo
Dell
HP
Sony
Panasonic
Motorola
HTC
</div>
</li>
<li>Deals</li>
</ul>
</div>
I'm trying to align the dropdown menu when I hover over get started, but it doesn't work.
I tried adding the code left:auto; right:0; margin-right:-10px; to my CSS (as you'll see below) but it did nothing.
How do I fix this or add another code to make my menu aligned?
Is there a certain CSS trick to solve this?
nav ul {
background: url(transparent.png);
width: 100%;
height: 52px;
text-align: center;
padding: 0;
margin: 0;
}
nav ul li {
display: inline;
}
nav ul li a {
text-decoration: none;
color: #fff;
letter-spacing: 0.2em;
font: normal 100% arial, sans-serif;
text-align: center;
display: inline-block;
margin: 10px 0 0 10px;
padding: 9px 26px 9px 26px;
text-transform: uppercase;
}
nav ul li a:hover {
color: #000;
background-color: #fff;
}
.dropdown {
display: inline-block;
}
.dropdown-content {
background: #f9f9f9;
min-width: 160px;
position: absolute;
display: none;
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: left;
}
.dropdown-content a:hover {
background: #bada55;
left: auto;
right: 0;
margin-right: -10px;
}
.dropdown:hover .dropdown-content {
display: block;
}
<header>
<h1>Model United Nations Conference</h1>
<img src="dove.png" alt="a simple dove logo">
<nav>
<ul>
<li>Home</li>
<li class="dropdown"><a id="start" href="#">Get started</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
<li>Gallery</li>
<li>Contact Us</li>
<li>Forum</li>
</ul>
</nav>
</header>
You should go with this:
left: 50%;
transform: translateX(-50%);
also, take a look at my comments in your CSS
nav ul {
background: transparent;
width: 100%;
height: 52px;
text-align: center;
padding: 0;
margin: 0;
}
nav ul li {
display: inline;
}
nav ul li a {
text-decoration: none;
color: #DDD;
letter-spacing: 0.2em;
font: normal 100% arial, sans-serif;
text-align: center;
display: inline-block;
/*
margin: 10px 0 0 10px;
Use Equal margins: */
margin: 5px;
padding: 9px 26px 9px 26px;
text-transform: uppercase;
}
nav ul li a:hover {
color: #000;
background-color: #fff;
}
.dropdown {
display: inline-block;
/* important: */
position: relative;
}
.dropdown-content {
background: #f9f9f9;
min-width: 160px;
position: absolute;
display: none;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
/* Position */
left: 50%;
transform: translateX(-50%);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background: #bada55;
}
.dropdown:hover .dropdown-content {
display: block;
}
<header>
<h1>Model United Nations Conference</h1>
<img src="dove.png" alt="a simple dove logo">
<nav>
<ul>
<li>Home</li>
<li class="dropdown"><a id="start" href="#">Get started</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
<li>Gallery</li>
<li>Contact Us</li>
<li>Forum</li>
</ul>
</nav>
</header>
For nav ul li a
I set this margin: 10px 0 0 0px;
This would align the "Get Started" header with the drop down values Aligned Dropdown Img
Is this how you wanted ?
nav ul {
background: url(transparent.png);
width: 100%;
height: 52px;
text-align: center;
padding: 0;
margin: 0;
}
nav ul li {
display: inline;
position:relative
}
nav ul li >a {margin: 10px 0 0 10px;}
nav ul li a {
text-decoration: none;
color: #000;
letter-spacing: 0.2em;
font: normal 100% arial, sans-serif;
text-align: center;
display: inline-block;
padding: 9px 26px 9px 26px;
text-transform: uppercase;
}
nav ul li:hover a{
color: #000;
background-color: #fff;
}
.dropdown {
display: inline-block;
}
.dropdown-content {
background: #f9f9f9;
min-width: 160px;
position: absolute;
display: none;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
left: 10px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background: #bada55;
left: auto;
right: 0;
}
.dropdown:hover .dropdown-content {
display: block;
}
<header>
<h1>Model United Nations Conference</h1>
<img src="dove.png" alt="a simple dove logo">
<nav>
<ul>
<li>Home</li>
<li class="dropdown"><a id="start" href="#">Get started</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
<li>Gallery</li>
<li>Contact Us</li>
<li>Forum</li>
</ul>
</nav>
</header>
I have a problem with my navbar. It looks like this:
It's allo good, but i want that the transparency is the same all over the whole navbar. Now it looks like that only the parts without the links is transparent.
Here is my code.
HTML:
.nav-collapse {
height: 35px;
position: relative;
width: 100%;
text-align: center;
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
background-color: rgba(38, 44, 58, 0.8);
color: rgba(1, 1, 1, 0.8);
*zoom: 1;
}
.nav-collapse ul {
padding: 0;
margin: 0 auto;
width: 400px;
height: 35px;
}
.nav-collapse li {
float: left;
display: inline;
}
.nav-collapse a {
font-family: "lavanderia_regular", Georgia, serif;
font-weight: bold;
display: inline-block;
width: 100px;
cursor: pointer;
font-size: 18px;
color: #a7dbdb;
text-decoration: none;
text-align: center;
line-height: 35px;
}
.nav-collapse a:hover {
color: #69d2e7;
}
.nav-collapse:before, .nav-collapse:after {
content: " ";
display: table;
}
.nav-collapse:after {
clear: both;
}
#pull {
display: none;
}
<nav class="nav-collapse">
<ul class="nav-collapse">
<li>Home</li>
<li>Bilder</li>
<li>Rezepte</li>
<li>Blog</li>
</ul>
<a href"#" id="pull">Menu</a>
</nav>
Add background-color: transparent; to the CSS class .nav-collapse ul. Here is a fiddle http://jsfiddle.net/ytyoy6zv/
Here ya go. But you probably want to use different class names for these different elements.
.nav-collapse {
height: 35px;
position: relative;
width: 100%;
text-align: center;
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
background-color: rgba(38, 44, 58, 0.8);
color: rgba(1, 1, 1, 0.8);
*zoom: 1;
}
.nav-collapse ul {
padding: 0;
margin: 0 auto;
width: 400px;
height: 35px;
box-shadow:none; /* since you're reusing the nav-collapse class... override */
background-color:transparent; /* and override background-color too */
}
.nav-collapse li {
float: left;
display: inline;
}
.nav-collapse a {
font-family: "lavanderia_regular", Georgia, serif;
font-weight: bold;
display: inline-block;
width: 100px;
cursor: pointer;
font-size: 18px;
color: #a7dbdb;
text-decoration: none;
text-align: center;
line-height: 35px;
}
.nav-collapse a:hover {
color: #69d2e7;
}
.nav-collapse:before, .nav-collapse:after {
content: " ";
display: table;
}
.nav-collapse:after {
clear: both;
}
#pull {
display: none;
}
<nav class="nav-collapse">
<ul class="nav-collapse">
<li>Home</li>
<li>Bilder</li>
<li>Rezepte</li>
<li>Blog</li>
</ul>
<a href"#" id="pull">Menu</a>
</nav>
.menu li {
float: left;
color: #fff;
font-weight: bold;
}
.menu li a {
display: block;
height: 20px;
min-width: 110px;
text-decoration: none;
border-radius: 3px;
padding: 4px;
padding-left: 6px;
padding-right: 6px;
margin-left: 25px;
margin-right: 25px;
}
.menu li ul {
display: none;
max-width: 110px;
padding: 4px;
margin-left: 25px;
margin-right: 25px;
list-style: none !important;
list-style-image: none !important;
}
.menu li a:hover {
background-color: rgba(0, 88, 153, 0.8);
}
.menu li:hover ul {
display: block;
padding: 0;
margin-top: 9px;
list-style: none !important;
list-style-image: none !important;
}
.menu li:hover ul a {
display: block;
background-color: rgba(0, 88, 153, 0.8);
width: 110px;
border-radius: 3px;
padding-top: 6px;
padding: 4px;
padding-left: 6px;
padding-right: 6px;
text-align: left;
margin: 0;
margin-bottom: 5px;
Above here the code I'm currently using, I want the UL to float above everything, I tried 'fixed' and 'absolute' but then it disappears, I tried to change 'margin-left' to 'inherit' but that didn't work either. I want the UL to float beneath the parent LI.
JSFiddle
You need to position the submenu absolutely after first having positioned the parent li relative
HTML (Corrected) (with thanks to #Malcom for the container
<div class="container">
<div class="menu">
<ul>
<li>Home
</li>
<li>Sub
<ul>
<li>Sub1
</li>
<li>Sub2
</li>
<li>Sub3
</li>
</ul>
</li>
</ul>
</div>
</div>
As you can see, this text moves when you hover 'Sub'
CSS (clipped to relevant parts)
.menu li {
float: left;
color: #fff;
font-weight: bold;
position: relative; /* this */
}
.menu li ul {
position: absolute; /* this */
display: none;
max-width: 110px;
padding: 4px;
margin-left: 25px;
margin-right: 25px;
list-style: none !important;
list-style-image: none !important;
}
JSfiddle Demo