StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POStyling the Thesis dropdown menu with CSS
primarykey
Id
6334423
data
AcceptedAnswerId
0
AnswerCount
1
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2011-06-13T18:14:22.157
FavoriteCount
0
LastActivityDate
2015-03-12T15:44:05.140
LastEditDate
2015-03-12T15:44:05.140
LastEditorUserId
1816580
OwnerUserId
724131
ParentId
0
PostTypeId
1
Score
0
ViewCount
1704
LastEditorDisplayName
text
Body
<p>I'm using the Wordpress Thesis theme which comes with a standard dropdown menu which I want to turn into a two-tier horizontal menu. What I'd like to have is that when you click on a parent item, the children of that parent (but no other children) are visisble.</p> <p>The structure is like this:</p> <pre><code><ul class="menu"> <li class="tab tab-home"><a href="http://dirtydeals.org.uk">Home</a></li> <li class="tab tab-1 current-parent"><a href="http://dirtydeals.org.uk/about/" title="About">About</a>  <ul class="submenu submenu-1"> <li class="item item-1 current"><a href="http://dirtydeals.org.uk/about/subnavigation- page/" title="Subnavigation page">Subnavigation page</a></li> <li class="item item-2"><a href="http://dirtydeals.org.uk/about/sub-page/" title="Sub- page">Sub-page</a></li> </ul>  </li> <li class="tab tab-2"><a href="http://dirtydeals.org.uk/action/" title="action">action</a></li> <li class="tab tab-3"><a href="http://dirtydeals.org.uk/media/" title="Media">Media</a>  <ul class="submenu submenu-1"> <li class="item item-3"><a href="http://dirtydeals.org.uk/media/sample-page-2/" title="Sample Page">Blog</a></li> </ul>  </li> </ul> </code></pre> <p>I've got it working reasonably well, however, the problem is that I can't find a way to specifically target the child items specifically. If I hide 'Blog' when 'About' is viewed, then it also hides the child items of 'About' or hides the whole submenu when one of the children of 'About' is viewed. </p> <p>Here's my CSS:</p> <pre><code>/*Remove the hover drop-down effect*/ .custom .menu ul { position: absolute; visibility: visible; list-style: none; z- index: 110; } /*No clears on this so we can make the submenu horizontal*/ .custom .menu ul li { clear: none; } /*Styling the submenu*/ .custom ul.submenu { margin: 0px 0 0 0; } .custom ul.submenu a { font-size: 1.3em; text-transform: uppercase; padding-right: 10px; } .custom ul.menu li ul.submenu li.item { display: inline; } .custom ul.menu li.current ul.submenu li.item { display: inline; } .custom ul.menu li { border: 1px solid red; } .custom ul.menu li ul.submenu li.item a { } /*Hacking the submenu to make children work when a subpage is viewed*/ .custom ul.menu li ul.submenu li.item a { display: inline; } .custom ul.menu li ul.submenu li.item a { border: 1px solid yellow; } .custom ul.menu li.current-parent ul.submenu { border: 1px solid blue;} .custom ul.menu li.current-parent ul.submenu li.item a { border: 1px solid white; } .custom ul.menu li.current ul.submenu { background-color: #444444; padding: 10px; width: 500px; } .custom ul.menu li.current ul.submenu li.item { display: inline; white-space: nowrap; } .custom ul.menu li.current ul.submenu li.item a { background-color: transparent; display: inline; } .menu ul, .menu ul li { width: 18em; } .custom ul.menu li.current ul.submenu li.item:after { content: "/"; font-size: 14px; } .custom ul.menu li.current ul.submenu li:last-child:after { content: ""; } /*Annoyingly each individual submenu has to be positioned separately*/ .custom ul.menu li.current ul.submenu-1 { position: absolute; left: -110px; } </code></pre> <p>Could someone with a more logical brain and better eye than me have a look please? Thanks!</p> <p>The page is here: <a href="http://dirtydeals.org.uk/about/subnavigation-page/" rel="nofollow">http://dirtydeals.org.uk/about/subnavigation-page/</a></p>
Tags
<css><drop-down-menu><wordpress-theming><wordpress-thesis-theme>
Title
Styling the Thesis dropdown menu with CSS
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USArtjom B.
UserOwnerUserId
1. USPontus
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.