Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Please help make my submenu look more like my menu

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #157019

    HTML

    <!-- Header
       ================================================== -->
    
          <div class="row">
    
             <div class="col full">
    
                <div class="logo">
                   <a href="#"><img alt="" src="images/logo.png"></a>
                </div>
    
                <nav id="nav-wrap">
    
                   <a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
                    <a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a>
    
                   <ul id="nav" class="nav">
                       <li><a href="#intro">Home</a></li>
                       <li><a href="#services">Services</a></li>
                       <li><a href="#portfolio">Gallery</a></li>
                       <li><a href="#journal">Blog</a></li>
                      <li><a href="#about">About Us</a></li>
                      <li><a href="#contact">Contact</a></li>
    
    
    *   [Cakes by Occasion][1] 
        *   [Anniversary Cakes][1]
        *   [Baby Shower Cakes][1]
        *   [Birthday Cakes][1]
        *   [Kids Birthday Cakes][1]
        *   [Engagement Cakes][1]
        *   [Wedding Cakes][1]
    *   [Cakes by Style][1] 
        *   [3D Cakes][1]
        *   [Customised Cakes][1]
        *   [Designer Cakes][1]
        *   [Photo Birthday Cakes][1]
        *   [Theme Cakes][1]
        *   [Custom Cupcakes][1]
    
                   </ul>
    
                </nav>
    
             </div>
    
          </div>
    
    
    <!-- Header End -->`
    
    CSS
    
    `/* primary navigation --------------------------------------------------------------------- */
    
    nav-wrap ul, #nav-wrap li, #nav-wrap a {
    
        margin: 0;
        padding: 0;
        border: none;
        outline: none;
    
    
    }
    
    ul#nav ul.sub-menu { padding:0; margin: 0; }
    
    /* nav-wrap */
    
    nav-wrap {
    
        position: relative;
    
    
    font: 13px opensans-regular, sans-serif; float: left; }
    
    /* hide toggle button */
    
    nav-wrap > a { display: none; }
    
    ul#nav { min-height: 54px; width: auto;
    
    /* left align the menu */ text-align: left; } ul#nav li { position: relative; list-style: none; height: 54px;
    
    display: inline-block; }
    
    ul#nav ul.sub-menu li { list-style-type: none; display: inline-block; }
    
    ul#nav > li.active a { background: #11ABB0; color: #fff !important; }
    
    /* Links */ ul#nav li a { display: block; padding: 0 14px; line-height: 54px; text-decoration: none; text-align: left; color: #fff;
    
        -webkit-transition: color .2s ease-in-out;
        -moz-transition: color .2s ease-in-out;
        -o-transition: color .2s ease-in-out;
        -ms-transition: color .2s ease-in-out;
        transition: color .2s ease-in-out;
    
    
    }
    
    ul#nav li ul.sub-menu li a { text-decoration: none; color: #fff; background: #666; padding: 5px; display:inline-block; }
    
    ul#nav li ul.sub-menu { display:none; position: absolute; top: 30px; left: 0; width: 100px; }
    
    ul#nav li:hover ul.sub-menu { display:block; }
    
    ul#nav li a:active { background-color: transparent !important; } ul#nav li:hover > a, ul#nav li.active a { color: #11ABB0; }`
    
    #157065
    Paulie_D
    Member

    Please make a Codepen rather than just posting code.

    #157066
    Alex
    Participant

    Go to codepen.com, markup the HTML and CSS, come back with a link, maybe someone will help…

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.