Pure CSS navigation advice.

[MargateSteve]

I have been banging my head against a brick wall searching to see if what I am trying to achieve is actually possible before I start looking at any code. If anyone can advise I would be gratefull!!

 

I use a php script to pull my navigation items out of a database which gives me the following

<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Parent</a>
<ul>
<li><a href="#">Child 1</a></li>
<li><a href="#">Child 2</a>
<ul>
<li><a href="#">2nd Child 1</a></li>
<li><a href="#">2nd Child 2</a></li>
<li><a href="#">2nd Child 3</a></li>
<li><a href="#">2nd Child 4</a></li>
</ul>
</li>
<li><a href="#">Child 3</a></li>
<li><a href="#">Child 4</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a></li>
..
</ul>

My CSS skills are enough to style it adequately but there are a couple of things I want it to do...

 

 

Firstly (and probably easiestly) all sub menu items are fixed with. I would like the width to adjust to the longest item in that sub-menu. I have no idea, over time, how long the longest item is going to be so any fixed-width I use may eventually not be large enough. Also, if a sub-menu only has items of 4 characters, it looks stupid having them in a 200px <li>.

I have tried a few combinations of setting the width to auto and text to nowrap on both the <ul> and <li> but nothing has worked.

 

The second thing I want to do is to have the menu's open with one tap on mobile devices. Once again I had found some examples of this but I also want the parent items to be links, activated by a second tap. I am pretty sure I stumbled across a CSS only method for this a while back (when I wasn't actually looking for it!) but all I can find now are JavaScript solutions.

 

Thanks in advance for any advice.

Steve

[White_Lily]

I can only answer the first question, i dont tend to work with mobile devices so the second question is out of my knowledge.

 

 

as for the width of the sub-nav, try setting the width to something like 100-150px, and set the height to auto, this way anything longer should just stretch to two lines.

[MargateSteve]

as for the width of the sub-nav, try setting the width to something like 100-150px, and set the height to auto, this way anything longer should just stretch to two lines.

 

That is actually the way it is working at the moment. It is ok ish that way but I would really like all items to be equal height. Also, as the site evolves, there may be sub menus that have 3/4/5 items that will span over two lines so there is the risk of the menu looking messily long.

[Mahngiel]

Not sure what problem you're having with the width, i was able to get it to work just fine here: http://jsfiddle.net/Mahngiel/nkf4A/2/

 

For your phone thing, you'd likely need to run preventDefault() and set an action to double-clicking.