WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Submenu on the right side (5 posts)

  1. ceomr
    Member
    Posted 1 year 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 1 year 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 1 year ago #

  4. alchymyth
    The Sweeper & Moderator
    Posted 1 year 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 1 year ago #

    Perfekt that's it!

    Thank you! cheers ceomr

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.