I am practicing in making a css dropdown. However, in the following code, on hovering the "Hello" li , I want the dropdown li "Hello1" to drop just below it. It's happening. However unfortunately the other li's "Cool" and "World" also comes down. I wanna know both the reason and the solution. However I don't want to add float to any of the elements as it has created some issues previously.
html body {
height: 100%;
width: 100%;
}
.roundborder {
border-radius:5px
}
.container {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
width: 75%;
/* [disabled]background-color: rgba(153,153,153,1); */
height: auto;
}
ul {
text-align: center;
border: thin solid rgba(0,0,0,1);
width: auto;
margin-top: 0;
margin-right: 10%;
margin-bottom: 0;
margin-left: 10%;
padding-top: 0;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
background-color: rgba(255,0,0,1);
height: 30px;
}
li {
display: inline-block;
border: 1px solid black;
/* [disabled]padding: 5px; */
height: 30px;
width: auto;
margin-top: 0;
margin-right: 15px;
margin-bottom: 0;
margin-left: 15px;
}
ul > li > ul {
width: 100px;
display: none;
padding-left: 0px;
margin-top: 10px;
margin-left: 0px;
}
ul > li > ul > li {
display:block;
list-style-type:none;
}
ul li:hover > ul {
display: block;
}
<div class="container">
<ul class="roundborder">
<li>Hello
<ul>
<li> Hello1 </li>
</ul>
</li>
<li>Cool</li>
<li>World</li>
</ul>
</div>
Because your not specifically setting the 'position' attribute for your dropdown it will use the default positioning(position:relative) which will affect the positioning of the elements around it try position:absolute
i.e
ul > li{
position:relative;
...
}
ul > li > ul{
position:absolute;
left:0;
top: 30px;/*or height of header*/
...
}
This article explains the positioning attribute in depth https://developer.mozilla.org/en/docs/Web/CSS/position
Related
I have been working to make a multi-level dropdown navbar, and when the dropdown finally started working, the rest of the navigation broke.
I'm trying to get a navbar with a width of 100% of the body, and then a container that is 80% of the body
#nav {
width: 100%;
background-color: red;
}
.container {
width: 80%;
}
However, after getting the dropdown to work, the background color of the nav (red) is no longer showing, and the grey area of the dropdown lists only spans across a much smaller area.
How can I get the dropdown/navigation lists to sit within the container (80% of body) while keeping the span all the way across the 100% width of the body? Note, the colors don't matter so much right now, just getting the right distance setup.
Here is a CodePen
And the snippet
#nav {
width: 100%;
background-color: red;
}
.container {
width: 80%;
}
.third-level-menu {
position: absolute;
top: 0;
right: -150px;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.third-level-menu > li {
height: auto;
background: #999999;
}
.third-level-menu > li:hover {
background: #cccccc;
}
.second-level-menu {
z-index: 2;
position: absolute;
top: 30px;
left: 0;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.second-level-menu > li {
position: relative;
height: 30px;
background: #999999;
}
.second-level-menu > li:hover {
background: #cccccc;
}
.top-level-menu {
list-style: none;
padding: 0;
margin: 0;
z-index: 2;
float: left;
line-height: normal;
text-align: center;
height: auto;
}
.top-level-menu > li {
display: inline-block;
position: relative;
float: left;
height: 30px;
width: 100px;
background: #999999;
}
.top-level-menu > li:hover {
background: #cccccc;
}
.top-level-menu li:hover > ul {
display: inline;
}
.top-level-menu a {
font: bold 14px Arial, Helvetica, sans-serif;
color: #ffffff;
text-decoration: none;
padding: 0 0 0 10px;
display: block;
line-height: 30px;
}
.top-level-menu a:hover {
color: #000000;
}
<nav id="nav">
<div class="container">
<ul class="top-level-menu">
<li>About</li>
<li>Services</li>
<li>
Offices
<ul class="second-level-menu">
<li>Chicago</li>
<li>Los Angeles</li>
<li>
New York
<ul class="third-level-menu">
<li>Information</li>
<li>Book a Meeting</li>
<li>Testimonials</li>
<li>Jobs</li>
</ul>
</li>
<li>Seattle</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
</nav>
Change your CSS to look like this:
#nav{
position: absolute;
top: 0px;
left: 0px; // setting left and right to 0px will make the container take up the entire page
right: 0px;
background-color: red;
}
Also, if you want your elements in the navbar centred, add the following lines of code to your current stylesheet.
.container{
margin: 0 auto; // center the container
}
.top-level-menu{
width: 100%; // make the width of the menu 100% of the container
}
.top-level-menu li{
width: 25%; // make the width of each li element 25% of the container (100% / 4 li = 25%)
}
you need to clear float
.clearfix::after {
content: "";
clear: both;
display: table;
}
add clearfix class to top-level-menu
I am trying to make the top menu vertically center without assigning value like margin-top: 50px; because some of my friends say this is not the ideal approach.
/* Nav Section */
.nav {
width: 100%;
padding: 0;
margin: 0;
}
.nav-contain {
width: 1100px;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
.logo {
z-index: 10;
display: inline-block;
background: #2980B9;
padding: 65px 50px 35px 45px;
font-size: 36px;
line-height: 42px;
color: #fff;
text-align: center;
}
.logo a {
color: #FFFFFF;
text-decoration: none;
}
#medical {
display: block;
text-transform: uppercase;
}
.menu {
padding: 0;
margin: 0;
float: right;
display: table-cell;
position: relative;
}
.menu a {
text-decoration: none;
color: #505050;
font-weight: bold;
}
.menu ul {
padding: 0;
margin: 0;
float: left;
top: 50%;
}
.menu ul ul {
padding: 0;
margin: 0;
}
.menu ul li {
float: left;
display: block;
margin-left: 45px;
}
.menu ul ul {
position: absolute;
left: -999px;
}
.menu ul li:hover ul {
left: auto;
}
.menu ul li ul li {
margin-left: 0;
float: none;
margin-top: 15px;
}
<div class="nav">
<div class="nav-contain">
<div class="logo">
<span id="medical">Medical</span><span id="company"> Company</span>
</div>
<!-- Logo -->
<div class="menu">
<ul>
<li>Home</li>
<li>About
<ul class="dropdown">
<li>Sample</li>
<li>Sample</li>
</ul>
</li>
<li>Gallery</li>
<li>Prices</li>
<li>Contact</li>
</ul>
</div>
<!-- Menu -->
</div>
<!-- Nav Contain -->
</div>
<!-- Nav -->
Remove float:right on .menu, and set both .logo and .menu to this:
.logo, .menu {
display: inline-block;
vertical-align: middle;
}
If you need .menu to stay on far right side, also add this:
.nav-contain {
text-align: justify;
}
.nav-contain:after{
content: '';
display: inline-block;
width: 100%;
}
How it works:
Set text-align: justify; will line up the two inner inline blocks to the left and right edges of the container.
Create an invisible 100% width element by using :after or :before pseudo-element stretching the box to occupy the entire space of the container. Otherwise inline element occupies only the space bounded by the tags that define the inline element.
One easy way to center here is to use Flexbox:
.nav-contain {
/* what is already there */
display: flex;
align-items: center;
}
Beware of browser support (check caniuse.com to see if the compatibility level is acceptable to you).
This is superior to the margin-top solution as it ensures that you won't have to manually change that 50px each time the size of the image or anything else in the navbar changes.
Try:
.menu > ul > li {
min-height:50px;
display: table;
}
.menu > ul > li > a {
display: table-cell;
vertical-align: middle;
}
http://jsfiddle.net/rawat/4h05rq2s/
Since your navbar remains the same height the whole time, I suggest you give the .nav-contain the following code:
.nav-contain {
width: 1100px;
margin: 0 auto;
line-height: 184px;
padding: 0;
overflow: hidden;
}
Note the line-height.
This will, once you smaller the available width of your device, result in a probably not so nice looking huge navigation bar. For this, I suggest media queries.
When the screen is below 450px the logo disappears to give the nav space, but the nav then goes about 20px off the left side of the screen.
http://codepen.io/briligg/pen/emwXaw?editors=110
I believe this is the relevant code - i might have included more than necessary. CSS:
#media screen and (max-width: 450px) {
img#logo {
display: none;
width: 0;
}
nav {
width: 100%;
min-width: 100%;
}
}
div#top{
position: fixed;
top: 0px;
width: 100%;
height: 130px;
z-index: 5;
}
img#logo {
border: 0;
float: left;
width: 20%;
margin-right: 2%;
margin-left: 2%;
margin-top: 5px;
max-width: 123px;
}
nav { position: fixed;
top: 0px;
right: 0px;
width: 70%;
float: right;
padding: 2%;
height: 60px;
max-height: 60px;
margin: 5px 5px;
}
nav button {
padding: 0 4px;
height: 28px;
font: 16px;
}
nav button ul {
position: relative;
display: none;
}
nav button:hover ul, nav button:focus ul {
display: block;
z-index: 6;
list-style: none;
padding: 4px;
}
nav button:hover li, nav button:focus li {
padding: 4px;
}
nav a {
text-decoration: none;
color: white;
}
nav a:hover, nav a:focus {
color: #9dab71;
}
And here is the relevant HTML:
<div id="top">
<a href="default.html"><img id="logo" src="http://www.briligg.com/images/briligg-loopless-blue.png"
alt="briligg home" /></a>
<nav>
<button>Purpose</button>
<button>Moon vs Mars
<ul>
<li>Ambiance</li>
<li><a style="border-bottom: 1px solid #666666;" href="moonvsmars.html#communication">Communication</a></li>
<li>There and Back</li>
</ul>
</button>
<button>Being There
<ul>
<li>World Domination</li>
<li>Chickens</li>
<li>Down with Gravity</li>
<li>The Moonstar</li>
</ul>
</button>
</nav>
</div>
You have given the nav element a min-width of 100%... because of the way the box model works, adding padding and margin to that forces the element to be wider than the viewport.
You can fix it by adding box-sizing: border-box; to your nav element. This will force any padding or border to be included as width. See more details here.
I would suggest reading up on how the box model works at w3schools and adjusting your padding and margin accordingly.
I am trying to give the menu elements a hover, but they are also having a padding: 10px; and as the result of that the :hover: background-color: will start from the 10px padding.
Any idea how to solve the problem? Here's a jsfiddle demo for that: http://jsfiddle.net/eufqg7d9/
This is caused by the default padding of the UL. You can either explicitly set this to padding: 0 or use a reset like http://meyerweb.com/eric/tools/css/reset/.
Here is your fiddle with a this reset applied: http://jsfiddle.net/h3erxugg/
You can also skip adding extra classes (like "list-item") and simply target the 'li' element itself within the #menu "namespace". Here's an example of what I mean:
<div id="menu">
<ul>
<li>Menü #1</li>
<li>Menü #2</li>
<li>Menü #3</li>
</ul>
</div>
And then the corresponding CSS would look something like this:
#menu ul {
list-style: none;
}
#menu li {
padding: 10px;
}
#menu li:hover {
opacity: 0.7;
background-color: red;
}
Updated fiddle: http://jsfiddle.net/eufqg7d9/3/
li.menu-item:hover {
margin-left: 10px;
padding-left: 0px;
opacity: 0.7;
background-color: red;
}
Since it was unclear what you were asking I have made you another fiddle: http://jsfiddle.net/eufqg7d9/6/. This basically creates the effect of your picture.
ul {
margin: 0;
padding: 0;
}
li {
margin: 0;
}
div#main {
width: 900px;
height: auto;
border: 1px solid #ccc;
margin: 0 auto;
}
div#menu {
width: 300px;
height: auto;
float: left;
background-color: yellow;
}
ul.menu-list {
list-style: none;
}
li span {
margin-left: 40px;
}
li.menu-item {
width: auto;
padding: 10px;
}
li.menu-item:hover {
opacity: 0.7;
background-color: red;
}
Try to update this portion of css.
ul.menu-list {
list-style: none;
padding-left: 0;
}
I have added padding-left: 0; to remove the padding on the left side.
So, I have a navigation bar and then an <ul> which has some <li>inside. I want it to be vertically aligned with the navigation bar .navbar but it seems it's not working. Do anyone have andy idea what am I doing wrong?
Here is the fiddle and code: http://jsfiddle.net/x7EAg/2/
<style>
.navbar {
width: 100%;
height: 90px;
background: black;
border-radius: 0px !important;
}
.navbar .logo-holder {
background-image: url(../img/logo.png);
width: 75px;
height: 57px;
margin-top: 15px;
}
.navbar .sections {
list-style: none;
margin-left: 70px;
margin-bottom: 50px;
}
.navbar .sections li {
display: inline-block;
padding: 0 25px 0 0;
vertical-align: middle;
}
</style>
<nav class="navbar" role="navigation">
<div class="container">
<div class="logo-holder"></div>
<ul class="sections">
<li>Shop</li>
<li>Team</li>
<li>Events</li>
<li>Experience</li>
<li>Company</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
Thank you!
If I understand what you are trying to achieve. Then you should make the logo absolutely positioned and then aligning the ul can be done with line-height. Full css:
.navbar {
width: 100%;
height: 90px;
line-height:90px;
background: black;
border-radius: 0px !important;
}
.navbar .logo-holder {
position: absolute;
top:0;
left:0;
background-repeat: no-repeat;
background-image: url(../img/logo.png);
width: 75px;
height: 57px;
margin-top: 15px;
}
.navbar .sections {
list-style: none;
margin-left: 70px;
margin-bottom: 50px;
}
.navbar .sections li {
display: inline-block;
padding: 0 25px 0 0;
}
And updated fiddle
i changed the display of your logo-holder to inline-block and then set vertical-align:middle
now it appears next to the logo, and vertically centered.
see here for a fiddle http://jsfiddle.net/gaurav5430/x7EAg/3/
this is the complete css:
.navbar {
width: 100%;
height: 90px;
background: black;
border-radius: 0px !important;
}
.navbar .logo-holder {
background-image: url(../img/logo.png);
width: 75px;
height: 57px;
margin-top: 15px;
display:inline-block;
vertical-align:middle;
}
.navbar .sections {
display:inline-block;
vertical-align:middle;
list-style: none;
margin:0px;
padding:0px;
background:#aaa;
}
.navbar .sections li {
display: inline-block;
padding: 0 25px 0 0;
vertical-align: middle;
}
What I believe is going on is your logo is pushing your ul down. like was mentioned above. You may want to float your logo-holder class left. That would allow you to position your li as you needed. Line-height is a way to do this, you could also use margin, padding, or absolute position for your li as needed. Good luck.