i want to add dropdownload arrow for each top level menu and not sub.
this is the one i want to add from this site link below but its not working for me
https://amethystwebsitedesign.com/how-to-add-arrow-indicators-to-genesis-navigation-menus/
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<style>
*{
padding:0;
margin:0;
}
body{
background:#f0f0f0;
font-family:"Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;
overflow-x:hidden;
}
h1{
font-size:180px;
line-height:180px;
text-transform: uppercase;
color:#f9f9f9;
position:absolute;
text-shadow:0 1px 1px #ddd;
top:-25px;
left:-20px;
white-space: nowrap;
}
span.reference{
position:fixed;
left:10px;
bottom:10px;
font-size:11px;
}
span.reference a{
color:#DF7B61;
text-decoration:none;
text-transform: uppercase;
text-shadow:0 1px 0 #fff;
}
span.reference a:hover{
color:#000;
}
.box{
margin-top:129px;
height:460px;
width:100%;
position:relative;
background:#fff url(click.png) no-repeat 380px 180px;
-moz-box-shadow:0px 0px 10px #aaa;
-webkit-box-shadow:0px 0px 10px #aaa;
-box-shadow:0px 0px 10px #aaa;
}
.box h2{
color:#f0f0f0;
padding:40px 10px;
text-shadow:1px 1px 1px #ccc;
}
</style>
</head>
<body>
<nav><ul id="ldd_menu" class="ldd_menu">
<li>
<span>Vacations </span><!-- Increases to 510px in width-->
<div class="ldd_submenu">
<ul>
<li class="ldd_heading">By Location</li>
<li>South America</li>
<li>Antartica</li>
<li>Africa</li>
<li>Asia and Australia</li>
<li>Europe</li>
</ul>
<ul>
<li class="ldd_heading">By Location</li>
<li>South America</li>
<li>Antartica</li>
<li>Africa</li>
<li>Asia and Australia</li>
<li>Europe</li>
</ul>
<ul>
<li class="ldd_heading">By Category</li>
<li>Sun & Beach</li>
<li>Adventure</li>
<li>Science & Education</li>
<li>Extreme Sports</li>
<li>Relaxing</li>
<li>Spa and Wellness</li>
</ul>
<ul>
<li class="ldd_heading">By Category</li>
<li>Sun & Beach</li>
<li>Adventure</li>
<li>Science & Education</li>
<li>Extreme Sports</li>
<li>Relaxing</li>
<li>Spa and Wellness</li>
</ul>
<ul>
<li class="ldd_heading">By Theme</li>
<li>Paradise Islands</li>
<li>Cruises & Boat Trips</li>
<li>Wild Animals & Safaris</li>
<li>Nature Pure</li>
<li>Helping others & For Hope</li>
<li>Diving</li>
</ul>
<a class="ldd_subfoot" href="#"> + New Deals</a>
</div>
</li>
<li>
<span>Equipment</span>
<div class="ldd_submenu">
<ul>
<li class="ldd_heading">By Location</li>
<li>South America</li>
<li>Antartica</li>
<li>Africa</li>
<li>Asia and Australia</li>
<li>Europe</li>
</ul>
<ul>
<li class="ldd_heading">By Category</li>
<li>Sun & Beach</li>
<li>Adventure</li>
<li>Science & Education</li>
<li>Extreme Sports</li>
<li>Relaxing</li>
<li>Spa and Wellness</li>
</ul>
<ul>
<li class="ldd_heading">By Theme</li>
<li>Paradise Islands</li>
<li>Cruises & Boat Trips</li>
<li>Wild Animals & Safaris</li>
<li>Nature Pure</li>
<li>Helping others & For Hope</li>
<li>Diving</li>
</ul>
<a class="ldd_subfoot" href="#"> + New Deals</a>
</div>
</li>
<li>
<span>Locations</span>
<div class="ldd_submenu">
<ul>
<li class="ldd_heading">By Location</li>
<li>South America</li>
<li>Antartica</li>
<li>Africa</li>
<li>Asia and Australia</li>
<li>Europe</li>
</ul>
<ul>
<li class="ldd_heading">By Category</li>
<li>Sun & Beach</li>
<li>Adventure</li>
<li>Science & Education</li>
<li>Extreme Sports</li>
<li>Relaxing</li>
<li>Spa and Wellness</li>
</ul>
<ul>
<li class="ldd_heading">By Theme</li>
<li>Paradise Islands</li>
<li>Cruises & Boat Trips</li>
<li>Wild Animals & Safaris</li>
<li>Nature Pure</li>
<li>Helping others & For Hope</li>
<li>Diving</li>
</ul>
<a class="ldd_subfoot" href="#"> + New Deals</a>
<nav></div>
</li>
</ul>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
/**
* the menu
*/
var $menu = $('#ldd_menu');
/**
* for each list element,
* we show the submenu when hovering and
* expand the span element (title) to 510px
*/
$menu.children('li').each(function(){
var $this = $(this);
var $span = $this.children('span');
$span.data('width',$span.width());
$this.bind('mouseenter',function(){
$menu.find('.ldd_submenu').stop(true,true).hide();
$this.find('.ldd_submenu').slideDown(300);
}).bind('mouseleave',function(){
$this.find('.ldd_submenu').stop(true,true).hide();
$span.stop().animate({'width':$span.data('width')+'px'},300);
});
});
});
</script>
</body>
this is the code am trying to add
.genesis-nav-menu > .menu-item-has-children > a:after {
content: "\f140";
display: inline-block;
-webkit-font-smoothing: antialiased;
font: normal 16px/1 'dashicons';
padding-left: 3px;
vertical-align: top;
}
Check it works for me:
.genesis-nav-menu > .menu-item-has-children > a {
color: #333;
text-decoration: none;
}
.genesis-nav-menu > .menu-item-has-children > a:after {
content: "\f140";
display: inline-block;
-webkit-font-smoothing: antialiased;
font: normal 24px/1 'dashicons';
padding-left: 3px;
vertical-align: top;
}
<link href="https://rawgit.com/WordPress/dashicons/master/css/dashicons.css" rel="stylesheet"/>
<div class="genesis-nav-menu">
<div class="menu-item-has-children">Hello</div>
</div>
Related
How can I make the decimal list to go from 1 to 2 on the below code. Can't figure it out, maybe i did something wrong with the tags. Please check code below. The result only prints number 1
div {
background-color: white;
width: 300px;
border: 2px solid red;
padding: 20px;
margin: 10px;
}
ul.a {list-style-type: disc;}
ol.f {list-style-type: decimal;}
ol.u {list-style-type: upper-roman;}
ol.t {list-style-type: upper-latin;}
ol.p {list-style-type: lower-latin;}
ol.q {list-style-type: lower-roman;}
<div>
<font size="6"
face="arial"
color="light blue">
Aircraft Types
</font>
<ul class="a">
<li>General Aviation (piston-driven engines)</li>
<ol class="f">
<li>Single-Engine Aircraft</li>
</ol>
<ul>
<ol class="u">
<li>Tail wheel</li>
<li>Tricycle</li>
</ol>
</ul>
<ol class="f">
<li>Dual-Engine Aircraft</li>
</ol>
<ul>
<ol class="t">
<li>Wing-mounted engines</li>
<li>Push-pull fuselage-mounted engines</li>
</ol>
<ul>
</ul>
</ul>
</ul>
<ul class="a">
<li>Commercial Aviation (jet engines)</li>
<ol class="f">
<li>Dual Engine</li>
</ol>
<ul>
<ol class="p">
<li>Wing-mounted engines</li>
<li>Fuselage-mounted engines</li>
</ol>
</ul>
<ol class="f">
<li>Tri-Engine</li>
</ol>
<ul>
<ol class="q">
<li>Third engine in vertical stabilizer</li>
<li>Third engine in fuselage</li>
</ol>
</ul>
</ul>
</div>
I tried moving out the tags but I can't figure it out. I want to make the decimal numbers go in ascending order. My code only shows 1 for them
Please find below the corrected code with the expected result:
div {
background-color: white;
width: 300px;
border: 2px solid red;
padding: 20px;
margin: 10px;
}
ul.a {
list-style-type: disc;
}
ol.f {
list-style-type: decimal;
}
ol.u {
list-style-type: upper-roman;
}
ol.t {
list-style-type: upper-latin;
}
ol.p {
list-style-type: lower-latin;
}
ol.q {
list-style-type: lower-roman;
}
<!DOCTYPE html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div>
<font size="6" face="arial" color="light blue">
Aircraft Types
</font>
<ul class="a">
<li>General Aviation (piston-driven engines)</li>
<ol>
<li>Single-Engine Aircraft</li>
<ol class="u">
<li>Tail wheel</li>
<li>Tricycle</li>
</ol>
<li>Dual-Engine Aircraft</li>
<ol class="t">
<li>Wing-mounted engines</li>
<li>Push-pull fuselage-mounted engines</li>
</ol>
</ol>
</ul>
<ul class="a">
<li>Commercial Aviation (jet engines)</li>
<ol>
<li>Dual Engine</li>
<ol class="p">
<li>Wing-mounted engines</li>
<li>Fuselage-mounted engines</li>
</ol>
<li>Tri-Engine</li>
<ol class="q">
<li>Third engine in vertical stabilizer</li>
<li>Third engine in fuselage</li>
</ol>
</ol>
</ul>
</div>
</body>
I have this page: http://www.bkd.com/industries/private-equity/think-differently.htm. Before I implement this throughout the entire site I want to have it workable when resizing a window, looking at it on a phone or tablet.
When you resize the window or look at in a tablet the search bar is overlapping the navigation words in the gray bar. (Industries, Services, Thoughtware, Client Success)
I am needing it all to stay where it is when the window is resized or when looking at it on a tablet.
I apologize in advance for all the HTML. The navigation was built by a previous employee.
CSS
ul.meg-menu {
position:absolute;
padding:0px;
margin: 0px;
line-height:17px;
}
ul.meg-menu li.mgmu {
float:left;
}
ul.meg-menu li.mgmu a.hov1, ul.meg-menu li.mgmu a.hov2, ul.meg-menu li.mgmu a.hov3, ul.meg-menu li.mgmu a.hov4 {
float:left;
padding: 25px 21px 10px 10px;
}
ul.meg-menu li.mgmu div.meg-dd {
display: none;
background:url(/images/common/mdd/mdd-bg.png) no-repeat bottom ;
left:-240px;
padding: 15px 15px 20px 15px;
position: absolute;
top: 77px;
width: 926px;
}
ul.meg-menu li.mgmu div.meg-dd ul {
padding: 0px 10px 0px 0px;
}
ul.meg-menu li.mgmu div.meg-dd h4 {
padding-left: 0px;
line-height: normal;
margin-bottom:5px;
font-weight:bold;
color: #404040;
}
ul.meg-menu li.mgmu div.meg-dd h4 a {
color: #404040;
}
ul.meg-menu li.mgmu div.meg-dd a {
color: #404040;
}
ul.meg-menu li.mgmu div.meg-dd .bd-right {
border-right: solid 1px #cccccc;
}
ul.meg-menu li.mgmu div.meg-dd .bd-bottom {
border-bottom: solid 1px #cccccc;
}
ul.meg-menu li.mgmu div.meg-dd .bd-top {
border-top: solid 1px #cccccc;
}
ul.meg-menu li.mgmu div.meg-dd a:hover {
color: #b32017;
text-decoration:none;
}
ul.meg-menu li.hovering div.meg-dd {
display: block;
}
ul.meg-menu li.hovering.mgmu a.hov1, ul.meg-menu li a.hov1:hover { background: url(/images/common/mdd/services-hover.png) top center no-repeat;}
ul.meg-menu li.hovering.mgmu a.hov2, ul.meg-menu li a.hov2:hover { background: url(/images/common/mdd/industries-hover.png) top center no-repeat;}
ul.meg-menu li.hovering.mgmu a.hov3, ul.meg-menu li a.hov3:hover { background: url(/images/common/mdd/thoughtware-hover.png) top center no-repeat;}
ul.meg-menu li.hovering.mgmu a.hov4, ul.meg-menu li a.hov4:hover { background: url(/images/common/mdd/thoughtware-hover.png) top center no-repeat;}
.mdd-video {font-size:11px; text-align:center;}
.mdd-video p {margin: 0px; padding: 0px;}
HTML
`<div class="clear"></div>
<div class="span-8"> <a class="left" style="padding: 0px 0px 0px 0px; margin-left: 110px;" href="/"><img src="/images/common/header/logo.png" border="0"></a> </div>
<div class="span-0" style="padding:5px 0px 0px 80px">
<ul style="z-index:2000;" class="meg-menu">
<li class="mgmu" ><a class="hov1" href="/services/services.htm"><img alt="Services" src="/images/common/mdd/services.png" style="padding-right:20px" ></a>
<div class="meg-dd">
<div style="width:150px; margin-left:5px" class="span-0 mr-rt-3 ">
<h4 >Audit & Assurance</h4>
<ul>
<li>Assurance</li>
<li>Lease Accounting</li>
</ul>
<h4 ><strong>Tax</strong></h4>
<ul>
<li>Accounting Outsourcing</li>
<li>Estate Tax</li>
<li>International Tax</li>
<li>State & Local Tax</li>
<li>Real Estate Cost Segregation</li>
<li>R&D Tax Credits</li>
<li>Repair Regulations</li>
<li>Transfer Pricing</li>
</ul>
</div>
<div style="width:200px; margin-left:5px" class="span-0 mr-rt-3 ">
<div style="width:715px"> <h4>Advisory </h4></div>
<ul>
<li><strong>Business Transition Services</strong>
<ul>
<li>Mergers & Acquisitions</li>
<li>Company Sales & Divestitures</li>
<li>Management Buyouts</li>
<li>Debt & Equity Financing</li>
<li>Succession Planning & Value</li>
<li>Recapitalizations</li>
<li>Transaction Services</li>
<li>Business Owner Succession</li>
<li>Exit Strategies</li>
<li>ESOP Succession Planning</li>
</ul>
</li>
</ul>
</div>
<div style="width:210px; margin-left:5px" class="span-0 mr-rt-3 ">
<br /><br />
<ul>
<li><strong>Wealth Management</strong>
<ul>
<li>Financial Planning</li>
<li>Retirement Planning</li>
<li>Education Funding</li>
<li>Estate Planning</li>
<li>Investment Management</li>
<li>Charitable Gift Strategies</li>
<li>Benefit Plan Consulting</li>
<li>WealthPlan</li>
<li>Tax Strategies</li>
<li>Risk Management</li>
</ul>
</li>
</ul>
</div>
<div style="width:260px; margin-left:5px" class="span-0 "><br />
<br />
<h4>Employee Benefit Plans</h4>
<h4>Forensics, Investigation, Litigation</h4>
<h4>Enterprise Risk Solutions</h4>
<h4>Information Technology</h4>
<h4>International Services</h4>
<h4>Performance Services</h4>
<h4>Valuation Services</h4>
</div>
</div>
</li>
<li class="mgmu"><a class="hov2" href="/industries/"><img alt="Industries" src="/images/common/mdd/industries.png" style="padding-right:20px"></a>
<div class="meg-dd">
<div style="width:230px; margin-left:5px" class="span-0 mr-rt-3 ">
<h4 >Health Care</h4>
<ul>
<li>Community Health Centers</li>
<li>Compliance & Corporate Integrity</li>
<li>Forecasts & Strategic Planning</li>
<li>Home Care & Hospice</li>
<li>Hospitals</li>
<li>Long-Term Care & Senior Living</li>
<li>Operations & Clinical Consulting</li>
<li>Physician Services</li>
</ul>
<h4 >Manufacturing & Distribution</h4>
<ul>
<li>Operations Consulting</li>
<li>Performance Measurement</li>
</ul>
<h4>Private Equity</h4>
<ul>
<li>Transaction Services</li></ul>
</div>
<div style="width:210px; margin-left:5px" class="span-0 mr-rt-3 ">
<h4 >Energy</h4>
<ul>
<li>Exploration & Production</li>
<li>Oilfield Services</li>
<li>Midstream & Downstream</li>
<li>Power</li>
<li>Vendor Audit Services</li>
</ul>
<h4 >Financial Services</h4>
<ul>
<li>De Novo Banks</li>
<li>Enterprise Risk Management</li>
<li>Financial Restructuring</li>
<li>Internal Audit</li>
<li>Loan Reviews</li>
<li>Profitability Enhancement</li>
<li>Regulatory Compliance</li>
<li>Strategic Financial Planning</li>
<li>Tax Services</li>
</ul>
</div>
<div style="width:220px; margin-left:5px" class="span-0 mr-rt-3 ">
<h4 >Not-for-Profit</h4>
<ul>
<li>Foundations</li>
<li>Membership Organizations</li>
<li>Religious Organizations</li>
</ul>
<h4 >Government</h4>
<ul>
<li>Airport & Transportation Authorities</li>
<li>Municipal & State Government</li>
<li>Public Power & Utilities</li>
<li>Tribal Government</li>
</ul>
<h4>Higher Education</h4>
<ul>
<li>Managing Reputational Risk</li></ul>
<h4 >Construction & Real Estate</strong></h4>
<ul>
<li>Architecture & Engineering</li>
<li>Construction</li>
<li>Real Estate</li>
</ul>
</div>
<div style="width:180px; margin-left:5px" class="span-0 ">
<h4>Dealerships</h4>
<h4>Individuals</h4>
<h4>Insurance Services</h4>
<h4>Retail</h4>
<h4>Service Organizations</h4>
<h4>Technology & Communications</h4>
<h4>Transportation & Logistics </h4>
</div>
</div>
</li>
<li class=" mgmu"><a class="hov3" href="/thought-center/"><img alt="Though Center" src="/images/common/mdd/thoughtware.png" style="padding-right:20px"></a>
<div class="meg-dd">
<div style="width:240px; margin-left:5px" class="span-0 mr-rt-3 ">
<h4>Articles </h4>
<ul style="margin-bottom:5px;">
<li><strong>Industry</strong>
</li>
<li><strong>Tax</strong> </li>
<ul>
<li>State & Local Tax</li>
<li>International Tax</li>
</ul>
<li><strong>Accounting & Auditing</strong> </li>
<li><strong>Advisory</strong>
<ul>
<li>Forensics, Investigation & Litigation</li>
<li>Information Technology</li>
<li>Wealth Management</li>
<li>IT Risk Services</li>
</ul>
</li>
<li><strong>Software</strong> </li>
</ul>
</div>
<div style="width:170px; margin-left:5px" class="span-0 mr-rt-3 ">
<h4>Webinars </h4>
<ul>
<li>Construction & Real Estate</li>
<li>Financial Services</li>
<li>Government</li>
<li>Health Care</li>
<li>Higher Education</li>
<li>Insurance Services</li>
<li>Manufacturing & Distribution</li>
<li>Not-for-Profit</li>
<li> Forensics Institute</li>
<li>Forensics & Valuation</li>
<li>Microsoft Dynamics</li>
<li>Sage Software</li>
</ul>
</div>
<div style="width:150px; margin-left:5px" class="span-0 mr-rt-3 ">
<h4>Blogs</h4>
<ul>
<li>BKD Forensics </li>
<li>Dynamics GP </li>
<li>Sage ERP Insights </li>
</ul>
<h4>Videos</h4>
<ul>
<li>Industry Insights</li>
<li>Market Insights</li>
<li>Technologies</li>
</ul>
</div>
<div style="width:280px; margin-left:5px" class="span-0 ">
<h4>Email Subscriptions</h4>
<h4>Events Calendar</h4>
<h4>Stay Connected</h4>
<h4>Speakers' Bureau</h4>
</div>
</div>
</li>
<li class=" mgmu"><a class="hov4" href="/client-success/"><img alt="Client Success" src="/images/common/mdd/client-success.png" ></a></li>
</li>
</ul>
</div>
<div style="margin-top:25px; float:right" class="span-0 last">
<form action="/search/">
<input type="image" src="/images/common/search/search-icon-new.png" style=" float:left; outline:none" alt="Search">
<input type="text" name="zoom_query" value="Search" style=" background-image:url(/images/common/search/search-field-new.png); background-repeat: repeat-x; margin: 0; line-height:26px; height: 26px; width:200px; color:#666; background-color:#fff; border:none; outline:hidden; border-radius: 7px; float:right; padding: 0px 0px 0 10px; margin-left: 0px;" onFocus="this.value=this.value.replace(/^Search$/, '')">
</form>
</div>
<div class="clear"></div>
<script>
$(document).ready(function() {
function addMega(){
$(this).addClass("hovering");
}
function removeMega(){
$(this).removeClass("hovering");
}
var megaConfig = {
interval: 100,
sensitivity: 4,
over: addMega,
timeout: 100,
out: removeMega
};
$("li.mgmu").hoverIntent(megaConfig)
});
</script>
`
I currently have a side menu. I'd like it if the user hovers over the Manage Contracts button the sub menu then appears. I've created two ul's - the primary menu and a sub menu ul. The reason being because I don't want the sub menu inheriting the styles from the primary menu if that makes sense? However at the moment I can't get the the menu to appear when the mouse is over the Manage Contract button. Any ideas?
the html:
<div id="navbar-side">
<div id="profile-image">
</div>
<div id="menu-search">
<input type="text" name="search" id="search" placeholder="Search..." />
</div>
<ul id="side-menu">
<li>Dashboard</li>
<li>Manage Contracts</li>
<li>Manage Duplicates</li>
<li>PPM Manager</li>
<li>Service User Search</li>
<li>My Subscriptions</li>
<li>Help Centre</li>
</ul>
<ul id="contracts-menu">
<li>General</li>
<li>Settings</li>
<li>Communication</li>
<li>Contract Details</li>
<li>Retail Setup</li>
</ul>
</div>
the css:
#side-menu
{
width:100%;
position:relative;
}
#side-menu li
{
display:block;
border-bottom:solid 1px black;
}
#side-menu a
{
display:block;
border-top:solid 1px white;
padding:18px 0;
}
#side-menu a:hover
{
background-color:Silver;
}
#contracts-menu
{
display:none;
width:200px;
height:300px;
background-color:Aqua;
margin-left:228px;
position:absolute;
top:87px;
}
#contracts-menu li
{
display:block;
}
#contracts-menu a
{
display:block;
}
a#contracts:hover + #navbar-side ul#contracts-menu
{
display:block;
}
That's because a#contracts and div#navbar-side are not siblings!
You can't use + and/or ~ selectors on non-sibling elements.
On the other hand, there's no parent selector in CSS (yet).
You could use JavaScript to achieve this or change your markup structure, as follows:
<li>Manage Contracts
<ul id="contracts-menu">
<li>General</li>
<li>Settings</li>
<li>Communication</li>
<li>Contract Details</li>
<li>Retail Setup</li>
</ul>
</li>
CSS:
a#contracts:hover + ul#contracts-menu {
display:block;
}
JSBin Demo.
Update
But in this case, There's no need to set id attriute on each link/item.
You could nest the sub-menus in each list item and display them as follows:
#side-menu li:hover > ul { /* Select the ul children inside each list-item */
display:block;
}
JSBin Demo #2
If you don't want to use javascript, you could put the ul#contracts-menu inside the list-item that contains the #contracts anchor:
<div id="navbar-side">
<div id="profile-image">
</div>
<div id="menu-search">
<input type="text" name="search" id="search" placeholder="Search..." />
</div>
<ul id="side-menu">
<li>Dashboard</li>
<li id="contracts">
Manage Contracts
<ul id="contracts-menu">
<li>General</li>
<li>Settings</li>
<li>Communication</li>
<li>Contract Details</li>
<li>Retail Setup</li>
</ul>
</li>
<li>Manage Duplicates</li>
<li>PPM Manager</li>
<li>Service User Search</li>
<li>My Subscriptions</li>
<li>Help Centre</li>
</ul>
</div>
Add the id to the list item (instead of the anchor) and then add:
#side-menu li.contracts:hover #contracts-menu { display:block; }
See: http://jsfiddle.net/FmR3f/
I am trying to create a dynamic unordered list that is built for 3 list items however there maybe either one or two items in that list. My problem is that when there are one or two items in UL my contents get shifted up. How can I avoid this ?
HTML:
<html><head>
<title>Dashboard</title>
</head>
<body>
<div id="wrapper">
<div id="colDow">
<div id="colLef">
<ul id="days">
<div id="colRig">
<ul class="format" id="schedule1">
<li> Event 3</li>
<li>test this space</li>
<li>fit everthing and beyond</li>
</ul>
<ul class="format" id="schedule2">
<li> Event 3</li>
<li>test this space</li>
<li>fit everthing and beyond</li>
</ul>
<ul class="format" id="schedule3">
<li> Event 3</li>
<li>test this space</li>
<li>fit everthing and beyond</li>
</ul>
</div><!-- Bottom Right Time -->
</div>
</div>
CSS:
body {
padding:0;
margin:0;
background-color:#000;
font-size:100%;
}
#wrapper {
margin-left:auto;
margin-right:auto;
width:100%;
height:100%;
max-width:2560px;
max-height:1440px;
}
#colDow {
width:55.46%;
/* 710/1280 */
float:left;
height:88.75%;
/* 710/800 */
}
#colLef {
width:35.21%;
/* 250/710 */
float:left;
height:100%;
}
#days {
list-style-type:none;
padding-left:0px;
}
#days li {
font-size:2.25em;
color:#fff;
font-family:'Lato',sans-serif;
font-weight:lighter;
margin:0 0 168px;
background:#575757;
display:block;
text-align:center;
height:40px;
margin-top:6px;
margin-bottom: 168px;
}
#colRig {
/* background:#fff; */
width:63.09%;
float:right;
height:100%;
}
.format {
/* background:red; */
margin-top: 46px;
padding-bottom: 6px;
}
.format li {
color:#fff;
font-family:'Lato',sans-serif;
font-weight:lighter;
font-size:1.5em;
/* font-size: 1.846em; */
height: 52px;
}
If you remove the first occurrence of "Event3" items get shifted up
markup
<div class="event-listing">
<ul>
<li>
<a>List 1</a>
<ul>
<li>
<a>Event 3
</a>
</li>
<li>
<a>test this space
</a>
</li>
<li>
<a>fit everything and beyond
</a>
</li>
</ul>
</li>
<li>
<a>List 2</a>
<ul>
<li>
<a>Event 3
</a>
</li>
<li>
<a>test this space
</a>
</li>
<li>
<a>fit everything and beyond
</a>
</li>
</ul>
</li>
<li>
<a>List 3</a>
<ul>
<li>
<a>Event 3
</a>
</li>
<li>
<a>test this space
</a>
</li>
<li>
<a>fit everything and beyond
</a>
</li>
</ul>
</li>
</u>
</div>
css
.event-listing ul li {
list-style: none;
}
This is what i understood from your menu. Let me know if im wrong
.event-listing ul {
min-height: 100px //set a minimum height
}
Set a minimum height so your list areas won't get shifted up. Sorry code not in tags. I'm mobile right now.
I have a problem with my menu. I only want four menu items to appear at any time, meaning that if there’s an overflow, it’ll be clipped, and the user will have to scroll down.
I tried setting overflow-y, hoping to see it get clipped, but instead, a horizontal scroll bar appears.
HTML
<link rel="stylesheet" href='http://donysukardi.com/ltw/css/blueprint/screen.css' type="text/css" media="screen, projection" />
<link rel="stylesheet" href='http://donysukardi.com/ltw/css/blueprint/print.css' type="text/css" media="print" />
<div class="container">
<div id="menu">
<ul>
<li>profile
<ul>
<li>overview</li>
<li>partners
<ul>
<li>Lim Hong Lian</li>
<li>Teo Su Seam</li>
<li>Marina Baracs</li>
</ul>
</li>
<li>associates
<ul>
<li>Jocelyn Yang Liwan</li>
<li>Tsai Ming Ming</li>
</ul>
</li>
<li>team</li>
</ul>
</li>
<li>projects
<ul>
<li>featured projects
<ul>
<li>HELLO</li>
</ul>
</li>
<li>project list
<ul>
<li>current
<ul>
<li>all</li>
<li>urban</li>
<li>resort</li>
<li>spa</li>
<li>restaurant</li>
<li>others</li>
</ul>
</li>
<li>completed</li>
</ul>
</li>
</ul>
</li>
<li>publications
<ul>
<li>books</li>
<li>magazines</li>
</ul>
</li>
<li>contacts
<ul>
<li>Singapore</li>
<li>Milan</li>
<li>Beijing</li>
</ul>
</li>
</ul>
</div>
</div>
CSS
#menu ul
{
list-style-type:none;
position:absolute;
padding: 5px 0px;
margin:0px;
width:100px;
}
#menu
{
position:relative;
border-top-color:#afafaf;
border-top-style:solid;
border-top-width: thin;
font-size: 11px;
margin-top:5px;
height:80px;
}
#menu ul ul
{
display:none;
position:absolute;
padding:5px 0px;
left:150px;
top:0px;
height:80px;
}
Javascript (jQuery)
$(document).ready(function(){
$('#menu ul li a').click(function(){
if(!$(this).hasClass('current'))
{
var relatives = $(this).parent().siblings();
relatives.find('ul').css('left',150).hide();
relatives.find('.current').removeClass('current');
$(this).siblings().animate({'left':'-=20', 'opacity':'toggle'},'slow');
$(this).addClass('current');
if($(this).attr("href") != "#"){
var url = $(this).attr("href").split('#!')[1];
$('#content').slideUp('slow', function(){$(this).load(url, function(){$(this).slideDown('slow')});})
window.location = base_url+url;
}
}
$(this).parent().siblings().find('.black').removeClass('black');
$(this).addClass('black');
return false;
});
})
Demo on JS Fiddle.
Here is a screenshot: I only want “all”, “urban”, “resort”, and “spa” to appear initially.
Not sure you can limit the number of elements, but you can set the height and set the overflow to auto, so if it's higher then specified width there will be a scrollbar.
<ul class="inner-ul">
<li>all</li>
<li>urban</li>
<li>resort</li>
<li>spa</li>
<li>restaurant</li>
<li>others</li>
</ul>
.inner-ul {
height:50px;
overflow-y: auto;
}
Hard to tell from the question and fiddle (and I can't see the image) but I think you need
overflow-x: auto;
Here's a good resource for overflow: http://www.brunildo.org/test/Overflowxy2.html
Change height to 70px and add "overflow:auto;" to your menu css statement