WordPress.org

Ready to get started?Download WordPress

Forums

Two columns dropdown menu with single columns sub menus (3 posts)

  1. zentili
    Member
    Posted 1 year ago #

    Hi, the title says it all. What i am trying to do here is a dropdown menu with two columns BUT only on the first level pages, the subpages should be one column normal menu!

    here the site
    http://daylightsite.altervista.org/wordpress/

    here the code managing my dropdown menu (the one from twentyeleven with an addition at the top to make it 200%)

    #access ul ul {
     width: 200%;
     top: 30px;
    }
    #access li li a {
     display: block;
     overflow: hidden;
     /*You need to add a height, otherwise some times with larger
      * heights will push down others. It will basically look messy with
      * large gaps.
     */
     width: 100%;
     height: 20px;
    }
    #access {
    	background: #222; /* Show a solid color for older browsers */
    	background: -moz-linear-gradient(#252525, #0a0a0a);
    	background: -o-linear-gradient(#252525, #0a0a0a);
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
    	background: -webkit-linear-gradient(#252525, #0a0a0a);
    	-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    	-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    	box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    	clear: both;
    	display: block;
    	float: left;
    	margin: 0 auto 6px;
    	width: 100%;
    }
    #access ul {
    	font-size: 13px;
    	list-style: none;
    	margin: 0 0 0 -0.8125em;
    	padding-left: 0;
    
    }
    #access li {
    	float: left;
    	position: relative;
    
    }
    #access a {
    	color: #eee;
    	display: block;
    	line-height: 3.333em;
    	padding: 0 1.2125em;
    	text-decoration: none;
    }
    #access li ul {
    	-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    	-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    	box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    	display: none;
    	float: left;
    	margin: 0;
    	position: absolute;
    	top: 3.333em;
    	left: 0;
    	width: 376px;
    	z-index: 99999;
    }
    #access ul ul ul {
    	left: 100%;
    	top: 0;
    }
    #access ul ul a {
    	background: #f9f9f9;
    	border-bottom: 1px dotted #ddd;
    	color: #444;
    	font-size: 13px;
    	font-weight: normal;
    	height: auto;
    	line-height: 1.4em;
    	padding: 10px 10px;
    	width: 168px;
    }
    #access li:hover > a,
    #access ul ul :hover > a,
    #access a:focus {
    	background: #efefef;
    }
    #access li:hover > a,
    #access a:focus {
    	background: #f9f9f9; /* Show a solid color for older browsers */
    	background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
    	background: -o-linear-gradient(#f9f9f9, #e5e5e5);
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
    	background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
    	color: #373737;
    }
    #access ul li:hover > ul {
    	display: block;
    }
    #access .current-menu-item > a,
    #access .current-menu-ancestor > a,
    #access .current_page_item > a,
    #access .current_page_ancestor > a {
    	font-weight: bold;
    }
  2. zentili
    Member
    Posted 1 year ago #

    i think it's not so clear.. well i want the drop down menu that comes when you mouseover "Recensioni" at the top to be two columns (200% wide) but its submenus must be only one column! (normal width). I really need help! Thanks!

  3. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    For CSS-specific issues, consider CSS-specific forums.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.