Jump to content

nf76

Members
 View Profile  See their activity

  • Posts

    4

  • Joined

  • Last visited

nf76's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. nf76
    Sorry,Here's a screenshot of what it looks like.
  2. nf76
    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>
×
×
  • Create New...