WordPress.org

1. ceomr
   Member
   Posted 7 months ago #
   

   How do I get the Submenu floating right?

   Thanks for your help!

   I want it this way:
   http://www.salz-tv.at/submenu.png

   Here is my code:

   Header.php
   

   <div id="menu">
   		<div id="topnav">
   
   		<?php wp_nav_menu('menu=narzissenfest'); ?>
   
   		</div>
   
   	</div>

   CSS-menu
   

   #topnav {
   	margin: 0;
   	padding: 0;
   	height:34px;
   	line-height:34px;
   	font-family: Arial, Helvetica, sans-serif;
   	font-size: 11pt;
   	}
   
   #topnav ul {
   	float: right;
   	width:680px;
   	list-style: none;
   	padding: 0 0 0 0;
   	margin: 0;
   	text-align: left;
   	}
   
   #topnav li {
   	margin: 0 0 0 5px;
   	padding: 0 0 0 0;
   	float: right;
   	background: #FFFFFF;
   	color: #4f6c52;
   	position: relative;
   	}
   
   #topnav li.current_page_item {
   	height:34px;
   	line-height:34px;
   	color: #FFFFFF;
   	background: #e5f0e7;
   	}
   
   #topnav li li {
   	margin: 0;
   	padding-left: 5px;
   	background: #e5f0e7;
   	font-size: 11pt;
   	}
   
   #topnav li a, #topnav li a:link, #topnav li a:visited {
   	text-decoration: none;
   	display: block;
   	padding: 0px 10px;
   	}
   
   #topnav li li a, #topnav li li a:link, #topnav li li a:visited {
   	}
   
   #topnav li a:hover, #topnav li a:active {
   	}
   
   #topnav li a:hover, #topnav li a:active, #topnav li ul {
   	background-image:none;
   	background:#e5f0e7 !important;
   	}
   
   #topnav li ul {
   	float:none;
   	z-index:9999;
   	position: absolute;
   	left: -999em;
   	height: auto;
   	width: 230px;
   	margin: 0;
   	padding:0;
   	color:#fff;
   	}
   
   #topnav li ul a,
   #topnav li ul a:link,
   #topnav li ul a:visited {
   	background-image:none;
   	padding: 0px 5px;
   	width: 220px;
   	}
   
   #topnav li ul a:hover,
   #topnav li ul a:active {
   	background-image:none;
   	color:#fff;
   	background:#4f6c52 !important;
   	}
   
   #topnav li ul ul {
   	margin: -38px 0 0 230px;
   	}
   
   #topnav li:hover ul ul, #topnav li:hover ul ul ul, #topnav li.sfhover ul ul, #topnav li.sfhover ul ul ul {
   	left: -999em;
   	}
   
   #topnav li:hover ul, #topnav li li:hover ul, #topnav li li li:hover ul, #topnav li.sfhover ul, #topnav li li.sfhover ul, #topnav li li li.sfhover ul {
   	left: auto;
   	}
   
   #topnav li:hover, #topnav li.sfhover { width:auto;
   	}

2. alchymyth
   The Sweeper & Moderator
   Posted 7 months ago #
   

   please post a live link to your site;

   or use a browser inspection toool to investigate the formatting of the menu;

   or post the question at a css forum http://csscreator.com/forum

3. ceomr
   Member
   Posted 7 months ago #
   

   here is my link: http://www.narzissenfest.at/de/

4. alchymyth
   The Sweeper & Moderator
   Posted 7 months ago #
   

   style.css (line 207);

   change from:
   

   #topnav li:hover ul, #topnav li li:hover ul, #topnav li li li:hover ul, #topnav li.sfhover ul, #topnav li li.sfhover ul, #topnav li li li.sfhover ul {
   	left: auto;
   	}

   to:
   

   #topnav li:hover ul, #topnav li li:hover ul, #topnav li li li:hover ul, #topnav li.sfhover ul, #topnav li li.sfhover ul, #topnav li li li.sfhover ul {
   	left: auto; right: -10px;
   	}

   adjust the 'right' value.

5. ceomr
   Member
   Posted 7 months ago #
   

   Perfekt that's it!

   Thank you! cheers ceomr

Reply

You must log in to post.