Probably an easy solution but I'm having problems. My hover state for the main nav of the site I wish to be in a big block. At current it only displays a hover selector over the current link. I'd like it to have padding on either site.
Design example -> http://www.garyrevell.co.uk/student-i/screenshot_01.jpg
This is the current WIP site. http://www.garyrevell.co.uk/student-i/index.html
The NAV css
header nav {
cursor:pointer;
font-family: GeoSlb712XBdBT;
text-transform:uppercase;
float: left;
color:#fff;
/* WebKit (Safari/Chrome) Only */
-webkit-text-stroke: 0.5px #F47B20;
/* If we weren't using text-shadow, we'd set a fallback color
and use this to set color instead
-webkit-text-fill-color: white; */
color: white;
text-shadow:1px 1px 0 #F47B20,
/* Simulated effect for Firefox and Opera
and nice enhancement for WebKit */
-1px -1px 0 #F47B20,
1px -1px 0 #F47B20,
-1px 1px 0 #F47B20,
1px 1px 0 #F47B20;
font-size:17px;
text-align: right;
padding-top: 5px;
padding-bottom:5px;
padding-left:2px;
padding-right:2px;
/*background-color: #ffffff;*/
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.20)), to(rgba(255, 255, 255, 0.20)));
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.20));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.20));
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.20));
background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.20));
background-image: linear-gradient(top, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.20));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#ffffff', EndColorStr='#ffffff');
margin-top:15px;
margin-left:20px;
-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;
color:#FFFFFF;
}
header nav ul {
list-style: none;
}
header nav li {
float: left;
margin: 0px 30px 0 30px;
}
.navi {
width: 500px;
height:35px;
padding: 0px;
margin: 0px 0;
overflow: hidden;
}
.navi li {
float: left;
margin-right: 5px;
list-style: none;
color: #ffffff;
outline: none;
text-align: center;
text-transform: uppercase;
letter-spacing: 0;
display: block;
}
.navi li a {
display:block;
list-style: none;
color: #ffffff;
outline: none;
text-align: center;
text-transform: uppercase;
letter-spacing: 0;
display: block;
padding:3px;
}
.navi li:hover {
background-color: #F47B20;
color: #ffffff;
}
.navi li.current-menu-item {
}
Any help would be great. Many thanks
add this css
header nav {
padding:0;
}
.navi {
height: 40px;
}
.navi li{
border-radius:5px;
margin:0;
padding:0 20px;
}
.navi li a{
line-height:40px;
}
.navi li {
line-height: 30px;
border-radius: 7px;
margin-left: 20px
}
.navi li a{
padding: 0 15px;
}
.navi li:hover {
background-color: #F47B20;
}
Add These properties to your existing code, (dont replace add only)
Related
I spent a bit of time creating a new navigation menu for a project. I used float elements in my CSS file which seems to play an important factor in keeping my navigation menu keep its appearance. But currently the alignment of the navigation menu is off and my goal is to have it centered in the view.
header {
background: #3d4144 url("../img/bg.png") 0 0 repeat;
border-bottom: 5px solid #ddd;
height: 170px;
padding-top: 15px;
}
#title {
color: white;
display: block;
letter-spacing: 2px;
margin-left: 50px;
padding: 20px;
position: relative;
text-align: left;
}
#headerMessage {
color: white;
display: block;
letter-spacing: 2px;
padding: 20px;
position: relative;
text-align: center;
}
.container {
margin: 0 auto;
width: 540px;
}
#navHeader {
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);
background: #464b4c;
background-image: -webkit-linear-gradient(top, #464b4c, #3f4344);
background-image: -moz-linear-gradient(top, #464b4c, #3f4344);
background-image: -o-linear-gradient(top, #464b4c, #3f4344);
background-image: linear-gradient(to bottom, #464b4c, #3f4344);
border-top: 1px solid #353939;
border-bottom: 1px solid #2e3131;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);
height: 36px;
}
#navHeader a {
-webkit-transition: 0.1s ease-out;
-moz-transition: 0.1s ease-out;
-o-transition: 0.1s ease-out;
transition: 0.1s ease-out;
-webkit-transition-property: background-color, line-height;
-moz-transition-property: background-color, line-height;
-o-transition-property: background-color, line-height;
transition-property: background-color, line-height;
text-align: center;
}
#navHeader #navHeaderUL {
float: left;
border-left: 1px solid #353939;
border-left: 1px solid rgba(0, 0, 0, 0.2);
border-right: 1px solid #4d5354;
border-right: 1px solid rgba(255, 255, 255, 0.06);
}
#navHeader li {
float: left;
}
#navHeader a {
display: block;
padding: 0 20px;
line-height: 36px;
color: #ddd;
text-decoration: none;
text-shadow: 0 -1px #2e3131;
border-left: 1px solid #4d5354;
border-left: 1px solid rgba(255, 255, 255, 0.06);
border-right: 1px solid #353939;
border-right: 1px solid rgba(0, 0, 0, 0.2);
cursor: pointer;
}
#navHeader a:hover {
background: #4d5354;
background: rgba(255, 255, 255, 0.05);
}
#navHeader li.active a,
#navHeader li.active a:hover,
#navHeader a:active {
padding: 0 21px;
line-height: 33px;
color: #eee;
background: #323637;
border-left: 0;
border-right: 0;
border-bottom: 3px solid #48a9c0;
background-image: -webkit-linear-gradient(top, #484e4f, #323637);
background-image: -moz-linear-gradient(top, #484e4f, #323637);
background-image: -o-linear-gradient(top, #484e4f, #323637);
background-image: linear-gradient(to bottom, #484e4f, #323637);
-webkit-box-shadow: inset 0 -1px #151717, inset 0 -1px 8px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 -1px #151717, inset 0 -1px 8px rgba(0, 0, 0, 0.2);
}
#navHeader li.green a,
#navHeader li.green a:active {
border-bottom-color: #56c93d;
}
#navHeader li.red a,
#navHeader li.red a:active {
border-bottom-color: #a54e49;
}
#navHeader li.purple a,
#navHeader li.purple a:active {
border-bottom-color: #c052b9;
}
#navHeader li.yellow a,
#navHeader li.yellow a:active {
border-bottom-color: #c0bb30;
}
<header>
<h1 id="title">Insert Title</h1>
<h2 id="headerMessage">INSERT MESSAGE!</h2>
<nav id="navHeader">
<div class="container">
<ul id="navHeaderUL">
<li class="active">Home
<li class="green">Schedule
<li class="red">Track
<li class="yellow">Contact
</ul>
</div>
<!-- end of container -->
</nav>
<!-- end of navHeader -->
</header>
You can remove line-height on #navHeader a which is causing the off vertical alignment (or is this intended?).
Remove float and set display: inline-block so you can horizontally center the ul with text-align: center.
Please find CSS tweaks commented below.
header {
background: #3d4144 url("../img/bg.png") 0 0 repeat;
border-bottom: 5px solid #ddd;
height: 170px;
padding-top: 15px;
}
#title {
color: white;
display: block;
letter-spacing: 2px;
margin-left: 50px;
padding: 20px;
position: relative;
text-align: left;
}
#headerMessage {
color: white;
display: block;
letter-spacing: 2px;
padding: 20px;
position: relative;
text-align: center;
}
.container {
margin: 0 auto;
width: 540px;
}
#navHeader {
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);
background: #464b4c;
background-image: -webkit-linear-gradient(top, #464b4c, #3f4344);
background-image: -moz-linear-gradient(top, #464b4c, #3f4344);
background-image: -o-linear-gradient(top, #464b4c, #3f4344);
background-image: linear-gradient(to bottom, #464b4c, #3f4344);
border-top: 1px solid #353939;
border-bottom: 1px solid #2e3131;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);
height: 36px;
}
#navHeader a {
-webkit-transition: 0.1s ease-out;
-moz-transition: 0.1s ease-out;
-o-transition: 0.1s ease-out;
transition: 0.1s ease-out;
-webkit-transition-property: background-color, line-height;
-moz-transition-property: background-color, line-height;
-o-transition-property: background-color, line-height;
transition-property: background-color, line-height;
text-align: center;
}
#navHeader #navHeaderUL {
/* new */
text-align: center;
/*float: left;*/
border-left: 1px solid #353939;
border-left: 1px solid rgba(0, 0, 0, 0.2);
border-right: 1px solid #4d5354;
border-right: 1px solid rgba(255, 255, 255, 0.06);
}
#navHeader li {
/* new*/
float: none;
display: inline-block;
}
#navHeader a {
display: block;
padding: 0 20px;
/*new*/
/*margin-top: -6px;*/
/*line-height: 36px;*/
color: #ddd;
text-decoration: none;
text-shadow: 0 -1px #2e3131;
border-left: 1px solid #4d5354;
border-left: 1px solid rgba(255, 255, 255, 0.06);
border-right: 1px solid #353939;
border-right: 1px solid rgba(0, 0, 0, 0.2);
cursor: pointer;
}
#navHeader a:hover {
background: #4d5354;
background: rgba(255, 255, 255, 0.05);
}
#navHeader li.active a,
#navHeader li.active a:hover,
#navHeader a:active {
padding: 0 21px;
/*new*/
margin-top: -6px;
/*line-height: 33px;*/
color: #eee;
background: #323637;
border-left: 0;
border-right: 0;
border-bottom: 3px solid #48a9c0;
background-image: -webkit-linear-gradient(top, #484e4f, #323637);
background-image: -moz-linear-gradient(top, #484e4f, #323637);
background-image: -o-linear-gradient(top, #484e4f, #323637);
background-image: linear-gradient(to bottom, #484e4f, #323637);
-webkit-box-shadow: inset 0 -1px #151717, inset 0 -1px 8px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 -1px #151717, inset 0 -1px 8px rgba(0, 0, 0, 0.2);
}
#navHeader li.green a,
#navHeader li.green a:active {
border-bottom-color: #56c93d;
}
#navHeader li.red a,
#navHeader li.red a:active {
border-bottom-color: #a54e49;
}
#navHeader li.purple a,
#navHeader li.purple a:active {
border-bottom-color: #c052b9;
}
#navHeader li.yellow a,
#navHeader li.yellow a:active {
border-bottom-color: #c0bb30;
}
<header>
<h1 id="title">Insert Title</h1>
<h2 id="headerMessage">INSERT MESSAGE!</h2>
<nav id="navHeader">
<div class="container">
<ul id="navHeaderUL">
<li class="active">Home
<li class="green">Schedule
<li class="red">Track
<li class="yellow">Contact
</ul>
</div>
<!-- end of container -->
</nav>
<!-- end of navHeader -->
</header>
I am building a joomla template using built in bootstrap version 2.3.2. The problem is i have long navbar when it comes on tablets, it divide in two lines i would like to have it collapse at 1200px. I am using following code for navigation.
<?php
defined('_JEXEC') or die;
// Add JavaScript Frameworks
JHtml::_('bootstrap.framework');
// Load optional rtl Bootstrap css and Bootstrap bugfixes
JHtmlBootstrap::loadCss($includeMaincss = true);
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<jdoc:include type="head" />
<!--[if lt IE 9]>
<script src="<?php echo $this->baseurl ?>/media/jui/js/html5.js"></script>
<![endif]-->
<link href="templates/test/css/template.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="row-fluid">
<div id="logo" class="span12"><img src="templates/test/images/logo.png" alt="Home - Freeterm Limited, London"></div>
</div>
</div>
<div class="container">
<div class="row-fluid">
<nav class="span12 navbar">
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse"><jdoc:include type="modules" name="nav" style="none" /></div>
</div>
</nav>
</div></div>
The CSS is as below:
.navbar {
margin: 0px;
}
.navbar-inner {
min-height: 40px;
padding-left: 0px;
padding-right: 0px;
background-color: #363f45;
background-image: -moz-linear-gradient(top, #363f45, #363f45);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#363f45), to(#363f45));
background-image: -webkit-linear-gradient(top, #363f45, #363f45);
background-image: -o-linear-gradient(top, #363f45, #363f45);
background-image: linear-gradient(to bottom, #363f45, #363f45);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff363f45', endColorstr='#ff363f45', GradientType=0);
border: 0px solid #d4d4d4;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: 0 0px 0px rgba(0, 0, 0, 0.065);
-moz-box-shadow: 0 0px 0px rgba(0, 0, 0, 0.065);
box-shadow: 0 0px 0px rgba(0, 0, 0, 0.065);
}
/* ----- Main Menu Styling ----- */
.navbar .nav > li > a {
font-family: 'helvetica', sans-serif;
color: #fff;
text-shadow: none;
line-height: 80px;
padding: 0 30px 0 30px;
border-left: 1px solid #21262b;
}
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
color: #fff;
background-color: #8dbf41;
}
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
color: #fff;
background-color: #8dbf41;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.navbar .nav li.item-101 a {
border-left: none;
}
/*----- Drop Menu -----*/
nav .nav-child {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 0px 0;
margin: 0;
list-style: none;
background-color: #363f45;
border: 0px solid #ccc;
border: 0px solid rgba(0,0,0,0.2);
*border-right-width: 0px;
*border-bottom-width: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: 0 0px 0px rgba(0,0,0,0);
-moz-box-shadow: 0 px 0px rgba(0,0,0,0);
box-shadow: 0 px 0px rgba(0,0,0,0);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
nav .nav-child.pull-right {
right: 0;
left: auto;
}
nav .nav-child .divider {
*width: 100%;
height: 1px;
margin: 8px 1px;
*margin: -5px 0 5px;
overflow: hidden;
background-color: #e5e5e5;
border-bottom: 1px solid #fff;
}
nav .nav-child a {
display: block;
padding: 0px 20px;
clear: both;
font-size: 13px;
font-family: 'helvetica', sans-serif;
text-transform: uppercase;
height: 50px;
line-height: 50px;
color: #fff;
border: none;
white-space: nowrap;
}
nav .nav > li {
position: relative;
}
nav .nav > li:hover > .nav-child,
nav .nav > li > a:focus + .nav-child {
display: block;
}
nav .nav-child li > a:hover,
nav .nav-child li > a:focus,
nav .nav-child:hover > a {
text-decoration: none;
color: #fff;
background-color: #8dbf41;
}
/*----- Nav Bar Button -----*/
.navbar .btn-navbar {
float: right;
padding: 10px 10px;
margin: 20px;
margin-left: 5px;
color: #ffffff;
text-shadow: 0 0px 0 rgba(0, 0, 0, 0);
background-color: #363f45;
*background-color: #363f45;
background-image: -moz-linear-gradient(top, #363f45, #363f45);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#363f45), to(#363f45));
background-image: -webkit-linear-gradient(top, #363f45, #363f45);
background-image: -o-linear-gradient(top, #363f45, #363f45);
background-image: linear-gradient(to bottom, #363f45, #363f45);
background-repeat: repeat-x;
border-color: #363f45 #363f45 #363f45;
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff363f45', endColorstr='#ff363f45', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0), 0 0px 0 rgba(255, 255, 255, 0);
-moz-box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0), 0 0px 0 rgba(255, 255, 255, 0);
box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0), 0 0px 0 rgba(255, 255, 255, 0);
}
.navbar .btn-navbar:hover,
.navbar .btn-navbar:focus,
.navbar .btn-navbar:active,
.navbar .btn-navbar.active,
.navbar .btn-navbar.disabled,
.navbar .btn-navbar[disabled] {
color: #ffffff;
background-color: #363f45;
*background-color: #363f45;
}
just add this in your css file
#media (max-width: 1000px) {
.navbar-header {
float: none !important;
}
.navbar-default {
background-color: #222 !important;
border-color: transparent;
padding:0px !important;
}
.nav > li {
display: block !important;
position: relative;
}
.navbar-left, .navbar-right {
float: none !important;
}
.navbar-nav > li.navbar-right {
float: none !important;
}
.navbar{
min-height:50px;
position:relative;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block !important;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none !important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none !important;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
I have been facing problem for my horizontal menu bar code.
This menu bar displays correctly for 1366 x 768 resolution
but after pressing ctrl - short key
when I reduce browser size using ctrl - short key my menus come down. I have tried both em and px units to be used for this problem but it does not seem to solve the problem. I want to clarify that menu bar must be in center as the other things in whole page and should be expanded for the whole 960px setting for wrapper. I need help for sorting out this problem.
Below is my source code
HTML
<nav>
<div class="nav_wrapper">
<div class="menu_box">
<div id='cssmenu'>
<ul>
<li><span>Home</span></li>
<li><a href='#'><span>About Us</span></a></li>
<li><a href='#'><span>Courses</span></a>
<ul>
<li><a href='index.php'>AGP Program</a></li>
<li><a href='index.php'>Web Program</a></li>
</ul>
</li>
<li><a href='#'><span>Partners</span></a></li>
<li><a href='#'><span>Consultancy</span></a></li>
<li><a href='#'><span>News n Events</span></a></li>
<li><a href='#'><span>Gallery</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div>
</div>
</div>
</nav>
CSS
/* MEDIA QUERIES FOR A RESPONSIVE LAYOUT */
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
font-weight: normal;
text-decoration: none;
line-height: 1;
font-family: 'Arial', sans-serif;
letter-spacing:0.4px;
font-size: 14px;
position: relative;
}
#cssmenu a {
line-height: 1.5;
}
#cssmenu {
width: 100%;
background: #fff;
}
#cssmenu > ul {
border: 1px solid #000000;
margin-left:auto;
margin-right:auto;
-moz-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
-webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
background: #565656;
background: -moz-linear-gradient(#565656 0%, #323232 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #323232));
background: -webkit-linear-gradient(#565656 0%, #323232 100%);
background: linear-gradient(#565656 0%, #323232 100%);
}
#cssmenu > ul:after {
clear: both;
content: '';
display: table;
}
#media all and (max-width: 480px) {
#cssmenu > ul {
max-height: 32px;
overflow: hidden;
-webkit-transition: max-height 0.5s;
transition: max-height 0.5s;
}
#cssmenu.expand ul {
max-height: 900px;
}
}
#cssmenu > ul > li {
border-right: 1px solid #000000;
-moz-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2);
-webkit-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2);
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2);
float: left;
}
#cssmenu > ul > li.mobile {
display: none;
}
#cssmenu > ul > li.active {
background: #444444;
background: -moz-linear-gradient(#444444 0%, #323232 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #444444), color-stop(100%, #323232));
background: -webkit-linear-gradient(#444444 0%, #323232 100%);
background: linear-gradient(#444444 0%, #323232 100%);
}
#media all and (max-width: 480px) {
#cssmenu > ul > li {
border-right:1px solid #000000;
-moz-box-shadow: 0 0 0 transparent;
-webkit-box-shadow: 0 0 0 transparent;
box-shadow: 0 0 0 transparent;
display: block;
float: none;
}
#cssmenu > ul > li.mobile {
display: block;
}
#cssmenu > ul > li.mobile i {
float: right;
font-style: normal;
}
}
#cssmenu > ul > li:last-child {
border-right: 0px solid #000000;
-moz-box-shadow: 0 0 0 transparent;
-webkit-box-shadow: 0 0 0 transparent;
box-shadow: 0 0 0 transparent;
-webkit-border-radius: 0 0px 4px 0;
-moz-border-radius: 0 0px 4px 0;
border-radius: 0px;
}
#cssmenu > ul > li:last-child ul {
left: auto;
right: 0;
}
#cssmenu > ul > li.mobile {
border-right: 0 none;
-moz-box-shadow: 0 0 0 transparent;
-webkit-box-shadow: 0 0 0 transparent;
box-shadow: 0 0 0 transparent;
}
#cssmenu > ul > li > a {
margin: 0 0 2px 0;
font-size: 12px;
display: block;
color: #ffffff;
text-shadow: 0 1px 1px #000;
}
#cssmenu > ul > li > a > span {
display: block;
padding: 6px 2.61em;
font-weight: bold;
}
#cssmenu > ul > li > a:hover {
text-decoration: none;
}
#cssmenu > ul > li.active {
border-bottom: none;
}
#cssmenu > ul > li.active > a {
color: #fff;
text-shadow: 0 1px 1px #000;
}
/* Sub menu */
#cssmenu ul ul {
background: linear-gradient(to bottom, #333333 0%, #000000 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);border: 1px solid #e5e5e5;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 2px;
-moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
padding: 5px 12px;
display: none;
position: absolute;
top: 33px;
left: 0;
width: 110px;
z-index: 1;
}
#media all and (max-width: 480px) {
#cssmenu ul ul {
position: relative;
top: 0;
width: 92%;
}
}
#cssmenu ul ul li {
padding: 3px 0;
}
#cssmenu ul ul a {
color: #999999;
display: block;
font-size: 12px;
font-weight: bold;
}
#cssmenu ul ul li a:hover {
color: #ffffff;
}
/* Menus */
#media only screen and (min-width: 1000px)
{
.middle_section{
width:100%;
background-color:#D6D6D6;
/* background:linear-gradient(to bottom, #C40302 0%, #9E0302 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); */
}
nav{
background: linear-gradient(#565656 0%, #323232 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
clear: both;
padding-bottom:10px;
padding-top:10px;
position: relative;
width:100%;
}
.nav_wrapper{
background: linear-gradient(#565656 0%, #323232 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
width:960px;
margin-left:auto;
margin-right:auto;
}
}
This might be simply solved by adding min-width to on of the wraping elements, in this case I finde it to work better when applied to "nav_wrapper". Also, when working with an element bigger than the display, it's good to have no margin in the body element, so I changed that too.
Here's the changes I made
CSS
body{
margin: 0px;
}
.nav_wrapper{
min-width: 980px;
}
LIVE DEMO
I am trying to build a drop down menu, So far i found a really nice menu but it lists its items horizontal and displays its sub items horizontally as well.
I would like my items to be next to each other and then if it has a sub menu those items drop down.
Here is my Menu:
<link rel="stylesheet" type="text/css" href="../../Content/Menu.css" />
<div class="float-right">
<nav>
<ul class="menu" style="float: left;">
<li class="item1">Home
<ul style="display: block; ">
<li class="subitem1" >#Html.ActionLink("Home", "Index", "Home", new { #class = "active" })</li>
<li class="subitem2">#Html.ActionLink("Contact", "Contact", "Home")</li>
<li class="subitem3">#Html.ActionLink("About", "About", "Home")</li>
</ul>
</li>
<li class="item2">#Html.ActionLink("Login", "Login", "Home")</li>
</ul>
</nav>
</div>
Style Sheet
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));
}
What property in my style sheet is causing my Menu to list like this?
Is there a way to override what every is causing the menu you to do this?
Edit
Html list:
<div class="float-right">
<nav>
<ul class="menu" style="float: left;">
<li class="item1">Home
<ul style="display: block; ">
<li class="subitem1" ><a class="active" href="/?Length=4">Home</a></li>
<li class="subitem2">Contact</li>
<li class="subitem3">About</li>
</ul>
</li>
<li class="item2">Login</li>
</ul>
</nav>
</div>
.menu {
width: 225px;
}
the width:225px prevents the menu from displaying correctly.
http://jsfiddle.net/wFyMs/2/
Why can you make it simplier?
Try rewrite it by this pattern:
CSS
li { float: left; }
li ul li { clear: both; }
I am using cs3pie and facing some issue with it. It's working but instead of border-radius 160 it's taking 4 . How can i solve it.
/* Buttons and button links */
input[type=submit],
.actions ul li a,
.actions a {
font-weight:normal;
padding: 4px 8px;
background: #FDC00D;
background-image: -webkit-gradient(linear, left top, left bottom, from(#FDC00D), to(#F68C1E));
background-image: -webkit-linear-gradient(top, #FDC00D, #F68C1E);
background-image: -moz-linear-gradient(top, #FDC00D, #F68C1E);
background-image: -ms-linear-gradient(top, #FDC00D, #F68C1E);
background-image: -o-linear-gradient(top, #FDC00D, #F68C1E);
background-image: linear-gradient(top, #FDC00D, #F68C1E);
-pie-background: linear-gradient(#FDC00D, #F68C1E); /*PIE*/
color:#333;
border:1px solid #F69C1E;
text-decoration: none;
text-shadow: #ccc 0px 1px 0px;
min-width: 0;
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0px 1px 1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0px 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0px 1px 1px rgba(0, 0, 0, 0.2);
-webkit-user-select: none;
user-select: none;
}
.actions ul li a:hover,
.actions a:hover {
background: #FDC00D;
border-color: #acacac;
text-decoration: none;
}
input[type=submit]:active,
.actions ul li a:active,
.actions a:active {
background: #F68C1E;
background-image: -webkit-gradient(linear, left top, left bottom, from(#F68C1E), to(#FDC00D));
background-image: -webkit-linear-gradient(top, #F68C1E,#FDC00D);
background-image: -moz-linear-gradient(top, #F68C1E,#FDC00D);
background-image: -ms-linear-gradient(top, #F68C1E,#FDC00D);
background-image: -o-linear-gradient(top, #F68C1E,#FDC00D);
background-image: linear-gradient(top, #F68C1E,#FDC00D);
-pie-background: linear-gradient(#F68C1E,#FDC00D); /*PIE*/
text-decoration: none;
}
input[type=submit],.actions a {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
position:relative;
z-index: 0;
}
/** Actions **/
.actions ul {
margin: 0;
padding: 0;
}
.actions li {
margin:0 0 0.5em 0;
list-style-type: none;
white-space: nowrap;
padding: 0;
}
.actions ul li a {
display: block;
clear: both;
-webkit-border-top-right-radius: 161px;
-webkit-border-bottom-right-radius: 161px;
-moz-border-radius-topright: 161px;
-moz-border-radius-bottomright: 161px;
border-top-right-radius: 161px;
border-bottom-right-radius: 161px;
position:relative;
z-index: 0;
}
.actions ul li a:before,.actions ul li a.highlight:hover:before {
content: "\2665" ;
font-size: 18px;
padding-right:3px;
color: #16224C;
}
.actions ul li a.highlight:before,.actions ul li a:hover:before {
color: red;
}
.actions ul.subcategory{
margin-left:10px;
display: none;
}
.actions ul.subcategory li a {}
This is how i am using pie
<script>
$(function() {
if (window.PIE) {
$('.actions ul li a, .actions a, input[type="submit"], .success,.message,.cake-error,p.error,.error-message').each(function() {
PIE.attach(this);
});
}
});
</script>
CSS3PIE only supports short-hand notation.
Excerpt from http://css3pie.com/documentation/known-issues/#shorthand
For all CSS properties which PIE parses, only the shorthand versions
of those properties will be recognized. For example, while
border-radius is supported, the individual longhand
border-top-left-radius etc. properties are not.
The reason for this is the same reason URLs are not resolved relative
to the CSS file (see above): PIE does not have visibility into where
each style property comes from. If there is both a shorthand and a
longhand property present, PIE cannot determine the order in which the
CSS author specified those properties, nor can it determine the
specificity of the selector for each property. It cannot therefore
make an informed decision about which property should take precedence.
To avoid making dumb guesses, we have opted to only support shorthand
properties. Shorthand was chosen over longhand to keep file size small
and avoid tedious repetition.
This won't be really needed for optimization of your CSS, but alphabetically sorted properties theoretically will be more similar for parser. Except that if you would like to make some change you will faster find property that you are looking for.
Also be consistent in way you are writing your RGB for colors, because some of them is uppercase and others are not.
Also instead of input[type=submit] use input[type="submit"] as specification says.