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
Related
I have a code:
button {
background: rgb(1, 81, 227);
background: linear-gradient(
90deg,
rgba(1, 81, 227, 1) 35%,
rgba(0, 90, 255, 1) 100%
);
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 4px 2px;
cursor: pointer;
border-radius: 6px;
}
And a ton of buttons. I want to apply that css code for all buttons except two, with the IDs startAction & endAction.
How do I do that?
button:not(#startAction):not(#endAction)
by #underscore_d
Your startAction and endAction buttons probably share some of those styles.
If so, just keep those shared lines within the generic button declaration and move the other stuff into a new style and then apply that to the rest of the buttons.
Something like...
button {
display: inline-block;
border: none;
color: white;
...
}
.fancybutton {
background: rgb(1, 81, 227);
background: linear-gradient(
90deg,
rgba(1, 81, 227, 1) 35%,
rgba(0, 90, 255, 1) 100%
);
margin: 4px 2px;
...
}
I'm trying to center the text in each header of the drop-down menu while having the text in the actual "drop-down" portion of the menu aligned to the left.
I've got the drop-down portion aligned how I wanted, but I can't seem to get the headers to align.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Clothing Selector</title></head>
<link rel="stylesheet" type="text/css"href="main.css" />
<body background="Pictures/background.png">
<h2 id="home_subhead">Keep Track Of Your Clothes :-)</h2>
<video id="band_shirts_banner" width="20%" autoplay loop>
<source src="band_shirts_banner.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<div id="menu">
<ul class="menu" align="center">
<li><a>Shirts</a>
<ul>
<li>Band Shirts</li>
<li>Sleeping Shirts</li>
<li>Trash Shirts</li>
</ul>
</li>
<li><a>Pants</a>
<ul>
<li>Royal Bones</li>
<li>Rude</li>
</ul>
</li>
<li><a>Shoes</a>
<ul>
<li>Converse</li>
<li>Boots</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
CSS Code:
ul, ul ul {
margin: 0;
padding: 0;
list-style: none;
}
.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(255, 0, 0), rgb(0, 0, 0));<!---------COLOR OF BAR # BOTTOM OF DROPDOWN LIST---------->
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: 0.0625em 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: 0.0625em 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: black;<!---------DROPDOWN MENU TEXT COLOR---------->
}
.menu ul li:last-child a {
border-bottom: 0.0625em solid #33373d;<!---------COLOR OF BAR # BOTTOM OF DROPDOWN LIST---------->
}
.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(255, 0, 0), rgb(255, 0, 0));<!---------COLOR OF HEADER WHEN HOVERING---------->
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: 0.0625em solid #103c56;<!---------COLOR OF THIN BAR # BOTTOM OF HEADER---------->
-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 > ul li a:before{
content: '▶ ';
font-size: .5em;
color: black;<!---------COLOR OF ARROWS ON THE SIDE OF DROPDOWN LIST---------->
}
.menu > li > ul li:hover a,
.menu > li > ul li:hover a span,
.menu > li > ul li:hover a:before {
color: #32373D;<!---------COLOR OF TEXT IN DROPDOWN LIST---------->
}
.menu li {
float:left;
width:15em;
}
ul li ul{
display: none;
}
ul li:hover ul{
display: block; /* display the dropdown */
}
See how "Pants" isn't quite in the middle?
Any help is appreciated
You just need to add text-align: center; on the part that you want to center in your CSS or HTML code.
Or you may use <center> tag to each header that you want to center.
What I did is I removed the text-indent: 2.75em; on your .menu > li > a design in CSS.
I think that's the reason why your header text wasn't centered.
In normal web browser looks like following
I have overwritten the bootstrap's following rules in a different file code is given bellow
body {
margin-left: 8px;
margin-right:8px;
}
div .span8 {
border: 2px solid rgb(121, 25, 77);
border-radius: 10px 10px 10px;
background-color: rgb(188, 187, 178);
}
div .span2 {
border: 2px solid rgb(163, 43, 70);
border-radius: 10px 10px 10px;
background-color: rgb(240, 225, 200);
}
.navbar-inner {
background-image: linear-gradient(to bottom, #04998D, #f2f2f2);
}
.navbar .nav > li > a {
color: #D33333;
text-shadow: 0 1px 0 #19B95F;
}
.navbar .nav li.dropdown.open >
.dropdown-toggle, .navbar .nav li.dropdown.active >
.dropdown-toggle, .navbar .nav li.dropdown.open.active >
.dropdown-toggle {
color: #555555;
background-color: #83C0AF;
}
.dropdown-menu {
background-color: #64bead;
background-image: linear-gradient(to bottom, #04998D, #f2f2f2);
}
My problem is when I browse it from any mobile device, I see no change in navbar-inner. Others are changed. I know that, I have to change in bootstrap-responsive.css file. But I have no idea how I will change it.
I want my nabar like following in mobile.
But navbar color is white as was before.
So, How can I change in media query.
For customizing bootstrap refer to Customizing Bootstrap documentation. Look at Customizing components sub section.
So in you case you should override .navbar-inner in css which is loaded after bootstrap.css.
To change color scheme you could also:
use customizer
download less source and modify variables.
By doing so you change color at all places, so you dont have to search for specific color through entire css and replace it with new one.
From the discussion with Sentencio, I found my mistake. Now I am going to tell how I solved it.
I changed the all background-image properties with -webkit-gradient, -webkit-linear-gradient, -moz-linear-gradient and linear-gradient. Code given bellow
.navbar-inner {
min-height: 40px;
padding-right: 20px;
padding-left: 20px;
background-color: #fafafa;
background-image: -moz-linear-gradient(top, #04998D, #f2f2f2);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#04998D), to(#f2f2f2));
background-image: -webkit-linear-gradient(top, #04998D, #f2f2f2);
background-image: -o-linear-gradient(top, #04998D, #f2f2f2);
background-image: linear-gradient(to bottom, #04998D, #f2f2f2);
background-repeat: repeat-x;
border: 1px solid #d4d4d4;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
*zoom: 1;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
}
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 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