- This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
-
AuthorPosts
-
November 24, 2013 at 6:42 pm #157019Historical Forums UserParticipant
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; }`
November 24, 2013 at 11:05 pm #157065Paulie_DMemberPlease make a Codepen rather than just posting code.
November 24, 2013 at 11:38 pm #157066AlexParticipantGo to codepen.com, markup the HTML and CSS, come back with a link, maybe someone will help…
-
AuthorPosts
Viewing 3 posts - 1 through 3 (of 3 total)
- The forum ‘CSS’ is closed to new topics and replies.