Jump to content

Struggling With Css Alignment Of Dropdown Menu


Greywacke
 Share

Recommended Posts

hi there,i have a horizontal menu, with one dropdown submenu on the rightmost item, as can be seen with the screenshots.now my first problem is how do i specify through css that the dark red ul background, wraps around the li elements of the subitem, INCLUDING the bullets.also, how do i get the dark red background to stay on the menu item once the mouse is moving over the submenu items...one last thing - the submenu should be right aligned with the main menu's "More >" list item. why is it left aligned, and where would i change this?the current xhtml, and css for the entire menu structure, is as follows:

<div class="menu">	<div class="quote">“Currently country's golden ticket”<br />The Times Magazine</div>	<ul class="nav">		<li><a href="#">More<img src="images/dnarr.png" class="dnarr" width="9" height="9" border="0" align="middle" /></a>			<ul>				<li><a href="#">First-timers guide</a></li>				<li><a href="#">Fever cartoon strip</a></li>				<li><a href="#">Guide to Cap D'Agde</a></li>				<li><a href="#">Banners and links</a></li>				<li><a href="#" class="last">Contact Fever</a></li>			</ul>		</li>		<li><a href="#">Fever in the media</a></li>		<li><a href="#">Last Party</a></li>		<li><a href="#">Next Party</a></li>		<li><a href="#">About Fever</a></li>	</ul></div>

.menu {	width: 790px;	height: 98px;	float: right;}.menu ul.nav {	clear: both;	font: 16px 'Verdana';	font-weight: 500;	list-style: none;}.menu ul.nav li {	float: right;	margin-left: 5px;}.menu ul.nav a, ul.nav a:visited {	padding: 5px 6px 5px 5px;	display: block;	text-decoration: none;	color: #FFF;	text-shadow: 2px 2px 2px #000000;}.menu ul.nav a:hover, ul.nav a:active, ul.nav a:focus {	background: #621804;	color: #FFF;	text-shadow: 2px 2px 2px #000000;}.menu ul.nav li ul {	display: none;	position: absolute;	overflow: hidden;}.menu ul.nav li:hover ul {	display: block;	overflow-x: hidden;	background: #771d06;	padding: 8px 0px 8px 0px;	box-shadow: 0px 0px 136px 27px rgba(0, 0, 0, 0.21) inset;}.menu ul.nav li ul li {	clear: both;	font: 12px 'Verdana';	font-weight: 200;	list-style: url(images/bull_linkout.png);	float: right;	padding: 0;	margin-left: 30px;}.menu ul.nav li ul li:hover {	clear: both;	font: 12px 'Verdana';	font-weight: 200;	list-style: url(images/bull_linkovr.png);	float: right;	padding: 0;	margin-left: 30px;}.menu ul.nav li ul li a.last {	background: transparent;	}.menu ul.nav li ul li a.last:hover {	background: transparent;	}.menu ul.nav li ul li a {	background: transparent url(images/hr_menu.png) center bottom no-repeat;	padding: 10px 10px 10px 30px;	margin: 0px 0px 0px -30px;	width: 130px;	height: 100%;	color: #fff;	text-decoration: none;}.menu ul.nav li ul li a:hover {	background: transparent url(images/hr_menu.png) center bottom no-repeat;	padding: 10px 10px 10px 30px;	margin: 0px 0px 0px -30px;	width: 130px;	height: 100%;	color: #db8f17;	text-decoration: none;}.dnarr {	position: relative;	z-index: 60;	top: -3px;	left: 5px;	margin: 0px 5px;}:root .dnarr {top: 2px \0/IE9;}@media not screen and (1) { /* OP 11 */.menu ul.nav li ul li {list-style: url(images/bull_linkouto.png);}.menu ul.nav li ul li:hover {list-style: url(images/bull_linkovro.png);}.dnarr {top:3px}}

thanks in advance for the help - not sure how to get this down as the alignment via float is already set and only misaligns the menu items if done as suggested on the sites google returned.also, the current page can be viewed at greywacke.co.za/feverparties/ in windows internet explorer 9, mozilla firefox 8, google chrome 15, apple safari 5 or opera 11.

post-36007-0-77501400-1323363863_thumb.jpg

post-36007-0-83970400-1323363884_thumb.jpg

Edited by Pierre 'Greywacke' du Toit
Link to comment
Share on other sites

alignment was updated cross-browser, with this tiny little script ;)

// JavaScript Documentfunction relocate() {var sub = document.getElementById("more");var pagewidth = document.body.clientWidth;var gutter = (pagewidth - 959) / 2;sub.style.right = gutter + "px";sub.style.width = "170px";return true;}window.onload = function () {return relocate();}window.onresize = function () {return relocate();}

this document can be viewed at http://www.greywacke.co.za/feverparties/ ;)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...