UL Menu with Children

  • Resolved lucaskeiser

    (@lucaskeiser)


    13 years, 11 months ago

    I am trying to create the css for this and nothing is working right. This is nothing more than the built-in pages widget. I need the initial UL to be aligned to the left with any children aligned to the right. I also need the borders to be the same. For whatever reason I am absolutely stumped.

    https://keisermedia.com/sample/menu.png

Viewing 4 replies - 1 through 4 (of 4 total)

  • Its always considerate to post a pic but a link to the offending site allows helpers to see the code and the css……….

    Thread Starter lucaskeiser

    (@lucaskeiser)

    Like I said, the styling is for the Pages widget that comes pre-packaged with WordPress. Everything I have tried fails miserably.

    <div id="pages-3" class="widget widget_pages"><h3>Pages</h3>		<ul>
			<li class="page_item page-item-2"><a href="https://localhost:8888/dummypress/?page_id=2" title="About">About</a></li>
<li class="page_item page-item-163"><a href="https://localhost:8888/dummypress/?page_id=163" title="About">About</a></li>
<li class="page_item page-item-153"><a href="https://localhost:8888/dummypress/?page_id=153" title="Contact Us">Contact Us</a>
<ul class='children'>
	<li class="page_item page-item-27"><a href="https://localhost:8888/dummypress/?page_id=27" title="Our Location">Our Location</a></li>
</ul>
</li>

<li class="page_item page-item-151"><a href="https://localhost:8888/dummypress/?page_id=151" title="Links">Links</a></li>
<li class="page_item page-item-155"><a href="https://localhost:8888/dummypress/?page_id=155" title="News">News</a>
<ul class='children'>
	<li class="page_item page-item-147"><a href="https://localhost:8888/dummypress/?page_id=147" title="History">History</a></li>
	<li class="page_item page-item-142"><a href="https://localhost:8888/dummypress/?page_id=142" title="Our Company">Our Company</a></li>
	<li class="page_item page-item-144"><a href="https://localhost:8888/dummypress/?page_id=144" title="Our Staff">Our Staff</a>
	<ul class='children'>
		<li class="page_item page-item-29"><a href="https://localhost:8888/dummypress/?page_id=29" title="Employment Opportunities">Employment Opportunities</a></li>

	</ul>
</li>
</ul>
</li>
<li class="page_item page-item-149"><a href="https://localhost:8888/dummypress/?page_id=149" title="Support">Support</a></li>
		</ul>
		</div>
    .widget{
	position: relative;
}

.widget ul{
	position: absolute
}

.widget ul li{
	border-top: 1px solid #ddd;
}

.widget ul li a{
	display: block;
	float: left;
	clear: both;
	padding: 0 auto 0 0;
}

.widget ul ul{
	position: relative;
	display: block;
	border-top: 1px solid #ddd;
}

.widget ul ul li{
	border-top: 0;
}
.widget ul ul li a{
	display: block;
	float: right;
	clear: both;
	padding: 0 0 auto 0;
}

    there really is no need to post css here
    what all helpers here want is a link to the blog in question
    then using firefox tools we can not only see the code but test the solution live in our browsers
    if u dont post a link yr chance of real assistance plummets

    but menu children are gonna be in ul li ul li

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘UL Menu with Children’ is closed to new replies.