Related
The problem is that my hovering works on all buttons, but I don't want it like that. What I want is to have, for example, two buttons which don't need to hover, so they are able to transfer you to another page, and another button which will hover like they are now.
CSS:
#wrapper {
width:173px;
margin: 0 3px 0 0;
display: inline-block;
/* width: 220px;
margin: 100px auto;
font-size: 0.8125em;*/
}
.menu {
width: auto;
height: auto;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
-moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
}
.menu > li > a {
background-color: #616975;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(114, 122, 134)),to(rgb(80, 88, 100)));
background-image: -webkit-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
background-image: -moz-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
background-image: -o-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
background-image: -ms-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
background-image: linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#727a86', EndColorStr='#505864');
border-bottom: 1px solid #33373d;
-webkit-box-shadow: inset 0px 1px 0px 0px #878e98;
-moz-box-shadow: inset 0px 1px 0px 0px #878e98;
box-shadow: inset 0px 1px 0px 0px #878e98;
width: 100%;
height: 2.75em;
line-height: 2.75em;
display: block;
position: relative;
font-weight: 600;
color: #fff;
text-shadow: 0px 1px 0px rgba(0,0,0,.5);
}
.menu ul li a {
background: #fff;
border-bottom: 1px solid #efeff0;
width: 100%;
height: 2.75em;
line-height: 2.75em;
display: block;
position: relative;
font-size: 0.923em;
font-weight: 400;
color: #878d95;
}
.menu ul li:last-child a {
border-bottom: 1px solid #33373d;
}
.menu > li hr > a:hover,
.menu > li > a.active {
background-color: #35afe3;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(69, 199, 235)),to(rgb(38, 152, 219)));
background-image: -webkit-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
background-image: -moz-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
background-image: -o-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
background-image: -ms-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
background-image: linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#45c7eb', EndColorStr='#2698db');
border-bottom: 1px solid #103c56;
-webkit-box-shadow: inset 0px 1px 0px 0px #6ad2ef;
-moz-box-shadow: inset 0px 1px 0px 0px #6ad2ef;
box-shadow: inset 0px 1px 0px 0px #6ad2ef;
}
.menu > li > a.active {
border-bottom: 1px solid #1a638f;
}
.menu > li > a:before {
content: '';
background-image: url(../images/sprite.png);
background-repeat: no-repeat;
font-size: 36px;
height: 1em;
width: 1em;
position: absolute;
left: 0;
top: 50%;
margin: -.5em 0 0 0;
}
.item1 > a:before {
background-position: 0 0;
}
.item2 > a:before {
background-position: -38px 0;
}
.item3 > a:before {
background-position: 0 -38px;
}
.item4 > a:before {
background-position: -38px -38px;
}
.item5 > a:before {
background-position: -76px 0;
}
.item6 > a:before {
background-position: -76px -76px;
}
.item7 > a:before {
background-position: -114px 0;
}
.item8 > a:before {
background-position: -114px -114px;
}
.item9 > a:before {
background-position: -152px 0;
}
.item10 > a:before {
background-position: -152px -152px;
}
.item11 > a:before {
background-position: -190px 0;
}
.item12 > a:before {
background-position: -190px -190px;
}
.menu > li > a span {
font-size: 0.857em;
display: inline-block;
position: absolute;
right: 1em;
top: 50%;
background: #48515c;
line-height: 1em;
height: 1em;
padding: .4em .6em;
margin: -.8em 0 0 0;
color: #fff;
text-indent: 0;
text-align: center;
-webkit-border-radius: .769em;
-moz-border-radius: .769em;
border-radius: .769em;
-webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
-moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
text-shadow: 0px 1px 0px rgba(0,0,0,.5);
font-weight: 500;
}
.menu > li > a:hover span, .menu > li a.active span {
background: #2173a1;
}
.menu > li > ul li a:before{
content: '?';
font-size: 8px;
color: #bcbcbf;
position: absolute;
width: 1em;
height: 1em;
top: 0;
left: -2.7em;
}
.menu > li > ul li:hover a,
.menu > li > ul li:hover a span,
.menu > li > ul li:hover a:before {
color: #32373D;
}
.menu ul > li > a span {
font-size: 0.857em;
display: inline-block;
position: absolute;
right: 1em;
top: 50%; /
background: #fff;
border: 1px solid #d0d0d3;
line-height: 1em;
height: 1em;
padding: .4em .7em;
margin: -.9em 0 0 0;
color: #878d95;
text-indent: 0;
text-align: center;
-webkit-border-radius: .769em;
-moz-border-radius: 769em;
border-radius: 769em;
text-shadow: 0px 0px 0px rgba(255,255,255,.01));
}
HTML:
<div id="wrapper">
<ul class="menu">
<li class="item1">{$lm_overview}
</li>
<ul>
<li class="item2">{$lm_chat} <span>{$chatusers}</span>
</li>
</ul>
<li class="item3">{$lm_research}
<ul>
<li class="subitem1">Cute Kittens </li>
<li class="subitem2">Strange "Stuff" </li>
<li class="subitem3">Automatic Fails </li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
$(function() {
var menu_ul = $('.menu > li > ul'),
menu_a = $('.menu > li > a');
menu_ul.hide();
menu_a.click(function(e) {
e.preventDefault();
if(!$(this).hasClass('active')) {
menu_a.removeClass('active');
menu_ul.filter(':visible').slideUp('normal');
$(this).addClass('active').next().stop(true,true).slideDown('normal');
} else {
$(this).removeClass('active');
$(this).next().stop(true,true).slideUp('normal');
}
});
});
</script>
Image Link
The Overview button and the Chat button should be normal buttons with a design like the others but they shouldn't hover, and also they should immediately transfer you to another page. The other buttons work as I want them to. And my problem is that when I click on the Overview button it wont transfer me anywhere, because it still makes it to hover when I click on it.
As per my understanding of you question. You want Overview and Chat button to work as normal anchor tags and redirect to the URL given in href but Research button should work as it is. Well the main problem is in your code for the menu->li->anchor click, you are preventing the default click behaviour e.preventDefault(). Which will not allow anchor tag to redirect to the url in href (the default behaviour). See the code below, you just need to remove e.preventDefault(), so that anchor tag can redirect to the URL and anyway Research button and other similar will have # in href so they will not redirect to any URL.
menu_a.click(function(e) {
if(!$(this).hasClass('active')) {
menu_a.removeClass('active');
menu_ul.filter(':visible').slideUp('normal');
$(this).addClass('active').next().stop(true,true).slideDown('normal');
} else {
$(this).removeClass('active');
$(this).next().stop(true,true).slideUp('normal');
}
});
Here is the updated jsfiddle http://jsfiddle.net/VRBwm/1/
Hope this helps, tell me if something else is required.
I want to position my navigation inline, but without space between the buttons. You can suggest some tip how to position them in the middle of the page as well. I have tried with margin:0, padding-left:0px but there are still space between them. Here is the html code:
<div id="nav">
<nav role="navigation">
<ul>
<li><a href="./" class="button" title="Go to the home page"</title>Home</a></li>
<li>About</li>
<li>Contact</li>
</ul></nav></div>
And CSS style:
.button{
color: rgb(0, 0, 0);
font-size: 15px;
padding: 11px;
text-shadow: 0px 2px 2px rgba(144,150,150,0.75);
background: rgb(255, 255, 248);
background: -moz-linear-gradient(90deg, rgb(255, 255, 248) 69%, rgb(56, 2, 137) 92%);
background: -webkit-linear-gradient(90deg, rgb(255, 255, 248) 69%, rgb(56, 2, 137) 92%);
background: -o-linear-gradient(90deg, rgb(255, 255, 248) 69%, rgb(56, 2, 137) 92%);
background: -ms-linear-gradient(90deg, rgb(255, 255, 248) 69%, rgb(56, 2, 137) 92%);
background: linear-gradient(0deg, rgb(255, 255, 248) 69%, rgb(56, 2, 137) 92%);
-webkit-box-shadow: 0px 2px 1px rgba(50, 50, 50, 0.73);
-moz-box-shadow: 0px 2px 1px rgba(50, 50, 50, 0.73);
box-shadow: 0px 2px 1px rgba(50, 50, 50, 0.73);
}
#nav li{
display:inline;
}
#nav ul{
list-style-type:none;
margin:0;
}
#nav ul li a{text-decoration:none;
font:Tahoma, Helvetica, Arial, sans-serif;
letter-spacing:0.1em;
}
First to center your nav into the middle of the screen use bellow.
#nav{
width:960px; -- change me to correct size
margin-right:auto;
margin-left:auto;
height:110px; -- change me!
}
As for list this will take list and line it up from left to right. The only gap between links should be the little padding so it doesn't look on top of each other.
#nav ul {
display: inline;
list-style: none outside none;
margin: 0;
padding: 0;
}
#nav li {
display: inline;
font-size: 11px;
padding-right: 2px;
padding-left: 2px;
width: 100px; -- this depends on the number of buttons you have of course.
}
Hope this helps!
On your #nav li, use display: block and float: left instead, like this:
#nav li {
display: block;
float: left;
}
See DEMO.
if you want to display it inline without and blank space, try to use letter-spacing or word-spacing with negative value
I am using some code that I found for a drop down menu. It works perfect in Firefox and Chrome but not in IE. In IE, the sub menu items are shifted over to the right instead of appearing directly below the main menu items. (Using my code as an example, the "Level 2.1," "Level 2.2," etc are not directly under "Two Levels" when I hover. They are shifted right.
I have been trying to fix this for 2 days. I'm not great with the coding so even though I have done lots of researh for a solution, I do not understand and can't quite get it right. I'm hoping someone can help me or else I'm just going to give up.
I'd like to leave the doctype and meta tag as is.
My doctype is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
And I have meta tag:
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
And here is the CSS:
#nav {
float: left;
font: bold 12px Arial, Helvetica, Sans-serif;
border: 1px solid #121314;
border-top: 1px solid #2b2e30;
overflow: hidden;
width: 100%;
background: #3C4042;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
}
#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
#nav ul li {
float: left;
}
#nav ul li a {
float: left;
color: #d4d4d4;
padding: 10px 20px;
text-decoration: none;
background: #3C4042;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
border-left: 1px solid rgba(255, 255, 255, 0.05);
border-right: 1px solid rgba(0,0,0,0.2);
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}
/* Drop Down Menu By helperblogger.com */
#nav ul li a:hover,
#nav ul li:hover > a {
color: #252525;
background: #3C4042;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
background: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
background: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;
}
#nav li ul a:hover,
#nav ul li li:hover > a {
color: #2c2c2c;
background: #5C9ACD;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205)) );
background: -moz-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
background: -o-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
border-bottom: 1px solid rgba(0,0,0,0.6);
border-top: 1px solid #7BAED9;
text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}
/* Drop Down Menu By helperblogger.com */
#nav li ul {
background: #3C4042;
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
left: -999em;
margin: 35px 0 0;
position: absolute;
width: 160px;
z-index: 9999;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
border: 1px solid rgba(0, 0, 0, 0.5);
}
#nav li:hover ul {
left: auto;
}
#nav li ul a {
background: none;
border: 0 none;
margin-right: 0;
width: 120px;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
}
.nav ul li ul {
position: absolute;
left: 0;
display: none;
visibility: hidden;
}
.nav ul li ul li {
display: list-item;
float: none;
}
.nav ul li ul li ul {
top: 0;
}
.nav ul li ul li a {
font: normal 13px Verdana;
width: 160px;
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}
#nav li li ul {
margin: -1px 0 0 160px;
visibility: hidden;
}
#nav li li:hover ul {
visibility: visible;
}
And here is the html:
<div id="nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Our Portfolio</li>
<li>One Dropdown</li>
<li>Two Levels
<ul>
<li>Level 2.1</li>
<li>Level 2.2</li>
<li>Level 2.3</li>
<li>Level 2.4</li>
<li>Level 2.5</li>
</ul>
</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</div>
Any help would be GREATLY appreciated. Thank you.
make following changes in your css
#nav {
float: left;
font: bold 12px Arial, Helvetica, Sans-serif;
border: 1px solid #121314;
border-top: 1px solid #2b2e30;
overflow: hidden;
width: 100%;
background: #3C4042;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
*height:34px; //IE7 Hack
}
#nav li ul {
background: #3C4042;
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
left: -999em;
margin: 35px 0 0;
position: absolute;
*position:relative;//DD menu will start after </a> IE7
width: 160px;
z-index: 9999;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
border: 1px solid rgba(0, 0, 0, 0.5);
}
simple fix:
#nav ul li {
position: relative;
float: left;
}
#nav li:hover ul {
left: 0;
}
demo: http://jsfiddle.net/faywk/2/
Well, after spending 5 days straight on this, not getting it to work, and hours of research, I finally found a great tutorial that explains how to create a css drop down menu and it works correctly for all browsers, including IE 7,8, and 9. So I used that code and modified it to suit my preferences.
Thank you #Prasad and #Xiaoyi for your help.
In case this may be helpful to others (probably only beginners like me) here is the link. There was one small fix to include a z-index so make sure you read through all the comments if your menu drop downs are covered by other elements. I would never ever want anyone to go through what I went through. http://designmodo.com/css3-dropdown-menu/
I have a drop down menu, but when i click drop down it pushed my contents down as well.
I would like my menu to slide over the context part of my web page. Could some one please show me how i can set this?
CSS
body {
font-size: 100%;
background:#32373d;
}
a {
text-decoration: none;
}
ul, ul ul {
margin: 0;
padding: 0;
list-style: none;
}
#wrapper {
width: 220px;
margin: 100px auto;
font-size: 0.8125em;
}
.menu {
width: 225px;
height: auto;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
-moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
}
.menu > li > a {
background-color: #616975;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(114, 122, 134)),to(rgb(80, 88, 100)));
background-image: -webkit-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
background-image: -moz-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
background-image: -o-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
background-image: -ms-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
background-image: linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#727a86', EndColorStr='#505864');
border-bottom: 1px solid #33373d;
-webkit-box-shadow: inset 0px 1px 0px 0px #878e98;
-moz-box-shadow: inset 0px 1px 0px 0px #878e98;
box-shadow: inset 0px 1px 0px 0px #878e98;
width: 100%;
height: 2.75em;
line-height: 2.75em;
text-indent: 2.75em;
display: block;
position: relative;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 600;
color: #fff;
text-shadow: 0px 1px 0px rgba(0,0,0,.5);
}
.menu ul li a {
background: #fff;
border-bottom: 1px solid #efeff0;
width: 100%;
height: 2.75em;
line-height: 2.75em;
text-indent: 2.75em;
display: block;
position: relative;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 0.923em;
font-weight: 400;
color: #878d95;
}
.menu ul li:last-child a {
border-bottom: 1px solid #33373d;
}
.menu > li > a:hover, .menu > li > a.active {
background-color: #35afe3;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(69, 199, 235)),to(rgb(38, 152, 219)));
background-image: -webkit-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
background-image: -moz-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
background-image: -o-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
background-image: -ms-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
background-image: linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#45c7eb', EndColorStr='#2698db');
border-bottom: 1px solid #103c56;
-webkit-box-shadow: inset 0px 1px 0px 0px #6ad2ef;
-moz-box-shadow: inset 0px 1px 0px 0px #6ad2ef;
box-shadow: inset 0px 1px 0px 0px #6ad2ef;
}
.menu > li > a.active {
border-bottom: 1px solid #1a638f;
}
.menu > li > a:before {
content: '';
background-image: url(../images/sprite.png);
background-repeat: no-repeat;
font-size: 36px;
height: 1em;
width: 1em;
position: absolute;
left: 0;
top: 50%;
margin: -.5em 0 0 0;
}
.item1 > a:before {
background-position: 0 0;
}
.item2 > a:before {
background-position: -38px 0;
}
.item3 > a:before {
background-position: 0 -38px;
}
.item4 > a:before {
background-position: -38px -38px;
}
.item5 > a:before {
background-position: -76px 0;
}
.menu > li > a span {
font-size: 0.857em;
display: inline-block;
position: absolute;
right: 1em;
top: 50%;
background: #48515c;
line-height: 1em;
height: 1em;
padding: .4em .6em;
margin: -.8em 0 0 0;
color: #fff;
text-indent: 0;
text-align: center;
-webkit-border-radius: .769em;
-moz-border-radius: .769em;
border-radius: .769em;
-webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
-moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
text-shadow: 0px 1px 0px rgba(0,0,0,.5);
font-weight: 500;
}
.menu > li > a:hover span, .menu > li a.active span {
background: #2173a1;
}
.menu > li > ul li a:before{
content: '▶';
font-size: 8px;
color: #bcbcbf;
position: absolute;
width: 1em;
height: 1em;
top: 0;
left: -2.7em;
}
.menu > li > ul li:hover a,
.menu > li > ul li:hover a span,
.menu > li > ul li:hover a:before {
color: #32373D;
}
.menu ul > li > a span {
font-size: 0.857em;
display: inline-block;
position: absolute;
right: 1em;
top: 50%; /
background: #fff;
border: 1px solid #d0d0d3;
line-height: 1em;
height: 1em;
padding: .4em .7em;
margin: -.9em 0 0 0;
color: #878d95;
text-indent: 0;
text-align: center;
-webkit-border-radius: .769em;
-moz-border-radius: 769em;
border-radius: 769em;
text-shadow: 0px 0px 0px rgba(255,255,255,.01));
}
Html
<link rel="stylesheet" type="text/css" href="../../Content/Menu.css" />
<div class="float-right">
<nav>
<ul class="menuMain" style="float: left;">
<li class="item1">Home
<ul style="display: block; ">
<li class="subitem1"><a class="active" href="/DashBoard">DashBoard</a></li>
<li class="subitem2">Contact</li>
<li class="subitem3">About</li>
</ul>
</li>
<li class="item2">Functions
<ul style="display: block; ">
<li class="subitem1">Download</li>
<li class="subitem2">Valuation</li>
</ul>
</li>
<li class="item3">Admin
<ul style="display: block; ">
<li class="subitem1">Admin</li>
</ul>
<li>
<li class="item4">Logout
<ul style="display: block; ">
<li class="subitem1">Logout</li>
</ul>
<li>
</ul>
</nav>
</div>
The dropdown menu should be using position: absolute for positioning.
For reference, use this: http://www.htmldog.com/articles/suckerfish/dropdowns/
I actually posted a question about this a few days ago and managed to solve it, CSS dropdown nav causing html content to move
Hopefully this will be of used to you, my problem was solved by adding z-index:1000 to the submenu ul's css
When the content of the site is bigger then the window (no matter how high you make the window, this rule applies). This is very unwanted behavior because it looks like ##!*...
I'm quite new to webdesign so I probably really made some big mistakes in my css.. Here is the css file, hope someone can point it out.. (probably using height: 100% was bad, but don't know what else to do =/.
And I know for content and stuff absolute is REALLY bad.
This is what the 'bug' looks like, at the bottom when the content is larger then the window:
http://i49.tinypic.com/1zqa9th.png
Here is a html skeleton:
<!DOCTYPE html>
<html>
<head>
<?php
$title_tags = "TITLE HERE";
$meta_description = "";
include('generalhead.php'); ?>
</head>
<body>
<div class="wrapper">
<div class="sidebar">
<div class = "wrap1">
<img src="media/images/blub.png" class="blub"><br>
<div class="cloud">
<img src="media/images/dots.gif">
<img class="cloud_text" src="media/images/cloud.png">
<img src="media/images/dots.gif">
</div>
<div class="menu">
<ul id="nav" class="navig">
<h3 class="big_link">home</h3>
<h3 class="big_link">contact</h3>
<h3>Algemene dakwerken</h3>
<li>Epdm</li>
<li>pannen</li>
<li>zink</li>
<li>koper</li>
<li>dakconstructie</li>
<li>velux steken</li>
<li>uitbekleden oversteking</li>
<h3>binnenhuisinrichting</h3>
<li>ramen en deuren</li>
<li>gyproc</li>
<li>muren en plafonds</li>
</ul>
</div>
</div>
</div>
</div>
<div class="content">
<div class="content-top">
<div class="content-head">
blub
</div>
<div class="content-body">
CONTENT TEXT COMES HERE, BELLOW THIS ARE THE CONTENT PICTURES
</div>
<div class="content-pictures">
<!-- Slider-->
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<?php
$directory_name = "index";
include ("generate_photo_content.php");
?>
</div>
</div>
</div>
</div>
</div>
</div>
<?php include ('bottomscripts.php'); ?>
</body>
</html>
CSS HERE
body{
/* FALLBACK KLEUR ALS GRADIENT NIET WERKT*/
background-color: #1b1000;
height: 100%;
font-size: 100%
}
/*ROND ALLES EN ZORGT VOOR GRADIENT OP BACKGROUND*/
.wrapper{
display:block;
/*set the div in the top-left corner of the screen*/
position:absolute;
top:0;
left:0;
/*set the width and height to 100% of the screen*/
width: 100%;
height:100%;
/* IE10 Consumer Preview */
background-image: -ms-radial-gradient(left center, circle farthest-side, #4D2D0F 0%, #1B1000 50%, #1B1000 100%);
/* Mozilla Firefox */
background-image: -moz-radial-gradient(left center, circle farthest-side, #4D2D0F 0%, #1B1000 50%, #1B1000 100%);
/* Opera */
background-image: -o-radial-gradient(left center, circle farthest-side, #4D2D0F 0%, #1B1000 50%, #1B1000 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(radial, left center, 0, left center, 973, color-stop(0, #4D2D0F), color-stop(0.5, #1B1000), color-stop(1, #1B1000));
/* Webkit (Chrome 11+) */
background-image: -webkit-radial-gradient(left center, circle farthest-side, #4D2D0F 0%, #1B1000 50%, #1B1000 100%);
/* W3C Markup, IE10 Release Preview */
background-image: radial-gradient(circle farthest-side at left center, #4D2D0F 0%, #1B1000 50%, #1B1000 100%);
}
.sidebar {
z-index: 999;
background-color: #ffcc00;
/*background-image: url(../images/bar-8.png);*/
background-repeat: no-repeat;
background-image: url(../images/bar.jpg);
background-repeat:repeat-y;
-moz-box-shadow: 5px 0px 6px #000000;
-webkit-box-shadow: 5px 0px 6px #000000;
box-shadow: 5px 0px 6px #000000;
width: 200px;
height: 100%;
float: left;
}
.wrap1{
position: relative;
top:15px;
}
.logo{
position: absolute;
top: 0;
left: 4px;
}
.blub{
position: relative;
float:left;
width: 100%;
margin: 0 0 10px 0;
}
.cloud{
position: relative;
float: left;
width: 100%
}
.cloud_text{
margin: 0 0 0 0;
}
.menu{
line-height: 1;
margin: 0 0 0 10px;
position: relative;
float: left;
width: 100%
}
a {
text-decoration: none;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.menu {
width: 200px;
margin: 10px auto;
font-size: 0.8125em;
text-transform: uppercase;
}
.navig{
width: auto;
height: auto;
}
.navig > li > a{
border-bottom: 1px solid #c68f00;
width: 100%;
height: 1.5em;
font-size: 0.8em;
line-height: 1.5em;
text-indent: 16px;
display: block;
position: relative;
font-family: "Helvetica Neue", Helvetica, Areal, sans-serif;
font-weight: 600;
color: #603913;
text-shadow: 0px 1px 0px rgba(0,0,0,0.5);
-webkit-transition: all 1s linear;
}
.navig > h3{
margin: 0 0 0 0;
border-bottom: 2px solid #c68f00;
width: 100%;
height: 2.25em;
line-height: 2.75em;
text-indent: 10px;
display: block;
position: relative;
font-family: "Helvetica Neue", Helvetica, Areal, sans-serif;
font-weight: 600;
color: #603913;
text-shadow: 0px 1px 0px rgba(0,0,0,0.5);
}
.navig > li > a:hover,
.navig > li > a:active{
background-color: #fdda01;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(252, 219, 0)),to(rgb(255,204,0)));
background-image: -webkit-linear-gradient(top, rgb(252, 219, 0), rgb(255,204,0));
background-image: -moz-linear-gradient(top, rgb(252, 219, 0), rgb(255,204,0));
background-image: -o-linear-gradient(top, rgb(252, 219, 0), rgb(255,204,0));
background-image: -ms-linear-gradient(top, rgb(252, 219, 0), rgb(255,204,0));
background-image: linear-gradient(top, rgb(252, 219, 0), rgb(255,204,0));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#45c7eb', EndColorStr='#2698db');
border-bottom: 1px solid #886304;
}
.big_link > a {
margin: 0 0 0 0;
border-bottom: 2px solid #c68f00;
width: 100%;
height: 2.25em;
line-height: 2.75em;
text-indent: 10px;
display: block;
position: relative;
color: #603913;
text-shadow: 0px 1px 0px rgba(0,0,0,0.5);
}
.big_link> a:active,
.big_link > a:hover{
background-color: #fdda01;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(252, 219, 0)),to(rgb(255,204,0)));
background-image: -webkit-linear-gradient(top, rgb(252, 219, 0), rgb(255,204,0));
background-image: -moz-linear-gradient(top, rgb(252, 219, 0), rgb(255,204,0));
background-image: -o-linear-gradient(top, rgb(252, 219, 0), rgb(255,204,0));
background-image: -ms-linear-gradient(top, rgb(252, 219, 0), rgb(255,204,0));
background-image: linear-gradient(top, rgb(252, 219, 0), rgb(255,204,0));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#45c7eb', EndColorStr='#2698db');
border-bottom: 2px solid #886304;
}
.selected{
background-color: #fdda01;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(252, 219, 0)),to(rgb(255,204,0)));
background-image: -webkit-linear-gradient(top, rgb(252, 219, 0), rgb(255,204,0));
background-image: -moz-linear-gradient(top, rgb(252, 219, 0), rgb(255,204,0));
background-image: -o-linear-gradient(top, rgb(252, 219, 0), rgb(255,204,0));
background-image: -ms-linear-gradient(top, rgb(252, 219, 0), rgb(255,204,0));
background-image: linear-gradient(top, rgb(252, 219, 0), rgb(255,204,0));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#45c7eb', EndColorStr='#2698db');
border-bottom: 1px solid #886304;
}
Short answer:
Here's your current HTML markup and CSS definitions with the ending result as requested:
See this working Fiddle Example!
Long Answer
Your current code as presented on the question contains several markup issues:
Child elements of an unordered list (UL):
See the W3C - Lists in HTML documents
<ul/> element can only have <li/> as a child. Currently you're placing <h3/> mixed with <li/> elements.
Closing tags for the <div/> element:
You're using 12 opening tags.
You're using 13 closing tags.
Loose one closing div declaration after your ul to have the markup working as expected.
Regarding your sidebar height issue
I've tried to work with the code you've provided, but the structure is to messy to achieve your goal with a plain CSS solution.
So I went the other way around, prepared the desired structure to have your contents applied to it. The markup on this Fiddle Example solves your issue.
HTML MARKUP the basic layout
<div class="wrapper">
<div class="sidebar">
<ul>
<li>Sidebar stuff.</li>
</ul>
</div>
<div class="content">
CONTENT TEXT COMES HERE, BELLOW THIS ARE THE CONTENT PICTURES
</div>
<div class="clear"></div>
</div>
CSS the basics to prepare the layout
* {
margin: 0;
padding: 0;
}
.clear { clear: both; }
.wrapper {
position: relative;
}
.sidebar {
width: 200px;
float: left;
background-color: #ffcc00;
position: absolute;
top: 0;
left: 0;
bottom: 0;
}
.content {
margin-left: 200px;
}
All you have to do is to apply this markup and fill it with your contents.