Lost with complex structure

HTML & CSS
1

Hi,

I’ struggling with a messy wordpress template full of nested class, ids…

What I want to do is an in line menu including a block sub menu

<div id="third" class="widget-area">
<ul class="xoxo">

<li id="nav_menu-3" class="widget-container widget_nav_menu"><div class="menu-secondaire-container">
<ul id="menu-secondaire" class="menu"><li id="menu-item-24" class="menu-item menu-item-type-post_type"><a href="http://localhost/chapitre1">chapitre1</a>
<ul class="sub-menu">
	<li id="menu-item-84" class="menu-item menu-item-type-post_type"><a href="http://localhost/chapitre1/sousmenu1.1">sousmenu1.1</a></li>
	<li id="menu-item-85" class="menu-item menu-item-type-post_type"><a href="http://localhost/chapitre1/sousmenu1.2">sousmenu1.2</a></li>
	<li id="menu-item-83" class="menu-item menu-item-type-post_type"><a href="http://localhost/chapitre1/sousmenu1.3">sousmenu1.3</a></li>
</ul>

</li>
<li id="menu-item-29" class="menu-item menu-item-type-post_type"><a href="http://localhost/chapitre2">chapitre2</a>
<ul class="sub-menu">
	<li id="menu-item-81" class="menu-item menu-item-type-post_type"><a href="http://localhost/chapitre2/sousmenu2.1">sousmenu2.1</a></li>
	<li id="menu-item-87" class="menu-item menu-item-type-post_type"><a href="http://localhost/chapitre2/sousmenu2.2">sousmenu2.2</a></li>
</ul>
</li>
<li id="menu-item-43" class="menu-item menu-item-type-post_type"><a href="http://localhost/chapitre3">chapitre3</a>
<ul class="sub-menu">
	<li id="menu-item-98" class="menu-item menu-item-type-post_type"><a href="http://localhost/chapitre3/sousmenu3.1">sousmenu3.1</a></li>
	<li id="menu-item-99" class="menu-item menu-item-type-post_type"><a href="http://localhost/chapitre3/sousmenu3.2">sousmenu3.2</a></li>
</ul>
</li>

</ul></div></li>					
</ul>
</div><!-- #third .widget-area -->

Yeah, it’s a mess and I can’t edit it as it’s generated by wordpress

I thought a simple code like this would be enough but it doesn’t

#third .menu {
	display: inline;

}	
#third .sub-menu  { 
        display: block;
	width: 130px;
}

I tried many things without success and I suppose it’s an obvious selector thing to fix so any help would be greatly appreciated!

2

I thought a simple code like this would be enough but it doesn’t

You’re making the first-level inner ul inline, but that doesn’t change whatever you’ve got its li’s set to (if they are display: block then your menu won’t look inline, and if they’re floated then it doesn’t matter what the menu itself is set to).


<ul class="xoxo">
  <li><div>
    <ul>
      <li><a href="chapitre1">chapitre1</a>
        <ul class="sub-menu">
          <li><a href="chapitre1/sousmenu1.1">sousmenu1.1</a></li>
          <li><a href="chapitre1/sousmenu1.2">sousmenu1.2</a></li>
          <li><a href="chapitre1/sousmenu1.3">sousmenu1.3</a></li>
        </ul>
      </li>
      <li><a href="chapitre2">chapitre2</a>
        <ul class="sub-menu">
          <li><a href="chapitre2/sousmenu2.1">sousmenu2.1</a></li>
          <li><a href="chapitre2/sousmenu2.2">sousmenu2.2</a></li>
        </ul>
      </li>
      <li><a href="chapitre3">chapitre3</a>
        <ul class="sub-menu">
          <li><a href="chapitre3/sousmenu3.1">sousmenu3.1</a></li>
          <li><a href="chapitre3/sousmenu3.2">sousmenu3.2</a></li>
        </ul>
      </li>
    </ul>
  </div></li>                    
</ul>

Does this help? You want xoxo to be inline (in a row) and the submenus to be blocks?

Why can’t you change the Wordpress code? I thought people could (I dunno, I stay as FAR away from templates as possible… the code above is a good reason why).

3

Problem solved, thanks Stomme poes, I managed to understand what you said about missing float :eye:

#third .menu .menu-item  {
	float: left;
	display: inline;
}
4

xoxo seems to have only one row so it should be the following ul to be inline (ie

But you didn’t state (or I missed it? I tend to do that) what the li’s are set to. You can set your first-inner ul to display inline but since inlines can’t contain blocks, if the li’s (such as <li id=“menu-item-24” class=“menu-item menu-item-type-post_type”>) are non-floated blocks, then it’ll visually look no different. You’ll have to make sure the ul you want to look “inline” has either inline or floated li’s as direct children.

I’m having trouble visualising this menu. Do you have a visual representation?

5

I think you current structure is

.menu .sub-menu .menu-item{

}
.menu .menu-item{

}
6

@Dijup, thanks, you’re right about the structure but I tested it and doesn’t work

@Stomme poes
xoxo seems to have only one row so it should be the following ul to be inline (ie

<ul id="menu-secondaire" class="menu">

)

If I remove the sub menu entries, .menu-item is enough to display it in line but when I add the sub menu, then everything is inline in spite of the .sub-menu display: block code :frowning:

I don’t find the code in wordpress to edit it so I’d like to keep the hacks in the css file if possible

7

Here is a screenshot of what it looks like (I’ve updated the titles but you get the idea)

and what I’d like to do

And I didn’t style others ul, the only thing I modified is the main div for this part

#third {
	clear: both;
	font-size: 12px;

}