nf76 Posted December 22, 2012 Share Posted December 22, 2012 (edited) I am trying to make a pure css dropdown menu on horizontal menu with rounded corners and it is just not looking right ....there is a button hanging in back that i can't seem to override css for dropdown and the position is not right. any suggestions on improving this code would be appreciated? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>horizontal main nav submenu</title> <style>/*Global styles ----*/ /*limited reset*/html, body, div, section, article, aside, header, hgroup, footer, nav, h1, h2, h3, h4, h5, h6, p, blockquote, address, time, span, em, strong, img, ol, ul, li, figure, canvas, video, th, td, tr {margin: 0;padding: 0;border: 0;vertical-align:baseline;font: inherit;} /*html5 display rule*/address, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, nav, menu, nav, section, summary {display: block;} body { width: 960px;position: relative;margin: 0 auto;} /*micro-clearfix by Nicolas Gallagher http://nicolasgallag...learfix-hack/*//* For modern browsers */.cf:before,.cf:after { content:""; display:table;}.cf:after { clear:both;}/* For IE 6/7 (trigger hasLayout) */.cf { zoom:1;} .skip {position: absolute;left: -2000em;}/*horizontal nav*/.pageNav nav{height:50px;} .pageNav ul{ font-family: Arial, sans-serif; font-weight: bold; float:left; text-align:center; text-transform: uppercase; margin: 50px 0; padding: 0 0 0 10px; list-style-type: none; font-size: 13px; background: rgb(71,129,192); height: 40px; width:100%; -moz-border-radius: 10px; border-radius: 10px; border-top: 2px solid #67caf3; border-left: 2px solid #67caf3; border-bottom: 2px solid #3c4179; border-right: 2px solid #3c4179;} .pageNav li{float:left;width:130px;height:40px;position:relative;margin-left:20px; } .pageNav li a{display:block;text-decoration:none;color:#daa521;line-height:40px;} .pageNav li a:hover, .topmenu li:hover a {color:#fff;background:rgba(59,103,176,0.8);height:40px;padding-top:10px;position:relative;top:-10px;-moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } .pageNav a.current, .pageNav a.current:hover, .topmenu li:hover a.current{color:#fff;background:rgba(59,103,176,0.8);padding-top:5px;position:relative;top:-10px;-moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;border-bottom:2px solid #192658;cursor:default;} /*dropdown menu*/.pageNav ul.submenu {float:none;font-size:0.85em;-moz-border-radius:0 0 0 0;border-radius:0 0 0 0;width:100%;height:40px;position:absolute;top:0;left:0;opacity:0;-moz-transition: opacity 0.5s ease-in-out;-webkit-transition: opacity 0.5s ease-in-out;-o-transition: opacity 0.5s ease-in-out;transition: opacity 0.5s ease-in-out;} .pageNav li.current ul.submenu, .pageNav nav:hover li.current ul.submenu:hover, .pageNav nav:hover li.current:hover ul.submenu{float:none;color:#fff;background:rgba(59,103,176,0.8);float:none;left:0;opacity:1;} .pageNav nav:hover li:current ul.submenu{ left:-9000px;} .pageNav .topmenu li:hover ul{left:0;opacity:1;} .pageNav ul.submenu li a{background:rgba(59,103,176,0.8);border-bottom:1px solid white;whitespace:nowrap;-moz-border-radius:0 0 0 0; border-radius:0 0 0 0; } .pageNav ul.submenu li a:hover{color:#daa521;background:rgba(59,103,176,0.8);-moz-border-radius:0;border-radius:0;}*/</style> </head> <body><br/><br/><br/><br/><a href="#mainContent" title="skip to main page content" class="skip">Skip to main content</a><nav class="cf"><nav class="pageNav" role="navigation"><ul class="topmenu"><li><a href="horizontal_navbar_csssubmenu.htm" class="current">HOME</a></li><li><a href="#">ACCOMODATIONS</a></li><li><a href="#" >PLAN EVENTS</a><ul class="submenu"><li><a href="#">WEDDINGS</a></li><li><a href="#">BUSINESS MEETINGS</a></li></ul></li><li><a href="#">RECREATION</a></li><li><a href="#">DINING</a></li><li><a href="#">LOCATION</a></li></ul></nav></nav></body></html> Edited December 23, 2012 by newbie nf Link to comment Share on other sites More sharing options...
Krewe Posted December 22, 2012 Share Posted December 22, 2012 Screenshot or something might help... Again, like I've stated in other posts, a lot of us are extremely lazy and won't put your code into out editors to view it. Link to comment Share on other sites More sharing options...
nf76 Posted December 23, 2012 Author Share Posted December 23, 2012 Sorry,Here's a screenshot of what it looks like. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now