Solved

css menu dropdown

Posted on 2010-09-13
8
334 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
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 learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

735 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