Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Sep 2013
    Posts
    13
    Thanks
    6
    Thanked 0 Times in 0 Posts

    CSS Horizontal sub menu

    Hey everyone! Thanks for looking.

    I'm having trouble with editing a CSS code for a menu.

    I would like to have a horizontal sub menu while there is a vertical sub menu right now.

    Could someone tell what I have to change in this code in order to get a horizontal sub menu?


    Code:
    /* Navigation Menu */
    .main-navigation {
    	margin-top: 0;
    	text-align: right;
    	max-width:80%;
    	float:right;
    }
    .main-navigation ul.nav-menu {
    	border:none;
    }
    .main-navigation li a {
    		border-bottom: 0;
    		color: #6a6a6a;
    		text-transform: none;
    		white-space: nowrap;
    		padding: 0 20px;
    		padding: 0 0.5555rem ;
    		height:80px;
    		height:6rem;
    		line-height:10.5;
    	}
    .main-navigation li a:hover {
    		color: #adadad;
    		font-weight: normal;
    		/*background-color:#FBFBFB;*/
    		border-bottom:2px solid #33C;
    		height:80px;
    		height:5.7143rem;
    		line-height:6.5;
    	}
    .main-navigation li {
    		padding: 0 1px 0 0;
    		padding: 0 0.071428571rem 0 0;
    		position: relative;
    		margin:0;
    		
    	}
    .main-navigation .current-menu-item > a,
    .main-navigation .current-menu-ancestor > a,
    .main-navigation .current_page_item > a,
    .main-navigation .current_page_ancestor > a {
    		color: #adadad;
    		font-weight: normal;	
    		border-bottom:2px solid #33C;
    }
    /*2nd Level, 3rd...nth level menus*/
    ul.sub-menu{
    display: inline;
    }
    .main-navigation ul li ul li a{
    	display: inline;
    	height: 20px;
    	line-height:20px;
    	text-indent: 10px;
    	text-align:left;
    	font-size: 0.9em;
    	text-transform:capitalize;
    }	
    .main-navigation ul li ul li a:hover{
    	font-weight:normal;
    	height: 20px;
    	line-height:20px;	
    }
    This is my first post by the way! Awesome forum
    Last edited by VIPStephan; 09-24-2013 at 07:10 PM. Reason: added code BB tags

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Please post your HTML as well.
    PS: Use [CODE][/CODE] tags to wrap your code while posting here. You may edit your original post too.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Thadude128 (09-25-2013)

  • #3
    New to the CF scene
    Join Date
    Sep 2013
    Location
    Noida, Chandigarh
    Posts
    4
    Thanks
    0
    Thanked 1 Time in 1 Post
    please post your html also

  • Users who have thanked balkarkalsi for this post:

    Thadude128 (09-25-2013)

  • #4
    New Coder
    Join Date
    Sep 2013
    Posts
    13
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by balkarkalsi View Post
    please post your html also
    Thank you guys! For the replies.

    Well it's hard for me cause it's an actual template for wordpress, that i'm editing.

    This belongs to the menu:

    Code:
    	
    
    <nav id="site-navigation" class="main-navigation" role="navigation">
    			<h3 class="menu-toggle"><?php _e( 'Menu', 'jaguza' ); ?></h3>
    			<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'jaguza' ); ?>"><?php _e( 'Skip to content', 'jaguza' ); ?></a>
    			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
    		</nav><!-- #site-navigation -->
    What to do?

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    This belongs to the menu:
    That's not pure HTML, it contains unparsed PHP.
    Take the parsed output from your browser's view source option and paste here. Or better a post a link to your page.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Thadude128 (09-25-2013)

  • #6
    New Coder
    Join Date
    Sep 2013
    Posts
    13
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    That's not pure HTML, it contains unparsed PHP.
    Take the parsed output from your browser's view source option and paste here. Or better a post a link to your page.
    Hey, thanks again.

    Here it is:

    Code:
    <nav id="site-navigation" class="main-navigation" role="navigation">
    <a href="/">
    <h3 class="menu-toggle">Menu</h3>
    </a>
    <a class="assistive-text" title="Skip to content" href="#content">Skip to content</a>
    <div class=" responsiveSelectContainer">
    <ul id="menu-menu-2" class="nav-menu responsiveSelectFullMenu">
    <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-57">
    <a href="http://www.em.onlinemetclixxoo.nl/">Home</a>
    </li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-56">
    <a href="http://www.em.onlinemetclixxoo.nl/?page_id=2">Magazine</a>
    <ul class="sub-menu">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-90">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-89">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-88">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-87">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-86">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-85">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-84">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-83">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-82">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-81">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-80">
    </ul>
    </li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-55">
    <a href="http://www.em.onlinemetclixxoo.nl/?page_id=8">Deelnemers</a>
    </li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-54">
    <a href="http://www.em.onlinemetclixxoo.nl/?page_id=20">Events</a>
    </li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-53">
    <a href="http://www.em.onlinemetclixxoo.nl/?page_id=23">Boektips</a>
    </li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-52">
    <a href="http://www.em.onlinemetclixxoo.nl/?page_id=25">Contact</a>
    <ul class="sub-menu">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-120">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-119">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-118">
    </ul>
    </li>
    </ul>
    <select class="responsiveMenuSelect">
    </div>
    </nav>

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Try
    Code:
    .site-header {
        margin-bottom: 3rem;
        min-height: 8rem;
        padding: 0;
        position: relative;
    }
    .main-navigation li {
        margin: 0;
        padding: 0 0.0714286rem 0 0;
       /* position: relative;*/
    }
    .main-navigation li {
        margin: 0 2.85714rem 0 0;
       /* position: relative;*/
    }
    .main-navigation li ul {
        display: none;
        left: 0;
        margin: 0;
        padding: 0;
        position: absolute;
        top: 7em;
        width: 100%;
        z-index: 1;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Thadude128 (09-25-2013)

  • #8
    New Coder
    Join Date
    Sep 2013
    Posts
    13
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Hey, I forgot a part of CSS. That didn't do the trick cause they use some css in an other theme.

    Check this out:

    Code:
    .main-navigation ul.nav-menu,
    	.main-navigation div.nav-menu > ul {
    		border-bottom: 1px solid #ededed;
    		border-top: 1px solid #ededed;
    		display: inline-block !important;
    		text-align: left;
    		width: 100%;
    	}
    	.main-navigation ul {
    		margin: 0;
    		text-indent: 0;
    	}
    	.main-navigation li a,
    	.main-navigation li {
    		display: inline;
    		text-decoration: none;
    	}
    	.main-navigation li a {
    		border-bottom: 0;
    		color: #6a6a6a;
    		line-height: 3.692307692;
    		text-transform: uppercase;
    		white-space: nowrap;
    	}
    	.main-navigation li a:hover {
    		color: #000;
    	}
    	.main-navigation li {
    		margin: 0 40px 0 0;
    		margin: 0 2.857142857rem 0 0;
    		position: relative;
    	}
    	.main-navigation li ul {
    		display: none;
    		margin: 0;
    		padding: 0;
    		position: absolute;
    		top: 100%;
    		z-index: 1;
    	}
    	.main-navigation li ul ul {
    		top: 0;
    		left: 100%;
    	}
    	.main-navigation ul li:hover > ul {
    		border-left: 0;
    		display: block;
    	}
    	.main-navigation li ul li a {
    		/*border-bottom: 1px solid #ededed;
    		font-size: 11px;
    		font-size: 0.785714286rem;
    		line-height: 2.181818182;
    		padding: 8px 10px;
    		padding: 0.571428571rem 0.714285714rem;
    		width: 180px;
    		width: 12.85714286rem;*/
    	}
    	.main-navigation li ul li a:hover {
    		/*background: #e3e3e3;
    		color: #444;*/
    	}
    	.main-navigation .current-menu-item > a,
    	.main-navigation .current-menu-ancestor > a,
    	.main-navigation .current_page_item > a,
    	.main-navigation .current_page_ancestor > a {
    		color: #636363;
    		font-weight: bold;
    		
    	}
    	.menu-toggle {
    		display: none;
    	}
    This is how it looks right now:

    http://tinypic.com/r/72rmg4/5

  • #9
    New Coder
    Join Date
    Sep 2013
    Posts
    13
    Thanks
    6
    Thanked 0 Times in 0 Posts
    And this is the sub menu that i'm trying to make; http://tinypic.com/r/ziog03/5

  • #10
    New Coder
    Join Date
    Sep 2013
    Posts
    13
    Thanks
    6
    Thanked 0 Times in 0 Posts
    I did it, thanks for your help man. Great!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •