WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Need dropdown menu help in CSS (8 posts)

  1. ex_seraphim
    Member
    Posted 10 months ago #

    Since I'm still new to coding, but can create good mock ups in illustrator as well as build a site from the wp back end, we outsourced the skinning of this site. It's running on a custom child theme of Genesis.

    http://0376c44.netsolhost.com/rpsplano/

    I'm suspecting something in the child's CSS is preventing the dropdowns from working, since the menus are already built in the WP back end, they just don't show. Here's the nav section of said CSS. Any help would be appreciated. Thanks.

    /* Header / Primary / Secondary Navigation
    ------------------------------------------------------------ */
    #menu-icon {
    	display:none;
    }
    
    #nav {
    	background:url(images/menu-bg.png) repeat;
    	height: 30px;
    	padding: 0px 15px 0px;
    	font-family:"Times New Roman", Times, serif;
    	width: 100%;
    	max-width: 1400px;
    	position: relative;
    	text-align: center;
    	bottom-margin: 15px;
    }
    
    .menu-primary,
    .menu-secondary,
    #header .menu {
    	margin: 0;
    	padding: 0;
    	overflow: hidden;
    	width: 100%;
    }
    
    .menu-primary li:first-child {
    	border-left:0px;
    }
    
    .menu-primary li,
    .menu-secondary li,
    #header .menu li {
    	float: left;
    	list-style-type: none;
    	text-transform: capitalize;
    	border-left: 1px solid #533627;
    }
    
    #header .menu {
    	float: right;
    	width: auto;
    	text-align: right;
    }
    
    .menu-primary li a,
    .menu-secondary li a,
    #header .menu li a {
    	color: #A6191D;
    	font-size: 18px;
    	text-align: center;
    	padding: 0px 15px 0px;
    	line-height: 30px;
    	position: relative;
    	text-decoration: none;
    }
    .menu-primary li a:hover,{
    
    }
    
    .menu-primary li a:active,
    .menu-primary li a:hover,
    .menu-primary .current_page_item a,
    .menu-primary .current-cat a,
    .menu-primary .current-menu-item a,
    .menu-secondary li a:active,
    .menu-secondary li a:hover,
    .menu-secondary .current_page_item a,
    .menu-secondary .current-cat a,
    .menu-secondary .current-menu-item a,
    #header .menu li a:active,
    #header .menu li a:hover,
    #header .menu .current_page_item a,
    #header .menu .current-cat a,
    #header .menu .current-menu-item a {
    	color: #A6191D;
    }
    
    .menu-primary li li a,
    .menu-primary li li a:link,
    .menu-primary li li a:visited,
    .menu-secondary li li a,
    .menu-secondary li li a:link,
    .menu-secondary li li a:visited,
    #header .menu li li a,
    #header .menu li li a:link,
    #header .menu li li a:visited {
    	-moz-border-radius: 0;
    	-webkit-border-radius: 0;
    	background: none;
    	border-bottom: 1px dotted #333;
    	border-radius: 0;
    	box-shadow: none;
    	color: #777;
    	font-size: 13px;
    	padding: 5px;
    	position: relative;
    	text-transform: none;
    	width: 138px;
    }
    
    .menu-primary li li:last-child a,
    .menu-secondary li li:last-child a,
    #header .menu li li:last-child a {
    	border: none;
    }
    
    .menu-primary li li a:active,
    .menu-primary li li a:hover,
    .menu-secondary li li a:active,
    .menu-secondary li li a:hover,
    #header .menu li li a:active,
    #header .menu li li a:hover {
    	color: #fff;
    }
    
    .menu-primary li ul,
    .menu-secondary li ul,
    #header .menu li ul {
    	-moz-border-radius: 5px;
    	-webkit-border-radius: 5px;
    	background-color: #000;
    	border-radius: 5px;
    	height: auto;
    	left: -9999px;
    	margin: -5px 0 0;
    	padding: 3px 10px 5px;
    	position: fixed;
    	width: 148px;
    	z-index: 9999;
    }
    
    .menu-primary li ul a,
    .menu-secondary li ul a,
    #header .menu li ul a {
    	width: 100%;
    }
    
    .menu-primary li ul ul,
    .menu-secondary li ul ul,
    #header .menu li ul ul {
    	margin: -34px 0 0 149px;
    }
    
    ul.menu li:hover>ul,
    ul.menu li.sfHover ul,
    #header .menu li:hover>ul,
    #header .menu li.sfHover ul {
    	center: auto;
    }
    
    .menu-secondary {
    	background:url(images/menu-bg.png) repeat;
    	height: 30px;
    	padding: 0px 15px 0px;
    	font-family:"Times New Roman", Times, serif;
    	width: 100%;
    	max-width: 1400px;
    	position: relative;
    	text-align: center;
    	bottom-margin: 15px;
    }
    
    /* Primary Navigation Extras
    ------------------------------------------------------------ */
    
    #nav li.right {
    	color: #777;
    	float: right;
    	font-size: 14px;
    	padding: 7px 15px 5px;
    }
    
    #nav li.right a {
    	background: none;
    	border: none;
    	color: #777;
    	display: inline;
    	text-decoration: none;
    }
    
    #nav li.right a:hover {
    	-moz-box-shadow: none;
    	-webkit-box-shadow: none;
    	box-shadow: none;
    	color: #fff;
    	text-decoration: underline;
    }
    
    #nav li.search {
    	padding: 0 10px;
    }
    
    #nav li.rss a {
    	background: url(images/rss.png) no-repeat center left;
    	margin: 0 0 0 10px;
    	padding: 0 0 0 16px;
    }
    
    #nav li.twitter a {
    	background: url(images/twitter-nav.png) no-repeat center left;
    	padding: 0 0 0 20px;
    }
  2. Creatrix
    Member
    Posted 10 months ago #

    .menu-primary li ul,
    .menu-secondary li ul,
    #header .menu li ul {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background-color: #000;
    border-radius: 5px;
    height: auto;
    left: -9999px;
    margin: -5px 0 0;
    padding: 3px 10px 5px;
    position: fixed;
    width: 148px;
    z-index: 9999;
    }

    Try taking out the 'position:fixed' on this rule.

  3. ex_seraphim
    Member
    Posted 10 months ago #

    Perfect. The quick response is much appreciated. I'll mark this resolved, but one more question: I take it I can edit the styling of the drop-down between those same brackets?

  4. Creatrix
    Member
    Posted 10 months ago #

    Yes, that should work.

    Holla if you have any problems though.

  5. ex_seraphim
    Member
    Posted 10 months ago #

    Will do. Thanks again.

  6. ex_seraphim
    Member
    Posted 10 months ago #

    OK, couple questions on styling. Take a look at the site again when you get a chance.

    I tried inline-block and block display in the CSS to stop the shorter-named menus from showing up next to one another while making room for the long ones.

    Also, the drop background scrolls down but then zips right back up. Thanks again in advance.

  7. Creatrix
    Member
    Posted 10 months ago #

    Seems to be working ok now?

  8. ex_seraphim
    Member
    Posted 10 months ago #

    It is, after some tinkering. I wasn't thinking each menu item would be in its own bubble, but that's workable, if not ideal.

Reply

You must log in to post.

About this Topic