Hi all! I was wondering if posting here or in wordpress-related section.. but i thought here would have fit better. By the way. I've got this css dropdown menu made starting from wordpress theme's one, then i was trying to make the first dropdown (not the sub-menus) as big as the page content, as it would stretch into the white area just nearby the sidebar when it comes out from mouseover.. I hope it's clear what i mean: when you mouseover on "Recensioni", the dropdown covers the entire white area under him without covering the sidebar. I think i should say him to have a size relative to #page and not to its parent but wasn't having success. Here's the cod for my menu, hope for some help in this!
#access ul ul { background: none; } #access { background: #222; /* Show a solid color for older browsers */ background: -moz-linear-gradient(#040300, #0a0a0a); background: -o-linear-gradient(#040300, #0a0a0a); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#040300), to(#0a0a0a)); /* older webkit syntax */ background: -webkit-linear-gradient(#040300, #0a0a0a); -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px; -moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px; box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px; border-bottom: 3px solid #990000; clear: both; display: block; float: left; margin: 0 auto 6px; width: 100%; } #access ul { font-size: 13px; list-style: none; margin: 0 0 0 -0.8125em; padding-left: 0; font-weight: bold; } #access li { float: left; position: relative; } #access a { color: #eee; display: block; line-height: 3.1em; padding: 0 1.2125em; text-decoration: none; } #access li ul { display: none; float: left; margin: 0; position: absolute; top: 3.1em; left: 0; width: 672px; z-index: 998; } #access li ul ul { display: none; float: center; margin: 0; position: absolute; top: 3.1em; left: 0; width: 168px; z-index: 998; text-align:center; } #access ul ul ul { left: -25%; top: 2.7em; border-radius:20%; } #access ul ul a { box-shadow: none; /* background: #f9f9f9;*/ background: rgba(0,0,0,.94); border-bottom: none; border-left: none; border-top: 1px dotted rgba(40,40,40,1); border-right: 1px dotted rgba(40,40,40,1); color: #ebebeb; font-size: 13px; height: auto; line-height: 1.4em; padding: 10px 10px; font-weight: bold; font-size: 12px; text-shadow: 0 0 3px #000; } #access li ul ul a { /* background: #efefef;*/ background: rgba(35,35,35,.98); width: 168px; font-weight: bold; font-size:11px; float: bottom; border-top:none; border-bottom: 1px dotted rgba(0,0,0,.3); } #access li:hover > a, #access ul ul :hover > a, #access a:focus { color: #9f6b00; background: rgba(30,30,30,.94); box-shadow: inset 0 2px 6px rgba(0,0,0,0.9); font-weight: bold; border-top:1px dotted rgba(0,0,0,.3); border-right:1px dotted rgba(0,0,0,.3); border-left:none; } #access li:hover > a, #access a:focus { color: #000; text-shadow: 0 0 3px 5px rgba(0,0,0,1); background: -moz-linear-gradient(#9d9d9d, #fff); background: -o-linear-gradient(#9d9d9d, #fff); background: -webkit-linear-gradient(#9d9d9d, #fff); box-shadow: inset 0 1px 6px rgba(0,0,0,1); font-weight: bold; border:none; } #access li ul ul a:hover { background: rgba(50,50,50,.9999); box-shadow: none; font-weight: bold; text-decoration:overline; color: white; border-top:none; border-bottom: 1px solid rgba(0,0,0,.6); } #access ul li:hover > ul { display: block; } #access .current-menu-item > a, #access .current-menu-ancestor > a, #access .current_page_item > a, #access .current_page_ancestor > a { font-weight: bolder; }
oh.. the link! http://daylightsite.altervista.org