CODEWITHSUNDEEP
cssnavigationstylesdrop-down-menu
talkingD0G
talkingD0G

Reputation: 413

CSS Trouble on Dropdowns

uMy child pages are showing up in a horizontal line under the parent page link in the navigation. I can't figure out where the css is wrong. You can see what I'm talking about here (the links under Sample Page are the ones in question): http://sitetest3.talktothedogs.com.

HTML for Navigation (which is auto-generated by WP)

<div id="nav">
<div class="menu">
<ul>
   <li class="current_page_item"><a href="http://sitetest3.talktothedogs.com/" title="Home">Home</a></li>
   <li class="page_item page-item-2"><a href="http://sitetest3.talktothedogs.com/?page_id=2">Sample Page</a>
      <ul class='children'>
         <li class="page_item page-item-4"><a href="http://sitetest3.talktothedogs.com/?page_id=4">Testing page 2</a></li>
         <li class="page_item page-item-6"><a href="http://sitetest3.talktothedogs.com/?page_id=6">Testing page 1</a></li>
      </ul>
   </li>
</ul>
</div>
</div>

My CSS Code

.menu, .menu ul { margin:0; padding:0; list-style:none; height:29px; text-align:center; }
.menu a { color:#fff; display:block; padding-left:15px; padding-right:15px; padding-bottom:0px; }
.menu a:hover { color:#000; display:block; text-decoration:none; }
.menu li { float:left; margin:0; padding: 0px; }
.menu li li { float:left; margin: 0 0 0 5px; padding:0; width:130px; }
.menu li ul.submenu li { display:block; position:absolute; left:0; }
.menu li li a, .menu li li a:link, .menu li li a:visited { background:#a82652; width:150px; float:none; margin:0; padding: 4px 10px 5px 10px; color:#fff; }
.menu li li a:hover, .menu-header li li a:active { background:#000; width:150px; float: none; margin: 0; padding: 4px 10px 5px 10px; color:#fff; }
.menu li ul { position:absolute; width:10em; left:-999em; padding-top:13px; z-index:1; }
.menu li:hover ul { left:auto; display:block; }
.menu li:hover ul, #menu li.sfhover ul { left: auto; }
.menu li.current_page_item a { } 
.menu li.current_page_item a:hover{ }

Any help would be appreciated. Thanks in advance!

Upvotes: 0

Views: 58

Answers (2)

Virendra
Virendra

Reputation: 2553

Change your CSS as follows:

.menu li a{ margin-bottom:13px;}
.menu li li { float:none; margin: 0; padding:0; width:130px; }

Here is how this would look
Here is how this would look

Upvotes: 1

Marc B
Marc B

Reputation: 360572

Your first line in the CSS: 

.menu, .menu ul { ... }

is setting the height of both the <div class="menu"> AND the <ul> within that .menu to the same height. The entire menu is constrained to a container that's 29px high.

Upvotes: 0

Related Questions