I have a z-index issue on top-navigation with a menu and its sub-menu, i want menu to overlap sub-menu, i have set z-index of menu higher than sub-menu, but it is not working sub-menu is overlapping menu as default.
Please see and suggest any possible way to do it.
jsFiddle
HTML
<div id="login">
<ul>
<li id="overlap">Log In | Join
<ul class="tsm">
<li>Log In</li>
<li>Join</li>
</ul>
</li>
</ul>
</div>
CSS
#login {
margin: 0px auto;
width: 1000px;
height: 38px;
background: #343438;
}
#login ul {
float: right;
margin: 0px;
padding: 0px;
width: auto;
height: 38px;
}
#login ul li {
float: left;
width: auto;
height: 34px;
display: inline;
list-style-type: none;
}
#login ul a {
color: #FFF;
display: block;
width: auto;
height: 34px;
font: bold 16px/34px "Arial Narrow", Arial, sans-serif;
text-decoration: none;
text-align: center;
padding: 0px 15px;
text-shadow: 0px -1px #000;
}
#login .tsm {
padding: 20px;
background-color: #F2F2F4;
width: 230px;
height: auto;
text-align: left;
border: 4px solid #777;
position: absolute;
visibility: hidden;
top: 32px;
right: 0px;
z-index: 100;
}
#login .tsm li a {
width: 230px;
height: 30px;
margin-bottom: 1px;
text-align: left;
padding: 0px;
text-decoration: none;
color: #000;
text-shadow: 0px 1px #fff;
font: 15px/30px Arial, sans-serif;
border-bottom: 1px solid #DDDDDF;
}
#login ul #overlap {
position: relative;
border: 2px solid #900;
z-index: 1000;
}
#login ul li:hover .tsm {
visibility: visible;
}
#login ul ul li {
border: none;
}
The problem stems from the fact that you're trying to position the parent above its child, which causes problems - if the parent moves up a level, so do its children. Instead of z-indexing the parent list, you need to z-index the login link (a tag):
http://jsfiddle.net/SaNJA/
The code is rough, but it should get you started.
Make sure you add a background colour to the link, otherwise you'll still be able to see through it.
Related
I have been working on fixing this but cannot figure out what I am missing. I would like for drop down list to show right below its parent. The list shows but all go to far left and forces the remaining nav items to drop down to another line. i have included a snippet for what is currently looks like and an image of what I want it to look like. Also, I have been trying to figure out how to add down fa fa-caret to nav items with drop down list. Please help!
.navbar {
background: linear-gradient(#9E0A0C, #EBEBEB);
padding: 10px;
border-top: solid 1px #000000;
overflow: hidden;
}
.navbar a {
text-decoration: none;
color: #ffffff;
font-weight: bolder;
font-size: 20px;
text-transform: uppercase;
padding: 3px 5px;
margin: auto;
/*float: left; may need to be removed to show borders*/
display: inline;
}
.navbar ul {
padding: 0;
margin-top: 0;
width: auto;
}
.navbar li {
border-left: solid 2px #000000;
display: inline;
list-style-type: none;
width: 800px;
padding: 0;
}
.navbar a:active {
background-color: #000000;
}
.navbar a:hover {
background-color: #ddd;
color: black;
font-size: 20px;
}
li:first-child {
border-left: none;
}
.dropdown {
display: block;
overflow: hidden;
/*float: left;*/
}
.list {
display: none;
min-width: 50px;
max-width: 150px;
z-index: 2;
box-shadow: 0 8px 16px 0 #e7e7e7;
background: #050243;
}
.list a {
color: #000000;
float: none;
font-size: 14px;
text-decoration: none;
display: block;
text-align: left;
background: #B6B6B6;
columns: 2;
}
.list a:hover {
background-color: #EEEEEE;
}
.dropdown:hover .list {
display: block;
}
form {
float: right;
padding: 0px;
margin: 0;
overflow: auto;
}
input {
border: solid 1px #000000;
background-image: url(pics/search.png);
background-repeat: no-repeat;
background-position: center right;
background-size: 15px;
border-radius: 5px;
padding: 5px 2px;
width: 250px;
}
<div class="navbar">
<ul>
<li>Home</li>
<li class="dropdown">Our Lodge
<div class="list">
NEWS
FACILITIES
OFFICERS
GUEST BOOK
</div>
</li>
<li class="dropdown">Events
<div class="list">
CALENDAR
BINGO
</div>
</li>
<li class="dropdown">Contact Us
<div class="list">
BECOME AN ELK
</div>
</li>
<form action="#">
<input type="text" placeholder="Search.." name="search">
</form>
</ul>
</div>
You can achieve this by first making the div.list element into an absolute positioned. The 'display:block' property was pushing all the other content down to the next row because the block element was taking up space.
As you see now the list is no longer pushing the content down but now it is not aligned to the correct nav item. We are also going to add a left:0 so that the div.list is to the left of the parent property.
Now the parent property needs a position of relative so that the left:0 on the child element is being positioned relative to the parent element.
.dropdown:hover .list {
display: block;
position: absolute;
left: 0;
}
.navbar li {
border-left: solid 2px #000000;
display: inline;
list-style-type: none;
width: 800px;
padding: 0;
position: relative;
}
The problem with your CSS code is, you missed to add position: relative and position: absolute to the .dropdown and .list selectors, which is compulsory to create dropdown. Try this code.
.navbar {
background: linear-gradient(#9E0A0C, #EBEBEB);
padding: 10px;
border-top: solid 1px #000000;
}
.navbar a {
text-decoration: none;
color: #ffffff;
font-weight: bolder;
font-size: 20px;
text-transform: uppercase;
padding: 3px 5px;
margin: auto;
/*float: left; may need to be removed to show borders*/
display: inline;
}
.navbar ul {
padding: 0;
margin-top: 0;
width: auto;
}
.navbar li {
border-left: solid 2px #000000;
display: inline;
list-style-type: none;
width: 800px;
padding: 0;
}
.navbar a:active {
background-color: #000000;
}
.navbar li:hover > a {
background-color: #ddd;
color: black;
}
li:first-child {
border-left: none;
}
.dropdown {
display: block;
overflow: hidden;
position: relative;
/*float: left;*/
}
.list {
display: none;
min-width: 50px;
max-width: 150px;
z-index: 2;
box-shadow: 0 8px 16px 0 #e7e7e7;
background: #050243;
position: absolute;
left: 0;
top: 100%;
}
.list a {
color: #000000;
float: none;
font-size: 14px;
text-decoration: none;
display: block;
text-align: left;
background-color: #B6B6B6;
columns: 2;
}
.list a:hover {
background-color: #EEEEEE;
}
.dropdown:hover .list {
display: block;
}
form {
float: right;
padding: 0px;
margin: 0;
overflow: auto;
}
input {
border: solid 1px #000000;
background-image: url(pics/search.png);
background-repeat: no-repeat;
background-position: center right;
background-size: 15px;
border-radius: 5px;
padding: 5px 2px;
width: 250px;
}
--> Please update following code in your existing file
.navbar {
background: linear-gradient(#9E0A0C, #EBEBEB);
padding: 10px;
border-top: solid 1px #000000;
}
.navbar a {
text-decoration: none;
color: #ffffff;
font-weight: bolder;
font-size: 20px;
text-transform: uppercase;
padding: 3px 5px;
margin: auto;
display: inline;
}
.navbar ul {
padding: 0;
margin-top: 0;
width: auto;
}
.navbar li {
border-left: solid 2px #000000;
display: inline;
list-style-type: none;
width: 800px;
padding: 0;
position: relative;
}
.navbar a:active {
background-color: #000000;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
li:first-child {
border-left: none;
}
.dropdown {
display: block;
overflow: hidden;
}
.list {
opacity: 0;
visibility: hidden;
min-width: 50px;
max-width: 150px;
z-index: 2;
box-shadow: 0 8px 16px 0 #e7e7e7;
background: #050243;
position: absolute;
top: 20px;
left: 0;
transition: 0.3s ease-in-out;
}
.list a {
color: #000000;
float: none;
font-size: 14px;
text-decoration: none;
display: block;
text-align: left;
background: #dddddd;
columns: 2;
}
.list a:hover {
background-color: #EEEEEE;
}
.dropdown:hover .list {
opacity: 1;
visibility: visible;
}
form {
float: right;
padding: 0px;
margin: 0;
overflow: auto;
}
input {
border: solid 1px #000000;
background-image: url(pics/search.png);
background-repeat: no-repeat;
background-position: center right;
background-size: 15px;
border-radius: 5px;
padding: 5px 2px;
width: 250px;
}
<div class="navbar">
<ul>
<li>Home</li>
<li class="dropdown">Our Lodge
<div class="list">
NEWS
FACILITIES
OFFICERS
GUEST BOOK
</div>
</li>
<li class="dropdown">Events
<div class="list">
CALENDAR
BINGO
</div>
</li>
<li class="dropdown">Contact Us
<div class="list">
BECOME AN ELK
</div>
</li>
<form action="#">
<input type="text" placeholder="Search.." name="search">
</form>
</ul>
</div>
I am trying to move an LI Nav bar to the top right of a page, however when I position: absolute; and top: 0; on my <li> I get my list which is also display: inline; all stacked on top of each other. They go to the part of the screen I want because I'm also float: right; but they won't stay in a line.
Any ideas?
HTML(html and doctype and link tags left out, they're there):
<div id="search">Google Search</div>
<div id="lucky">I'm feeling lucky</div>
<form>
<input id="search_box" type="text" name="">
</form>
<ul>
<li class='nav'>+You</li>
<li class='nav'>Gmail</li>
<li class='nav'>Images</li>
</ul>
CSS:
#search {
font-family: Arial;
font-size: 10;
font-weight: bold;
border: 1px solid black;
width: 7.2em;
white-space: nowrap;
padding-left: 4px;
padding-top: 3px;
padding-right: 4px;
padding-bottom: 4px;
margin: 240px 14px 100px 225px;
display: inline-block; }
#lucky {
font-family: Arial;
font-size: 10;
font-weight: bold;
padding-left: 4px;
padding-top: 3px;
padding-right: 4px;
padding-bottom: 4px;
border: 1px solid black;
display: inline-block; }
#search_box {
width: 600px;
position: absolute;
left: 65px;
top: 212px; }
ul {
list-style-type: none;
margin: 0;
padding: 0; }
.nav {
display: inline-block;
float: left;
padding: 20px;
position: absolute; }
The li's are stacked on top of each other because you are absolute positioning them to the same place. You want to make the ul absolute positioned instead. Include the code below in your css and for good measure you should also tell include something that it is positioned relative to.
ul {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
top: 0;
right: 0;
}
.nav {
display: inline-block;
/* float: left;*/
padding: 20px;
/*position: absolute;*/ }
body{position: relative;}
Try this http://jsfiddle.net/csdtesting/oe55maf0/2/
Added #header :
#header{
float:right;
}
and removed position:absolute; from .nav class .Also added #content :
#content{
position:absolute;
}
to contain the form .
Now the structure is clear.
Hope this helps!
Could not really find a good title for this question...
Problem: When resizing the browser window, the menu position is not updated in Chrome, UNTIL you hover with the mouse over. In Firefox there is no problem at all.
I've made a simple fiddle http://jsfiddle.net/fHcw7/
If replacing 'position fixed' to 'position relative' there is no problem in Chrome
Html
<div id="main">
<div id="div_top" class="menu">
<nav>
<ul>
<li>
HELLO
</li>
<li>
WORLD
</li>
<li>
BANANA
</li>
</ul>
</nav>
</div>
</div>
CSS
#main
{
height: 175%;
width: 100%;
border: solid red 1px;
position: absolute; top: 0; left: 0;
overflow: hidden;
background-color: #333;
}
#div_top
{
width: 100%;
height: 100px;
margin-top: 20px;
position: fixed;
border: solid yellow 1px;
text-align: center;
font-size: 18px;
font-weight: bold;
color: #fff;
z-index: 100;
}
.menu a:link
{
color: #fff;
text-decoration: none;
}
.menu a:visited
{
color: #fff;
text-decoration: none;
}
.menu a:hover
{
background-color: rgba(100, 50, 0, 0.4);
border-radius: 5px;
border: solid white 2px;
margin: -2px;
}
.menu a:active
{
color: #fdd;
}
.menu ul
{
list-style-type: none;
margin: 0px;
padding: 0px;
text-align: center;
}
.menu li
{
display: inline;
margin: 20px;
}
I think the problem is related to the display inline of li elements.
Try to replace them with inline-block instead.
I have made a test with your fiddle and it works.
http://jsfiddle.net/notme/FA8TN/
.menu li
{
display: inline-block;
margin: 20px;
}
Here you can see the code: http://jsfiddle.net/LQSK3/1/
I can't get display: inline; working there for every li element.
Also got the problem width the line.png image, as it's height is the same as the font height, I want it to has 35px height with margin left and right set to 5px.
Where is the problem?
You need to update your style sheet. Please add this new style:
#menu {
position: relative;
clear: both;
top: -3px;
background-color: coral;
border: 1px solid black;
width: 800px;
height: 35px;
float:left;
}
li { display: inline;float:left; }
#menu ul {
position: absolute;
font-family: Century Gothic, sans-serif;
font-size: 14px;
list-style-type: none;
padding: 0;
margin: 9px 0 0 123px;
width: 649px;
height: 39px;
color: #FFF;
float:left;
}
a { font-weight: bold; color: red; text-decoration: none; }
a:hover { text-decoration: underline; }
#menu a {
background: url('http://i.imgur.com/rzNj0.png') top right no-repeat;
width: 65px;
height: 18px;
float: left;
margin: 0px 5px;
}
You need to add float: left; to menu div,ul,li and a . Also should set width and height and margin of the a tag.
Here is a working sample : http://jsfiddle.net/YjeBs/
Hope this helps :)
EDIT:
If you want your line to extend from top to bottom of the menu div you can change your styles to:
#menu {
position: relative;
clear: both;
top: -3px;
background-color: coral;
border: 1px solid black;
width: 800px;
height: 35px;
float:left;
}
li {
float: left;
height: 35px;
display:inline;
}
#menu ul {
color: #FFFFFF;
float: left;
font-family: Century Gothic,sans-serif;
font-size: 14px;
height: 35px;
list-style-type: none;
margin: 0 0 0 123px;
padding: 0;
position: absolute;
width: 649px;
}
a { font-weight: bold; color: red; text-decoration: none; }
a:hover { text-decoration: underline; }
#menu a {
background: url("http://i.imgur.com/rzNj0.png") no-repeat scroll right top transparent;
float: left;
height: 29px;
margin: 0 5px;
padding-top: 8px;
width: 65px;
}
Hope this is you want :)
just change li { diplay: inline; } with li { display: inline; } it works.
Here is my css and html
#header {
position: absolute;
left: 0;
right: 0;
top: 0;
background-image: url('/public/images/header.png');
background-repeat: repeat-x;
}
#nav {
background: transparent;
height: 2.5em;
left: -25px;
list-style: none;
margin: 1em 0 1em;
min-width: 100%;
min-height: 100%;
overflow: hidden;
padding: 60px 0 30px 0;
}
#nav a {
color: white;
display: block;
float: left;
height: 2.5em;
padding-left: 30px;
text-decoration: none;
padding-right: 30px;
text-shadow: 0.1em 0.1em #333;
}
#nav a:hover {
text-shadow: 0.1em 0.1em white;
background-color: white;
color: darkred;
padding-bottom: 5px;
text-shadow: 0.1em 0.1em lightgray;
}
#nav a:hover.active, #nav a.active {
background-color: white;
background-position: 0 -60px;
color: darkred;
text-shadow: 0.1em 0.1em lightgray;
padding-bottom: 5px;
}
#nav li {
float: left;
margin: 0 8px 0 0;
/* Spacing between tabs */;
}
#nav span {
cursor: pointer;
display: block;
float: left;
line-height: 1.5em;
padding: .5em 5px 0 0;
}
<div id="header">
<div id="navigation">
<ol id="nav">
<li><a id="overview" href="/overview"><span>Overview</span></a></li>
<li><a id="analysis" href="/overview" class="active"><span>Analysis</span></a></li>
<li><a id="dashboard" href="/dashboard"><span>My Dashboard</span></a></li>
<li><a id="preferences" href="/overview"><span>Preferences</span></a></li>
<li><a id="contact" href="/overview"><span>Contact</span></a></li>
<li><a id="logout" href="/overview"><span>Sign In</span></a></li>
</ol>
</div>
</div>
This looks fine on my screen but if I start resizing the window it makes the tabs jump around and go to the next line. I've found that on other sites with tabs this is not the case. What am I doing wrong here? Thanks.
These "other sites" probably have their <div id="header"> contained in another element, such as <div id="container">, with an explicit width set with CSS, such as width: 960px:
See: http://jsfiddle.net/mBJQN/
<div id="container">
YOUR HTML HERE
</div>
#container {
width: 960px;
position: relative
}
I added position: relative so that the position: absolute on #header will be relative to #container (see here).
There is another option here, but it's probably not the one you're after.
You can add white-space: nowrap to #header, and change from floats to display: inline-block. If this is the option you want, let me know, because it needs a little more work.
http://jsfiddle.net/mBJQN/1/