Solved

css menu dropdown

Posted on 2010-09-13
8
330 Views
Last Modified: 2012-05-10
Hi

I have a dropdown menu look like this one http://www.ddwebstudios.com/wp/blossomsoft/index.php

I'm using WP3, so I have to change css to make it work with WP 3 menu function. But the text is too long, and I want to make a menu with different width 170px instead 155px. I want to chage Service item, with width 170px, but Portfolio item width is 150px.

So how do I change css to make it work? Make sure when I add style on WP menu function, it works file.

Home
Service
 | - very long item here
 |- other one
Portfolio
 |- menu 1
 |- menu 2

CSS attached here.

Thank you
/* Navigation - second level */

.header ul.menu ul {
	width: 155px;
	visibility: hidden; 
	position: absolute; 
	top: 100%; left: -53px;  
	background: url(../img/bg-tooltip.png) 50% 10px no-repeat;
	padding-top: 17px;
	z-index: 100;
	border-bottom:1px #EFEFEF solid;
}
.header ul.menu ul li {  
	float: none; 
	display: block;
	margin: 0;
	background: url(../img/bg-tooltip-repeat.png) repeat;
	background-color: rgba(255, 255, 255, 0.87);
	border-left:1px #EFEFEF solid;
	border-right:1px #EFEFEF solid;
	
}

.header ul.menu ul li a { 
	color: #507b8d !important;
	padding: 0 20px;
}

Open in new window

0
Comment
Question by:dnndix
8 Comments
 
LVL 14

Expert Comment

by:sam2912
ID: 33660639
If I read your question corrently, you want to make the menu 155px?
.header ul.menu {
   width: 155px;
   overflow-x: hidden;
}

Open in new window

0
 
LVL 4

Expert Comment

by:acashok
ID: 33661477
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 33662339
Try placing this in your master.css files. It is the complete CSS for that stylesheet.
/*
Title:		Master styles for screen media
Author:		justine@gentlecode.net
*/


body {
	font: 12px/18px Verdana, Arial, sans-serif;
	color: #505050;
	background-color: #dedede;
}

/* Links */

a:link, a:visited {
	color: #507b8d;
	outline: none;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

p {
	margin-bottom: 15px;
}


/* PAGE STRUCTURE
------------------------------------------------------------- */

.inner {
	width: 940px;
	margin: 0 auto;
}

img { padding: 0; margin: 0; }
img.alignright { float: right; margin: 0 0 10px 15px; }
img.alignleft { float: left; margin: 0 15px 10px 0; }
img.centered { display: block; margin: 0 auto 10px; }


/* HEADER
------------------------------------------------------------- */

.header {
	height: 80px;
	padding: 35px 0 0;
	background: url(../img/bg-header.png) 50% 0 no-repeat;
}


.header h1 {
	width: 320px;
	height: 40px;
	line-height: 40px;
	float: right;
	text-transform: uppercase;
	font-size: 10px;
	font-weight: bold;
	color: #fff;
}

.header h1 a {
	float: left;
	margin: 0 22px 0 0;	
}

.header h1 span {
	display: block;
	float: left;
	height: 40px;
	padding: 0 0 0 23px;
	background: url(../img/separator-logo.png) 0 50% no-repeat;
}

/* Navigation - first level */

.nav { 
	position: relative;
}

.header ul.nav {
	height: 40px;
	line-height: 40px;
	padding: 0 0 0 35px;
	float: left;
	background: url(../img/menu-bg.png) repeat;
	background-color: rgba(255, 255, 255, );
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-bottom: 0;
	position: relative;
	text-transform: uppercase;
	font-size: 10px;
	font-weight: bold;
}

.header ul.nav li {
	float: left;
	margin: 0 40px 0 0;
	position: relative; 
}

.header ul.nav li a {
	display: block;
	height: 40px;
	color: #c4c4c4;
	position: relative;
}
li.current_page_item a, li.current_page_parent a, li.currrent_page_ancestor a {
	color: #FFF !important;
}



.header ul.nav li.hover, .header ul.nav a:hover { 
	position: relative; 

}

/* Navigation - second level */

.header ul.nav ul {
	width: 185px;
	visibility: hidden; 
	position: absolute; 
	top: 100%; left: -53px;  
	background: url(../img/bg-tooltip.png) 50% 10px no-repeat;
	padding-top: 14px;
	z-index: 100;
}

.header ul.nav ul li {  
	float: none; 
	display: block;
	margin: 0;
	background: url(../img/bg-tooltip-repeat.png) repeat;
	background-color: rgba(255, 255, 255, 0.87);
}

.header ul.nav ul li a { 
	color: #507b8d !important;
	padding: 0 20px;
}

/* FEATURED 
------------------------------------------------------------- */

.featured {
	margin-bottom: 73px;
	background: transparent url(../img/bg-featured.png) no-repeat;
	position: relative; 
}

#cu3er-container {
	margin-bottom: 73px;
 	outline: none;
}

/* We use div.featured to create the headings on subpages */

.subpage .featured {
	margin-bottom: 0;
	height: 90px;
}

.subpage .featured h2 {
	color: #fff;
	font-size: 20px;
	text-transform: uppercase;
	padding: 20px;
}

/* --- */

.featured, .featured .item, .featured .item-wrap {
	position: relative; 
	height: 257px;	
}

.featured .item {
	position: relative; 
	float: left;
	width: 100%;
}

/* Slider - full width */

.featured .item div.caption {
	height: 42px;
	line-height: 42px;
	position: absolute;
	right: 0; bottom: 20px;
	padding: 0 20px;
	color: #fff;
	text-transform: uppercase;
	font-size: 18px;
	background: url(../img/bg-caption.png) repeat-x;
	overflow: hidden;
	margin: 0;
}

.featured .item div.caption span {
	display: block;
	float: left;
	line-height: 38px;
}

.featured .item div.caption a {
	display: block;
	float: right;
	margin: 0 0 0 10px;
	line-height: 44px;
	font-size: 12px;
}

/* Slider - iPhone */

.featured .item .descr {
	width: 455px;
	float: left;
	padding: 30px 0 0 25px;
	color: #8e8e8e;
}

.featured .item .descr h3 {
	color: #fff;
	font-size: 20px;
	line-height: 24px;
	text-transform: uppercase;
	margin-bottom: 15px;
	padding: 0;
	border: none;
}

.featured .item .thumbs {
	position: relative;
	width: 460px;
	height: auto;
	float: left;
	overflow: visible;
}

.featured .item .thumbs img.big {
	position: absolute;
	top: -15px; left: 20px;
	padding: 91px 28px 0 25px;
	background: url(../img/bg-iphone-big.png) no-repeat;
	z-index: 1000;
}

.featured .item .thumbs img.small {
	position: absolute;
	top: 43px; left: 175px;
	padding: 71px 27px 0 20px;
	background: url(../img/bg-iphone-small.png) no-repeat;
	z-index: 999;

}

/* Slider - navigation */

.featured .featured-nav {
	height: 23px;
	position: absolute;
	left: 0; bottom: 0;
	background: url(../img/bg-slider-nav.png) 100% 100% no-repeat;
	padding: 0 30px 0 20px;
	border: none;
	z-index: 10;
}

.featured .featured-nav a {
	float: left;
	margin: 6px 8px 0 0;
	display: block;
	width: 9px;
	height: 9px;
	text-indent: -9999px;
	background: url(../img/bg-slider-bullet.png) right no-repeat;
}

.featured .featured-nav a:hover, .featured .featured-nav a.activeSlide {
	background-position: left top;
}


/* MAIN/PRIMARY STYLES
------------------------------------------------------------- */

/* Headings */

h3 {
	color: #8c8c8c;
	font-size: 18px;
	text-transform: uppercase;
	padding: 0 0 15px 0;
	margin: 0 0 15px 0;
	border-bottom: 1px solid #d6d6d6;
}

h4 {
	color: #858585;
	font-size: 14px;
	text-transform: uppercase;
	padding: 0 0 15px 0;
	margin: 0 0 15px 0;
	border-bottom: 1px solid #d6d6d6;
}

h5 {
	color: #507b8d;
	font-size: 10px;
	text-transform: uppercase;
	margin: 10px 0px;
}

a.readmore {
	font-size: 10px;
	text-transform: uppercase;
	text-decoration: underline;
	font-weight: bold;
}

.primary {
	width: 608px;
	float: left;
	margin-bottom: 10px;
}

.full-width .primary {
	width: 100%;
}

.subpage .main {
	padding: 25px 25px 10px 25px;

}

.main {
	background-color: #fff;
	-webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
	margin-top: -26px;
	position: relative;
}

/* Tabs - naviagtion */

.primary ul.tabs-nav {
	background-color: #000;
}

.primary ul.tabs-nav li {
	float: left;
	width: 25%;
}

.primary ul.tabs-nav li a {
	display: block;
	height: 23px;
	width: 100%;
	line-height: 23px;
	color: #787878;
	background-color: #222;
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
	border-top: 3px solid #000;
}

.primary ul.tabs-nav li a:hover, .primary ul.tabs-nav li a.current {
	background-color: #fff;
	border-top: 3px solid #fff;
	text-decoration: none;
}

/* Tabs - content */

.tab p {
	margin-bottom: 5px;
}

.tab ul {
	margin: 10px;	
}

.tab ul li {
	padding-bottom: 15px;
	border-bottom: 1px solid #d6d6d6;
	overflow: hidden;
}

.tab ul li:last-child {
	padding: 0;
	margin: 0;
	border: none;
}

.tab ul li img {
	float: left;
	margin: 0 16px 0 0;
}

/* About us - tabs */

.main ul.about-us li {
	padding: 0 0 0 80px;
	margin: 20px 0;
}

.main ul.about-us li.team {
	background: url(../img/icon-team.png) no-repeat;
}

.main ul.about-us li.do {
	background: url(../img/icon-whatwedo.png) no-repeat;
}

.main ul.about-us li.worldwide {
	background: url(../img/icon-worldwide.png) no-repeat;
}

.main ul.about-us li.support {
	background: url(../img/icon-support.png) no-repeat;
}

ul.items-nav {
	position: relative;
	margin: 16px 0 40px -38px;
}

ul.items-nav li {
	margin-bottom: 10px;
}

ul.items-nav li a {
	display: block;
	width: 290px;
	height: 42px;
	line-height: 42px;
	font-size: 15px;
	color: #858585;
	text-transform: uppercase;
	text-align: center;
	background-color: #cbcbcb;
	-moz-border-radius-topright: 6px;
	-moz-border-radius-bottomright: 6px;
	-webkit-border-top-right-radius: 6px;
	-webkit-border-bottom-right-radius: 6px;
	border-radius-bottomright: 6px;
	border-radius-topright: 6px
}

ul.items-nav li a.current {
	width: 330px;
	background: url(../img/bg-about-tab.png) repeat-x;
	-webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
}

ul.items-nav li a:hover {
	text-decoration: none;
}

/* Gallery */

ul.gallery {
	margin-top: 30px;
}

ul.gallery li {
	width: 275px;
	float: left;
	margin: 0 26px 15px 0;
}

ul.gallery li .loader {
	height: 103px;
	width: 274px;
	display: block;
}

ul.gallery li:nth-child(3n+0) {
	margin-right: 0;
}

ul.pagination li {
	float: left;
	margin: 25px 5px 25px 0;
}

ul.pagination li a {
	display: block;
	line-height: 22px;
	padding: 0 18px;
	color: #848484;
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	background: url(../img/bg-pagination-item.png) 0 0 repeat-x;
	-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

ul.pagination li a:hover, ul.pagination li.current a {
	background-position: 100% 100%;
	text-decoration: none;
}


/* Blog - posts */

ul.posts li {
	width: 240px;
	height: 260px;
	float: left;
	margin: 25px 28px 0 0;
	padding: 25px 25px 10px;
	background-color: #fff;
	-webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
}

ul.posts li:nth-child(2n+0) {
	margin-right: 0;
}

/* Forms */

.main label {
	display: block;
	color: #507b8d;
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.main input[type="text"]{
	display: block;
	width: 290px;
	height: 26px;
	padding: 0 5px;
	border: 1px solid #c6c6c6;
	margin: 0 0 15px 0;
	font: 12px/18px Verdana, Arial, sans-serif;
	color: #505050;
}

.main input#submit {
	display: block;
	height: 26px;
	padding: 0 5px;
	border: 1px solid #c6c6c6;
	width: auto;
	margin: 0 0 15px 0;
	font: 12px/18px Verdana, Arial, sans-serif;
	color: #505050;
	line-height: 22px;
	color: #848484;
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	background: url(../img/bg-pagination-item.png) 0 0 repeat-x;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.main textarea {
	display: block;
	width: 430px;
	height: 125px;
	padding: 5px;
	border: 1px solid #c6c6c6;
	margin: 0 0 15px 0;
	font: 12px/18px Verdana, Arial, sans-serif;
	color: #505050;
}

.main img.map {
	float: right;
	margin: 20px 10px 0 0;
}

.main form div#error {
	font-size: 11px;
	float: left;
}

.main form div#error span {
	margin-right: 5px;
	color: red;
}

/* Portfolio */

ul.portfolio {
	margin: -50px 0 0 1px;
}

ul.portfolio li {
	width: 240px;
	height: 275px;
	float: left;
	margin: 25px 34px 0 0;
	padding: 25px 25px 10px;
	background-color: #fff;
	-webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
}

ul.portfolio li .loader {
	height: 48px;
	width: 233px;
	display: block;
}

ul.portfolio li:nth-child(3n+0) {
	margin-right: 0;
}

ul.features {
	width: 540px;
	float: left;
	overflow: hidden;
}

ul.features li {
	float: left;
	width: 230px;
	line-height: 34px;
	padding: 0 0 0 40px;
	background: url(../img/bullet-portfolio.png) 0 50% no-repeat;
	color: #507b8d;
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 10px;
}

a.visit {
	display: block;
	float: right;
	width: 130px;
	line-height: 22px;
	color: #848484;
	font-size: 11px;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	margin: 0 220px 0 0;
	background: url(../img/bg-pagination-item.png) 0 0 repeat-x;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;	
}

a.goback {
	display: block;
	float: right;
	color: #507b8d;
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: underline;
	margin: 30px 0 0 0;	
}

/* SECONDARY STYLES
------------------------------------------------------------- */

.secondary {
	float: right;
	width: 294px;
}

.secondary .widget {
	background-color: #fff;
	-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
	position: relative;	
	margin-bottom: 35px;
}

.secondary .widget h3 {
	width: 296px;
	height: 51px;
	background: url(../img/bg-fold-top.png) 50% 50% no-repeat;
	color: #535353;
	line-height: 50px;
	text-align: center;
	text-transform: uppercase;
	position: relative;
	top: -20px; left: -1px;
	margin-bottom: -15px;
	padding: 0;
	font-size: 12px;
	border: none;
}

.secondary .widget ul {
	margin: 0 15px 15px;
}

.secondary .widget ul li {
	padding: 6px 3px;
	padding-bottom: 15px;
	margin-bottom: 9px;
	border-bottom: 1px solid #d6d6d6;
	overflow: hidden;
}

.secondary .widget ul li:last-child {
	margin: 0;
	border: none;
}

.secondary .widget ul li img {
	float: left;
	margin: 0 16px 0 0;
}

.secondary .widget ul li h5 {
	margin: 5px 0 0 0;
}

.secondary .widget ul li span, .secondary .widget ul li span a {
	font-size: 10px;
	color: #454545;
	text-transform: uppercase;
}

.secondary ul.categories {
	background: url(../img/separator-vert.png) 120px 0 repeat-y;
	margin-bottom: 30px;
}

.secondary ul.categories li {
	width: 120px;
	float: left;
	line-height: 26px;
}

.secondary ul.categories li:nth-child(2n+0) {
	margin-left: 30px;
}

.secondary ul.categories li a {
	font-size: 10px;
	color: #676767;
	text-transform: uppercase;
}

.secondary img.sponsor {
	margin-bottom: 15px;
}

/* BOTTOM AREA AND FOOTER
------------------------------------------------------------- */

.bottom {
	margin-top: 15px;
	padding: 65px 0 0 0;
	background: url(../img/bg-bottom.png) top center no-repeat;
	font-size: 10px;
}

.bottom .widget {
	float: left;
	margin: 0 40px 0 0;
	padding: 0 40px 0 0;
	background: url(../img/separator-vert.png) 100% 0 repeat-y;
}

.bottom .widget:last-child {
	margin-right: 0;
	padding-right: 0;
	background: none;
}

.bottom .widget ul li a {
	color: #676767;
	text-transform: uppercase;
	line-height: 30px;
}

.bottom .widget.flickr {
	width: 273px;
	margin-right: 0;
	padding-right: 0;
	background: none;
}

.bottom .widget.flickr ul li {
	float: left;
	margin: 12px 10px 0 0;
}

.bottom .widget.flickr ul li a img {
	border: 3px solid #bcbcbc;
}

.bottom .widget.flickr ul li a:hover img {
	border: 3px solid #aaa;
}

.foot {
	margin: 45px 0 0 0;
	background-color: #eaeaea;
	text-transform: uppercase;
	font-size: 10px;
	color: #676767;
	height: 42px;
	line-height: 42px;
}

.foot ul {
	float: left;
}

.foot ul li {
	float: left;
	margin: 0 5px 0 0;
}

.foot ul li a {
	border-right: 1px solid #676767;
	padding: 0 5px 0 0;
	color: #676767 !important;
}

.foot p {
	float: right;
	margin-bottom: 0;
}

.foot p a {
	color: #676767;
	font-weight: bold;
	
}

/* COMMENTS STYLES
------------------------------------------------------------- */

#comments {
	margin: 30px 0 0 0;
}

#comments ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

#comments ol li {
	background: url(../img/comments-balloon-bg.png) no-repeat top left;
	border-bottom: 1px solid #d6d6d6;
	padding: 0 0 15px 0;
	margin: 0 0 15px 0;
}

#comments ol li img {
	margin: 0 16px 0 0;
	float: left;
}

#comments ol li .author {
	background: url(../img/comments-author-icon.png) no-repeat center left;
	padding: 0 0 0 12px;
	line-height: 12px;
	font-weight: bold;
	font-size: 11px;
}

#comments ol li .date, #comments ol li .time {
	font-size: 9px;
	color: #7b7b7b;
	line-height: 12px;
}

#comments ol li .date {
	background: url(../img/comments-date-icon.png) no-repeat center left;
	padding: 0 0 0 12px;
	margin: 0 15px 0 0;
}

#comments ol li .time {
	background: url(../img/comments-time-icon.png) no-repeat center left;
	padding: 0 0 0 12px;
}

#comments ol li a.author_url {
	font-size: 9px;
	line-height: 12px;
	background: url(../img/comments-url-icon.png) no-repeat center left;
	padding: 0 0 0 11px;
}



#comments ol li span.author_url {
	font-size: 9px;
	line-height: 12px;
	color: #999
}

#comments ol li .reply {
	float: right;
	font-size: 10px;
	letter-spacing: 2px;
	text-decoration: underline;
	text-transform: uppercase;
	background: url(../img/comments-reply-icon.png) no-repeat center left;
	padding: 0 0 0 14px;
}

#comments .comment-content {
	background: #d6d6d6;
	margin: 5px 0 0 0;
	padding: 15px 15px 1px 15px;
	font-size: 11px;
}

#comments ol li ul {
	padding: 20px 20px 0 20px;
	margin: 0;
	list-style: none;
	border: 1px dashed #d6d6d6;
	border-top: none;
}

#comments ol li ul li {
	background: url(../img/comments-balloon-bg.png) no-repeat top left;
	border-bottom: none;
	padding: 0 0 5px 0;
	margin: 0 0 15px 0;
}

/* COMMENT STYLES
------------------------------------------------------------- */

#comment {
	margin: 30px 0 0 0;
}

/* MISC.
------------------------------------------------------------- */

.hide {
	display: none;
}


/* self-clear floats */

.group:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}

.featured .item p a:hover, h3 a:hover, h4 a:hover, .subpage .featured h2 a:hover, ul.items-nav li a:hover {
	
 	text-decoration: none;
  	color: #2a8bb4;

}

.loader { background: #d6d6d6 url(../img/ajax-loader.gif) no-repeat center center; }


/* RM Styles added */
.bottom .textwidget{
width: 200px;
}

Open in new window

0
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 
LVL 3

Expert Comment

by:Ryan Hennessey
ID: 33662380
I think if you change the container element for your menu links (in this case, li) to use float:left, it will automatically resize to fit its contents.  If you want, you can also use the min-width style on the container to ensure the item is never smaller than a certain size (ex. 150px)

Using float: left may require you to rework your menu styles a bit, but it should work.

I hope that helps :)
0
 

Author Comment

by:dnndix
ID: 33668411
My idea is 'Service' menu will show submenu (<li>) 170px, other is the same 150px. I just want to know how to change css to make it work? I can easy to make it <li> 170px by adding width 170px for each <li> but I dont want to do this. I want to edit <ul> to make it show sub menu 170px.

:P Hope I explain in the right way. I'll try your methods.

Thanks
0
 
LVL 3

Accepted Solution

by:
Ryan Hennessey earned 250 total points
ID: 33677271
You can do things that way if you want.  That way is more of a "Brute Force" method, but it should work.

One way you  may be able to do that is to create a new CSS class and apply it to the li element you want to be wider, as follows (you may have to tweak this a bit to make it work properly).  The new class will specify width for the wider li element.

The code attached is merely an approximation, you may have to adapt it to work in your circumstances. I hope it helps!

Cheers,
Rydawg
/* CSS styles for Navigation - second level */

.header ul.menu ul {
     width: 170px; /* you may have to set the ul to be 170px wide */
...
}

.header ul.menu ul li {
     width: 150px; /*normal sized menu item*/
...
}

.header ul.menu ul li.wide {
     width: 170px; /*wide menu item*/
...
*/

Then in the element definition, you will need to define the class

something like this: <li class="wide">...</li>

Open in new window

0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 36487346
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0

Featured Post

Comprehensive Backup Solutions for Microsoft

Acronis protects the complete Microsoft technology stack: Windows Server, Windows PC, laptop and Surface data; Microsoft business applications; Microsoft Hyper-V; Azure VMs; Microsoft Windows Server 2016; Microsoft Exchange 2016 and SQL Server 2016.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article discusses how to create an extensible mechanism for linked drop downs.
The purpose of this video is to demonstrate how to Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question