I am working on http://www.comehike.com (right now just a sandbox) and you can see that if you hover over the "hikes" nav item, the dropdowns appear to be behind the page content.
I saw a number of threads regarding similar issues, but none of those were what I needed.
Here is my css just in case:
html
{
margin-bottom:2px;
min-height:100%;
}
body
{
background-image:url('http://www.comehike.com/img/ui/grass.jpg');
}
#navigation
{
width:100%;
height:30px;
background-color:#white;
font-family:verdana,arial;
text-color:#557803;
}
#navigation ul
{
margin:0px; padding:0px;
}
#navigation ul li
{
display:inline; height:30px; float:left; list-style:none; margin-right:5px;
position:relative;
}
#navigation li a
{color:#557803; text-decoration:none;}
#navigation li a:hover
{color:#black; text-decoration:underline;}
#navigation li ul
{
margin:0px;
padding:0px;
display:none;
position:absolute;
left:0px;
top:20px;
background-color:#black;
}
#navigation li:hover ul
{
display:block;
width:160px;
}
#navigation li li
{
list-style:none;
display:list-item;
}
#navigation li li a
{color:#fff; text-decoration:none;}
#navigation li li a:hover
{color:#fff; text-decoration:underline;}
div.headerMainNav
{
color:#333333;
font-family:verdana,arial;
font-size:16px;
height:auto;
line-height:150%;
position:relative;
text-align:right;
float:right;
}
a:link
{
color:#557803;
text-decoration:none;
}
a:hover {
color:#999999;
text-decoration:none;
}
a:visited {
color:#557803;
text-decoration:none;
}
#pageBody
{
background-color:#FFFFFF;
border:2px solid #999999;
left:0;
margin-left:auto;
margin-right:auto;
padding-left:15px;
padding-right:15px;
top:5px;
width:800px;
}
#administrationHeader
{
background-color:#FFFFFF;
left:0;
margin-left:auto;
margin-right:auto;
margin-top:3px;
padding-right:5px;
text-align:right;
font-size: 9pt;
top:5px;
width:800px;
}
div.logo
{
clear:top;
clear:bottom;
left:0;
padding:0px;
position:relative;
width: 200px;
height:80px;
float:left;
}
div.mainBody
{
color:#333333;
font-family:verdana,arial;
font-size:14px;
height:auto;
line-height:150%;
position:relative;
}
div.footer
{
color:#999999;
font-family:times,serif;
font-size:10px;
padding-top:20px;
line-height:150%;
position:relative;
text-align:center;
bottom:10px;
style=clear:both;
}
I think that you need to take care of z-indexs.
Related
my website: https://www.nearestbusiness.com Nearest Business
please help me sir
I thank you in advance
```
#footer-copyright{
background:#242634;
display:block;
overflow:hidden;
width:100%;
color:#aaa;
padding:20px 0
}
#footer-copyright > .container{
margin:0 auto
}
#social-footer{
float:right
}
#social-footer .widget{
line-height:30px
}
.social-footer ul{
text-align:center;
overflow:hidden;
display:block
}
.social-footer ul li{
display:inline-block;
overflow:hidden;
margin:0 0 0 14px
}
.social-footer ul li a{
font-size:16px;
color:#aaa;
overflow:hidden;
display:block;
padding:0 3px;
transition:color .17s ease
}
.social-footer ul li:last-child a{
padding-right:0
}
.social-footer ul li a:hover{
color:$(main.color)
}
#footer-copyright .copyright-area{
float:left;
font-size:12px;
line-height:30px;
}
#footer-copyright .copyright-area a{
color:$(main.color)
}
#footer-copyright .copyright-area a:hover{
text-decoration:underline
```
I am trying to position some text/pictures using position relative, however when using relative, it creates a scroll bar eventhough the content is not over there. Is there a way to not have it do this other than overflow:hidden?
the css for the object is
body {background-image:url('../images/logo1.jpg');
background-repeat:no-repeat;
background-size: cover;
}
body {color:black;}
a, a:visited {
color:white;
text-decoration:none;
}
div#header {
font-size:280%;
float:right;
text-decoration:underline;
}
#nav {
margin:0;
padding:0;
background:#808259 url(nav_bg.jpg) 0 0 repeat-x;
width:100%;
border:1px solid #42432d;
border-width:1px 0;
position:absolute;
top:100px;
left:0px;
font-size:175%;
}
#nav li {
display:inline;
padding:0;
margin:0;
}
#nav a:link,
#nav a:visited {
color:#000;
background:#b2b580;
padding:20px 40px 4px 10px;
float:left;
width:auto;
border-right:1px solid #42432d;
text-decoration:none;
font:bold 1em/1em Arial, Helvetica, sans-serif;
text-transform:uppercase;
text-shadow: 2px 2px 2px #555;
}
#nav a:hover,
#nav a:focus {
color:#fff;
background:#727454;
}
#nav li:first-child a {
border-left:1px solid #42432d;
}
#home #nav-home a,
#about #nav-about a,
#archive #nav-archive a,
#lab #nav-lab a,
#reviews #nav-reviews a,
#contact #nav-contact a {
background:#e35a00;
color:#fff;
text-shadow:none;
}
#home #nav-home a:hover,
#about #nav-about a:hover,
#archive #nav-archive a:hover,
#lab #nav-lab a:hover,
#reviews #nav-reviews a:hover,
#contact #nav-contact a:hover {
background:#e35a00;
}
#nav a:active {
background:#e35a00;
color:#fff;
font-size:150%;
}
div.logo
img {
position:absolute;
left:0;
top:0;
}
div#support {
text-align:center;
font-size:250%;
color:#CC3300;
position:relative;
top:90px;
left:34%;
text-decoration:underline;
font-weight:bold;
}
div#photo
img{
margin-top:7%;
margin-left:30%;
}
p#follow {
position:relative;
left:50%;
top:-40px;
font-size:250%;
color:white;
text-decoration:underline;
font-weight:bold;
margin-top:5
}
div#facebook
img{
position:relative;
left:50%;
top:-40px;
}
div#sitemap {
font-size:200%;
text-decoration:underline;
font-weight:bold;
color:white;
position:relative;
left:600px;
top:-200px;
}
ul#site {
font-size:175%;
margin-top:-10%;
margin-left: 33%;
padding-left: 0;
color:white;
}
#media (min-width : 1300px)
and (max-width : 1400px) {
div#support {
text-align:center;
font-size:150%;
color:#CC3300;
position:relative;
top:90px;
left:60%;
text-decoration:underline;
font-weight:bold;
width:40%;
}
div#photo {
margin-top:3%;
height:50%;
width:50%;
}
div#sitemap {
font-size:200%;
text-decoration:underline;
font-weight:bold;
color:white;
position:relative;
left:400px;
top:-200px;
}
div#facebook
img{
position:relative;
left:50%;
top:-50px;
}
ul#site {
font-size:175%;
margin-top:-13%;
margin-left: 33%;
color:white;
}
If you are trying to position text, it likely has a 100% width (as block elements do). You may not be able to see it, but there is a good chance that by putting left: 800px; on your element, it is pushing its bounds out, past the edge of the screen.
This does not happen when using absolute positioning as it basically tells everything to ignore the space that the element takes up.
You could try making sure all of the elements you are positioning are set to either display: inline; or display: inline-block;, and/or setting a width on the element that you know will keep it contained to the width of the screen.
i have the following CSS for a navigation menu
ul#css3menu_top,ul#css3menu_top ul {
margin:0;
list-style:none;
padding:0;
}
ul#css3menu_top,ul#css3menu_top .submenu {
background-color:#EEEEEE;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
ul#css3menu_top .submenu {
visibility:hidden;
position:absolute;
left:0;
top:100%;
opacity:0;
-moz-transition:all 0.5s;
-webkit-transition:opacity 0.5s;
-o-transition:opacity 0.5s;
-moz-box-shadow:3.5px 3.5px 5px #000000;
-webkit-box-shadow:3.5px 3.5px 5px #000000;
box-shadow:3.5px 3.5px 5px #000000;
float:left;
background-color:#EEEEEE;
border-width:2px;
border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-color:#FFF;
padding:0 10px 10px;
}
ul#css3menu_top li:hover>.submenu {
visibility:visible;
opacity:1;
}
ul#css3menu_top li {
position:relative;
display:block;
white-space:nowrap;
font-size:0;
float:left;
}
ul#css3menu_top li:hover {
z-index:1;
}
ul#css3menu_top ul .submenu {
z-index:2;
position:absolute;
left:100%;
top:0;
}
ul#css3menu_top {
font-size:0;
width:100%;
z-index:999;
position:relative;
display:inline-block;
zoom:1;
padding:0 0%;
margin:0 0%;
*display:inline;
}
ul#css3menu_top .column {
float:left;
}
* html ul#css3menu_top li a{
display:inline-block;
}
ul#css3menu_top>li {
margin:0;
width:17%;
}
ul#css3menu_top li.toplast{
width:15%;
}
ul#css3menu_top a:active, ul#css3menu_top a:focus {
outline-style:none;
}
ul#css3menu_top a{
display:block;
vertical-align:middle;
text-align:left;
text-decoration:none;
font:bold 14px Calibri;
color:#EEEEEE;
text-shadow:#FFF 0 0 1px;
cursor:pointer;
padding:6px 15px 6px 3px;
background-color:#666666;
background-image:url("mainbk.png");
background-repeat:repeat;
background-position:0 0;
border-width:0 0 0 1px;
border-style:solid;
border-color:#c0c0c0;
}
ul#css3menu_top ul li {
float:none;
margin:10px 0 0;
}
ul#css3menu_top ul a {
text-align:left;
padding:4px;
background-color:#EEEEEE;
background-image:none;
border-width:0;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
font:14px Calibri;
color:#666666;
text-decoration:none;
}
ul#css3menu_top li:hover>a,ul#css3menu_top li a.pressed {
background-color:#EEEEEE;
color:#666666;
background-position:0 100px;
text-decoration:none;
}
ul#css3menu_top img {
border:none;
vertical-align:middle;
margin-right:6px;
}
ul#css3menu_top span {
display:block;
overflow:visible;
background-position:right center;
background-repeat:no-repeat;
padding-right:0px;
}
ul#css3menu_top ul span {
padding-right:8px;
}
ul#css3menu_top ul li:hover>a,ul#css3menu_top ul li a.pressed {
background-color:#EEEEEE;
background-image:none;
color:#666666;
text-decoration:none;
}
ul#css3menu_top li.topfirst>a {
padding-left: 7px;
border-width:0;
border-radius:4px 0 0 4px;
-moz-border-radius:4px 0 0 4px;
-webkit-border-radius:4px;
-webkit-border-top-right-radius:0;
-webkit-border-bottom-right-radius:0;
}
ul#css3menu_top li.toplast>a {
padding-right: 7px;
border-radius:0 4px 4px 0;
-moz-border-radius:0 4px 4px 0;
-webkit-border-radius:0;
-webkit-border-top-right-radius:4px;
-webkit-border-bottom-right-radius:4px;
}
#media only screen and (max-width:900px),only screen and (max-device-width:900px){
ul#css3menu_top>li{width:33%;}ul#css3menu_top>li:nth-child(3){width:34%}ul#css3menu_top>li:nth-child(n+4){width:33%;}ul#css3menu_top>li:nth-child(6){width:34%}}
#media only screen and (max-width:600px),only screen and (max-device-width:600px){
ul#css3menu_top>li{width:50%;}ul#css3menu_top>li:nth-child(n+3){width:50%;}ul#css3menu_top>li:nth-child(n+5){width:50%;}}
#media only screen and (max-width:450px),only screen and (max-device-width:450px){
ul#css3menu_top>li{width:100%;}ul#css3menu_top>li:nth-child(n+2){width:100%;}ul#css3menu_top>li:nth-child(n+3){width:100%;}ul#css3menu_top>li:nth-child(n+4){width:100%;}ul#css3menu_top>li:nth-child(n+6){width:100%;}}
/*opera hack*/
#media only screen and (min-width:900px){
html>/**/body noindex:-o-prefocus, html>/**/body ul#css3menu_top{
display:table;
}
html>/**/body noindex:-o-prefocus, html>/**/body ul#css3menu_top>li{
width:auto;
float:none;
display:table-cell;
}
html>/**/body noindex:-o-prefocus, html>/**/body ul#css3menu_top li.toplast{
width:auto;
display:table-cell;
}
}
i cannot work out how to make the text colour change when i hover over it on the sub menu
here is a fiddle of it working
http://jsfiddle.net/n3FAq/
any one got any ideas?
Try this
ul#css3menu_top ul li a:hover {
color: #c00;
}
DEMO
You don't have a hover rule for links in the submenu.
ul#css3menu_top .submenu a:hover {
color: red;
}
JSFiddle
Here it is:
http://gyazo.com/e94edf3c9b10bc33c2d9be8ed049583e
As you can see, the submenu works, and when I hover over something on the submenu, it creates a grey background. The problem is, once I get under "Sports Edition", the hover basically cancels and closes the submenu. It stops right where that blue line begins.
Here is the code:
HTML:
<div id="toprightunder">
<ul>
<li>
Content options
<ul>
<li>Default Homepage</li>
<li>News Edition li>
<li>Entertainment Edition</li>
<li>Sports Edition</li>
<li>Latino Edition</li>
</ul>
</li>
</ul>
</div>
CSS: (there is a lot because I was testing a lot)
#toprightunder {
margin-top:18px;
height:15px;
position:absolute;
width:200px;
right:0;
}
#toprightunder a {
text-decoration:none;
color:rgb(100, 100, 100);
margin-left:0;
padding-bottom:3px;
}
#toprightunder ul {
list-style:none;
margin:0 auto;
/*text-align:right;*/
position:relative;
display:inline-table;
margin-left:0;
padding-left:0;
}
#toprightunder ul li {
display:inline;
color:rgb(100, 100, 100);
font-family:"arial", times, sans-serif;
font-size:10px;
margin-top:13px;
text-decoration:none;
margin-left:0;
padding-left:0;
}
#toprightunder ul ul {
display:none;
}
#toprightunder ul li:hover > ul {
display:block;
}
#toprightunder ul ul {
position: absolute;
top: 100%;
padding-top:2px;
padding-bottom:7px;
margin-right:0;
right:0px;
background: white;
border: 1px solid #000;
overflow:hidden;
height:auto;
margin:auto;
}
#toprightunder ul ul li {
position:relative;
color:rgb(100, 100, 100);
font-size:13px;
display:block;
/*margin-bottom:10px;
padding-left:25px;
padding-right:4px;*/
white-space:nowrap;
height:auto;
margin:auto;
}
#toprightunder ul ul li a {
color:#fff;
text-align:left;
float:left;
margin-right:0;
position:relative;
}
#toprightunder a:hover {
background-color:transparent;
color:rgb(100, 100, 100);
}
#toprightunder ul li:hover > li {
background-color:transparent;
}
#toprightunder ul ul li:hover > a {
color:rgb(50, 50, 50);
background:rgb(240, 240, 240);
}
#toprightunder ul ul li > a {
color:rgb(100, 100, 100);
padding-bottom:7px;
padding-top:2px;
padding-left:25px;
width:100%;
}
#headbar a {
text-decoration:none;
color:white;
padding-bottom:2px;
padding-top:4px;
padding-left:8px;
padding-right:8px;
}
#headbar ul ul {
display:none;
}
#headbar ul li:hover > ul {
display:block;
color:green;
}
#headbar ul {
text-decoration:none;
list-style:none;
margin-top:1px;
padding:0;
position:relative;
}
#headbar ul li {
display:inline;
color: white;
padding-bottom:2px;
padding-top:3px;
font-family:"arial", times, sans-serif;
font-size:12px;
}
#headbar ul ul {
border-radius: 0px;
position: absolute;
top: 100%;
padding-top:6px;
}
#headbar ul ul li {
float:none;
position:relative;
color:rgb(100,100,100);
font-size:16px;
}
#headbar ul ul li a {
color:#fff;
}
#headbar ul ul li a:hover {
}
/*#headbar ul:after {
content: "";
clear:both;
display:block;*/
#headbar a:hover {
background-color:rgb(255,255,255);
color:rgb(100,100,100);
}
#headbar ul li:hover > a{
color:rgb(50,50,50);
background-color:transparent;
padding-top:8px;
}
#headbar ul ul li > a {
color:rgb(100,100,100);
padding-top:8px;
}
#headbar {
width: 100%;
height: 20px;
background-color: rgb(30,144,255);
text-decoration:none;
padding-top:129px;
text-align: left;
/*position:relative;*/
}
Add z-index: 2; to the #toprightunder selector and that should resolve your problem.
#toprightunder {
margin-top:18px;
height:15px;
position:absolute;
width:200px;
right:0;
z-index: 2;
}
I am using a horizontal menu from cssmenumaker.com which features subitems. I've been trying, but I just don't manage to add subsub-items.
This is the CSS I'm using:
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
#menu {
position:absolute;
left:250px;
top:0px;
width:750px;
height:35px;
border:0px solid #123456;
}
.menu ul{
background:#000000;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#000000 url("images/seperator.gif") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover,
.menu ul li:hover a{
background: #2580a2 url("images/hover.gif") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:125px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
background:url('images/sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:125px;
}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover,
.menu li ul li:hover a{
background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}
I already added the subsubmenu's to the HTML (which, I believe, is done correctly):
<div id="menu" class="menu">
<ul>
<li><a href="#" >item1</a></li>
<li>item2</li>
<li>item3
<ul>
<li>subitem1</li>
<li>subitem2</li>
<li>subitem3
<ul>
<li>subsubitem1</li>
<li>subsubitem2</li>
</ul>
</li>
<li>subitem4</li>
<li>subitem5</li>
</ul>
</li>
<li>item4</li>
<li>item5</li>
</ul>
Here's the current situation: http://bit.ly/GRJkT5
As you can see, subsubitems 1 and 2 are displayed on top of subitems 4 and 5. How should I edit the CSS?
Thanks in advance!
Frank.
You should consider making use of the > combinator.
Example:
/* instead of... */
.menu li:hover ul{
display:block;
}
/* use... */
.menu li:hover > ul{
display:block;
}
This will ensure that only direct children of the hovered element will be affected by the style.
Use this combinator in the right places, and your problem should be solved.
Your third level submenu is not really getting positioned absolutely so its just appearing over your second level submenu. Properly position it relative to your submenu, use the child selector to display your second level submenu as Kolink suggested and it should work, like so:
CSS
.menu li:hover > ul{
display:block;
}
.menu li {
position:relative;
}
.menu ul ul ul {
position:absolute;
left:100%;
top:0;
}
Ok, small baby-steps here. I added coding for the subsubmenu's (I will condense the code later):
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
#menu {
position:absolute;
left:250px;
top:0px;
width:750px;
height:35px;
border:0px solid #123456;
}
.menu ul{
background:#000000;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#000000 url("images/seperator.gif") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #2580a2 url("images/hover.gif") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
/* --- START SUBMENU -------------------------------------------------------------- */
.menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:0px;*/
/*left:0px;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
background:url('images/sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}
/* --- START SUBSUBMENU -------------------------------------------------------------- */
.menu li ul li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:0px;*/
/*left:0px;*/
}
.menu lu ul li:hover ul{
display:block;
}
.menu li li li {
background:url('images/sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li li a{
background:none;
}
.menu li ul li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul li ul a:hover, .menu li ul li ul li:hover a{
background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
The result is here: http://bit.ly/Hl9SwM
The subsubmenu's (2.4.1 etc.) are displayed directly when hovering over menu 2, and their location is not correct (should be to the right of submenu 2.4). How can I change that?
Thank you!