I have 2 comments on http://11klassniki.ru/post_ccuz.php?id_ccuz=19. One of them is reply for first comment.
He has
#commentRoot li
{
margin: 7px 0 7px 10px;
}
I tried to give him
background-color:blue;
but this color reflect for all comments. I need to give background-color only for replies.
css
ul
{
list-style-type: none;
width: 700px;
}
#commentRoot li
{
margin: 7px 0 7px 10px;
}
#commentRoot li a
{
margin-left: 500px;
}
#commentRoot li .commentContent
{
border: solid 1px #ccc;
padding: 5px 10px;
border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;
margin: 5px 10px;
}
#commentRoot li h6
{
color: #085991;
}
#commentRoot li h6 span
{
color: #666; font-size: 11px;
margin-left: 20px;
}
#commentRoot li .comment
{
margin-top: 5px;
}
#commentRoot li a.reply
{
font-size: 11px;
}
/* Формочка */
#newComment, .loader {display: none;}
#cancelComment
{
float: right; width: 20px; color: red; cursor: pointer;
}
#newComment input
{
height: 26px; width: 250px; padding: 0 5px ; margin-left: 50px;
border: solid 1px #ccc;
}
#newComment textarea
{
width: 350px; height: 100px; margin-left: 5px;
vertical-align: middle; border: solid 1px #ccc;
}
#newComment button
{
margin-left: 102px; margin-top: 10px;
}
You could do something like (check JSFiddle here)
#commentRoot li .commentContent {
border: none;
padding: 5px 10px;
margin: 5px 10px;
}
#commentRoot li ul li .commentContent {
border: solid 1px #ccc;
padding: 5px 10px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin: 5px 10px;
}
you can try use specificity of the elements, like this:
#commentRoot li ul .commentContent {
background-color: blue;
}
Look a demo here: http://jsfiddle.net/LaLc4ryb/
Tried display: inline-block; text-align: center; and many things from the Internet, but nothing helped.
#nav{
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #C9C9C9;
border-bottom: 5px solid #ddd;
border-top: 1px solid #ccc; }
#nav li {
list-style: none;
float: left; }
#nav li a {
display: block;
padding: 5px 5px;
font-size: 13px;
text-decoration: none;
color: #000;
border-right: 1px solid #ccc; }
#nav li a:hover {
color: #fff;
background-color: #000;
-moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; }
HTML:
<ul id="nav">
<?php wp_nav_menu('menu=header_menu&container=false'); ?>
<div class="clear"></div>
</ul>
It looks like this:
... and I don't know how to center it.
basic is :
ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
li {
display:inline-block;
}
Note that if <li> floats, you lose :)
http://jsfiddle.net/KWG2j/
then , if you need to center ul with fluid width: go one step higher in html.
http://jsfiddle.net/KWG2j/1
nav {
text-align:center;
}
nav ul {
margin: 0;
padding: 0;
display:inline-block;
list-style: none;
background-color: #C9C9C9;
border-bottom: 5px solid #ddd;
border-top: 1px solid #ccc;
}
nav li {
display:inline-block;
}
nav li a {
display: block;
padding: 5px 5px;
font-size: 13px;
text-decoration: none;
color: #000;
border-right: 1px solid #ccc;
}
#nav li a:hover {
color: #fff;
background-color: #000;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
}
Set a fixed width on your UL, then adjust it's margin as
margin: 0 auto;
This will apply equal margins to both the left and right of block elements that have a definite width.
http://jsfiddle.net/Be4Q2/
#nav {
margin: 0;
padding: 0;
text-align:center;
list-style: none;
background-color: #C9C9C9;
border-bottom: 5px solid #ddd;
border-top: 1px solid #ccc;
}
#nav li {
display:inline-block;
}
#nav li a {
display: block;
padding: 5px 5px;
font-size: 13px;
text-decoration: none;
color: #000;
border-right: 1px solid #ccc;
}
#nav li a:hover {
color: #fff;
background-color: #000;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
}
<ul id="nav">
<li>Home</li>
<li>Projects</li>
<li>Contact</li>
<li>About</li>
<div class="clear"></div>
</ul>
In other browsers no problem at all. But in chroom when i hover on menu gray background color appears, when move mouse away from menu completely or partially disappears. When i inspect element with firebug then also disappears completely.
Here is the image.
Page Css
body
{
font-size: .80em;
font-family: "Helvetica Neue" , "Lucida Grande" , "Segoe UI" , Arial, Helvetica, Verdana, sans-serif;
background-color: #d0e2e0;
background-repeat: repeat-x;
background-image: url('../images/bar6.png');
}
.logout
{
color: #666666;
text-decoration: none;
}
.logout:hover
{
color: #000;
}
fieldset
{
border-radius: 6px;
}
.ptext
{
font-size: 11px;
}
fieldset legend
{
font-size: 14px;
font-weight: bold;
color: #4b4b4d;
font-family: Calibri;
}
img
{
border-width: 0px;
}
.mainmenu
{
background-color: #468B6A;
margin-top: -50px !important;
width: 74%;
background-size: 1% 100%;
background-image: url('../images/bar.png');
}
.clear
{
clear: both;
}
.footer
{
margin: 5px auto 5px auto;
width: 960px;
text-align: center;
}
.btn
{
padding: 4px 10px;
}
input[type=submit], input[type=button]
{
background-image: url('../images/bar1.png');
background-size: 1% 100%;
background-color: #D6DD51;
border: 1px solid #91cda0;
border-radius: 4px 4px 4px 4px;
color: #4b4b4d;
font-family: calibri;
font-size: 13px;
font-weight: bold;
padding: 4px 10px;
}
input[type=submit]:hover, input[type=button]:hover
{
border-color: #ffcc28;
background-image: none;
background-color: #D6DD51;
color: #4b4b4d;
cursor: pointer;
}
.reportheader
{
height: 35px;
background-image: url('../images/bar.png');
background-size: 1% 100%;
color: #FFFFFF;
vertical-align: middle;
padding: 10px;
border-radius: 6px 6px 0px 0px;
}
.pageheader
{
height: 80px;
color: #666666;
vertical-align: middle;
padding: 10px;
border-radius: 6px 6px 0px 0px;
}
.page
{
margin: 5px auto 30px auto;
width: 960px;
border: 1px Solid #cccccc;
border-radius: 6px;
min-height: 600px;
background-color: #FFF;
}
.fullWidth
{
width: 100%;
}
.alignLeft
{
text-align: left;
}
.alignRight
{
text-align: right;
vertical-align: text-top;
}
.alignCenter
{
text-align: center;
vertical-align: text-top;
}
label
{
font-size: 11px;
font-weight: bold;
color: #666;
}
.textBox, .textArea, .email, .dropdown, .smalltext, .verysmalltext, .listbox, .comment
{
border: 1px solid #CCCCCC;
border-radius: 4px;
height: 22px;
}
.msgSucess
{
color: #2B7F10;
}
.msgError
{
color: #800000;
}
.textBox
{
width: 250px;
}
.textArea
{
width: 732px;
height: 272px;
}
.email
{
width: 250px;
}
.smalltext
{
width: 150px;
}
.verysmalltext
{
width: 100px;
}
.dropdown
{
width: 153px;
}
.textBox:hover, .textArea:hover, .email:hover, .dropdown:hover, .smalltext:hover, .verysmalltext:hover, .listbox:hover
{
background-color: #F4F4F4;
border: 1px solid #909090;
}
.validator
{
color: #FF2828;
}
.floatLeft
{
text-align: right;
float: left;
width: 20%;
}
.floatRight
{
float: right;
width: 78%;
}
.floatRight .textBox, .textArea, .dropdown, .smalltext, .verysmalltext
{
}
.floatLeft p
{
margin-top: 0px;
}
.listbox
{
margin-top: 3px;
border: 1px solid #CCCCCC;
background-color: #F0F0F0;
padding: 5px;
width: 200px;
}
.mainDiv
{
padding: 10px;
width: 100%;
}
.errorMessage
{
color: #D8000C;
border: 1px solid #FF4F4F;
background-color: #FFE8E1;
height: 50px;
width: 400px;
}
.highlightValidator
{
}
.CustomValidator
{
}
.KimsCustomCalloutStyle div, .KimsCustomCalloutStyle td
{
border: solid 1px #CCCCCC;
background-color: #F3F3F3;
color: #666666;
}
.KimsCustomCalloutStyle .ajax__validatorcallout_popup_table
{
display: none;
border: none;
background-color: transparent;
padding: 0px;
}
.KimsCustomCalloutStyle .ajax__validatorcallout_popup_table_row
{
vertical-align: top;
height: 100%;
background-color: transparent;
padding: 0px;
}
.KimsCustomCalloutStyle .ajax__validatorcallout_callout_cell
{
width: 20px;
height: 100%;
text-align: right;
vertical-align: top;
border: none;
background-color: transparent;
padding: 0px;
}
.KimsCustomCalloutStyle .ajax__validatorcallout_callout_table
{
height: 100%;
border: none;
background-color: transparent;
padding: 0px;
}
.KimsCustomCalloutStyle .ajax__validatorcallout_callout_table_row
{
background-color: transparent;
padding: 0px;
}
.KimsCustomCalloutStyle .ajax__validatorcallout_callout_arrow_cell
{
padding: 8px 0px 0px 0px;
text-align: right;
vertical-align: top;
font-size: 1px;
border: none;
background-color: transparent;
}
.KimsCustomCalloutStyle .ajax__validatorcallout_callout_arrow_cell .ajax__validatorcallout_innerdiv
{
font-size: 1px;
position: relative;
left: 1px;
border-bottom: none;
border-right: none;
border-left: none;
width: 15px;
background-color: transparent;
padding: 0px;
}
.KimsCustomCalloutStyle .ajax__validatorcallout_callout_arrow_cell .ajax__validatorcallout_innerdiv div
{
height: 1px;
overflow: hidden;
border-top: none;
border-bottom: none;
border-right: none;
padding: 0px;
margin-left: auto;
}
.KimsCustomCalloutStyle .ajax__validatorcallout_error_message_cell
{
font-family: Tahoma;
font-size: 11px;
padding: 5px;
border-right: none;
border-left: none;
width: 100%;
}
.KimsCustomCalloutStyle .ajax__validatorcallout_icon_cell
{
width: 20px;
padding: 5px;
border-right: none;
border-radius: 5px 0 0 5px;
}
.KimsCustomCalloutStyle .ajax__validatorcallout_close_button_cell
{
vertical-align: top;
padding: 0px;
text-align: right;
border-left: none;
border-radius: 0 5px 5px 0;
}
.KimsCustomCalloutStyle .ajax__validatorcallout_close_button_cell .ajax__validatorcallout_innerdiv
{
border: none;
text-align: center;
width: 10px;
padding: 1px;
cursor: pointer;
border-radius: 0 5px 0 0;
}
.comment
{
height: 220px;
width: 650px;
}
.round
{
border: 1px solid #CCCCCC;
border-radius: 6px 6px 6px 6px; /* margin: 15px 0; */
padding: 10px;
width: 100%;
box-shadow: 2px 2px 2px #CCCCCC;
min-height: 100px;
}
.imageCss
{
width: 50px;
height: 50px;
}
.userName
{
}
.imageCss:hover
{
}
.thumbnail
{
}
.hide
{
display: none;
}
.sqaText
{
border: 1px solid #CCCCCC;
border-radius: 4px;
height: 22px;
width: 200px;
box-shadow: 1px 1px 1px #CCCCCC;
}
.sqaSmallText
{
border: 1px solid #CCCCCC;
border-radius: 4px;
height: 22px;
width: 200px;
box-shadow: 1px 1px 1px #CCCCCC;
}
.sqafullWidth
{
width: 100%;
}
.sqafullWidth .alignRight
{
vertical-align: middle;
}
.edit
{
background-image: url('../Images/edit 16x16.png');
background-repeat: no-repeat;
background-position: left center;
border: 1px solid #CCCCCC;
border-radius: 4px 4px 4px 4px;
box-shadow: 1px 1px 1px #CCCCCC;
padding: 5px 26px;
text-decoration: none;
}
.delete
{
background-image: url('../Images/delete 16x16.png');
background-repeat: no-repeat;
background-position: left center;
border-radius: 4px 4px 4px 4px;
border: 1px solid #CCCCCC;
box-shadow: 1px 1px 1px #CCCCCC;
padding: 5px 26px;
text-decoration: none;
}
.delete:hover
{
border: 1px solid #808080;
box-shadow: 1px 1px 1px #808080;
}
.edit:hover
{
border: 1px solid #808080;
box-shadow: 1px 1px 1px #808080;
}
.tblconfirm tr th
{
display: none;
}
.tblconfirm
{
width: 100%;
}
.tblconfirm td:first-child
{
background-color: #E4E4E4;
width: 30%;
text-align: right;
}
.tblconfirm td:last-child
{
background-color: #E4E4E4;
font-weight: bold;
}
.number
{
}
.alphabet
{
}
.fright
{
float: right;
}
.fleft
{
float: left;
}
.aright
{
text-align: right;
}
.aleft
{
text-align: left;
}
.nic
{
}
#printbtn
{
background-image: url("../images/print_32.png");
background-position: left center;
background-repeat: no-repeat;
border: 2px solid #D2DA41;
border-radius: 6px 6px 6px 6px;
color: green;
font-family: calibri;
font-size: 21px;
font-weight: bold;
padding: 3px 40px;
text-align: center;
text-decoration: none;
}
#printbtn:hover
{
background-color: #F1F3C2;
border-color: #F0F000;
}
.validator-error
{
border-color:Red;
}
.test
{
background-color: #FFF2F2;
}
Menu Css
.grid_12 {
display: inline;
float: left;
margin-left: 5px;
margin-right: 20px;
position: relative;
}
#ns_nav-main li li.ns_last {
border-bottom: 1px solid #009BE2;
}
#ns_nav-sub-wrap {
border: 1px solid #CCCCCC;
display: block;
margin-bottom: 10px;
margin-top: 10px;
position: relative;
z-index: 2;
}
#ns_nav-sub {
font-family: Calibri,Arial;
font-size: 14px;
list-style: none outside none;
}
#ns_nav-sub a:hover {
background-color:#dfe473;
color:#4b4b4d;
text-decoration: none;
}
#ns_nav-sub li:first-child a:hover {
background-color:#dfe473;
color:#4b4b4d;
text-decoration: none;
border-radius: 5px 0 0 5px;
}
#ns_nav-sub li li:first-child a:hover
{
border-radius: 0px;
}
#ns_nav-sub li {
border-left: 1px solid #CCCCCC;
float: left;
margin: 0;
position: relative;
}
#ns_nav-sub li.ns_first {
border-left: 0 none;
}
#ns_nav-sub li a {
border-left:none;
color: #FFFFFF;
cursor: pointer;
display: block;
padding: 10px 20px;
text-decoration: none;
font-weight:bold;
}
#ns_nav-sub li:hover, #ns_nav-sub li.selected, #ns_nav-sub li.over
{
/* background: none repeat scroll 0 0 #EFEFEF;*/
text-decoration: none;
}
#ns_nav-sub .ns_icon-tiny {
background-position: -1000px -17px;
position: absolute;
right: 12px;
top: 22px;
}
#ns_nav-sub li ul {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color:#468B6A;
border-color: #CCC;
border-style: none solid solid;
border-width: 0 1px 1px;
display: none;
list-style: none outside none;
margin-left: -1px;
position: absolute;
width: 200px;
z-index: 10;
}
#ns_nav-sub li:hover ul, #ns_nav-sub li.over ul {
display: block;
}
#ns_nav-sub li li {
border-left: 0 none;
border-top: 1px solid #CCCCCC;
width: 100%;
}
#ns_nav-sub li li a {
padding-bottom: 10px;
padding-top: 10px;
}
#ns_nav-sub li li a:hover {
background-color:#dfe473;
color:#4b4b4d;
}
#ns_nav-sub li li:last-child a:hover {
background-color:#dfe473;
color:#4b4b4d;
border-radius: 0 0 5px 5px;
}
.ns_round, a.ns_btn-small, a.ns_btn, a.ns_btn-big, .ns_box, .ns_form button, #ns_box-login, .ns_selector, #ns_top-right .ns_logged-in .ns_bnote, .ns_generic, #ns_nav-sub-wrap, .ns_form input[type="file"], .ns_form input, .ns_form textarea, .ns_form select, .contest_stats, .ns_bubble, .ns_form .ns_radio-btn li, .ns_checkbox-big li, ul.ns_list-box-5 li a, ul.ns_logo-type li, button.ns_btn, ul.ns_list-box-4 li a, .ns_pagination span, .ns_pagination a, .ns_pagination .current.prev, ul.ns_list-box-3 li, table.ns_generic, .ns_code, .ns_tooltip, ul.ns_contest-type li span.ns_icon, .ns_landing-page .ns_contest-panel, .ns_contest-table, .ns_gallery li.ns_entry, ul.ns_milestones li, .ns_contact-pic, ul.ns_skills-bubble li, .ns_designstudio-hiw, .ns_status-box, .ns_level-up, ul.ns_sub-balance, .ns_toggle.ns_expand, .ns_toggle.ns_collapse, .ns_profile-pic, .ns_avg-rating {
border-radius: 6px 6px 6px 6px;
}
.ns_round-bottom, #ns_nav-main li ul, .ns_fancy-panel, #ns_nav-sub li ul, #ns_nav-sub li ul li.ns_last a:hover, #ns_nav-main li li.ns_last, #ns_nav-main li li.ns_last a:hover, .ns_total, table.ns_generic, .ns_box-half.ns_box-bottom {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.ns_round-top, .ns_box .ns_top, .ns_login-on, .ns_price-box, #ns_box-country, .ns_box-half.ns_box-top, .ns_avg-rating h2 {
border-radius: 6px 6px 0 0;
}
.ns_round-top-left, table.ns_contest th:first-child, table.ns_generic th:first-child, .dataTable thead tr th:first-child, .ns_notify.ns_generic .ns_sidebar, .ns_table th:first-child, .ns_gamification-dropdown {
border-top-left-radius: 6px;
}
.ns_round-top-right, table.ns_contest th:last-child, table.ns_generic th:last-child, .dataTable thead tr th:last-child, .ns_table th:last-child, #ns_nav-sub li.ns_last a:hover {
border-top-right-radius: 6px;
}
.ns_round-bottom-right, ul.ns_gallery .ns_num, #ns_nav-sub li.ns_last a:hover, .ns_gamification-dropdown {
border-bottom-right-radius: 6px;
}
.ns_round-bottom-left, .ns_zoom-btn, .ns_notify.ns_generic .ns_sidebar, .ns_gamification-dropdown {
border-bottom-left-radius: 6px;
}
.ns_round-left, #ns_banner .ns_ebook input, #ns_searchbox {
border-radius: 6px 0 0 6px;
}
.ns_round-right, #ns_banner .ns_ebook button, .ns_btn.ns_openid .ns_status.ns_selected {
border-radius: 0 6px 6px 0;
}
.ns_round-3, .ns_form input[type="file"], .ns_form input, .ns_form textarea, .ns_form select, .ns_notify, .ns_contacts.ns_search-box, ul.ns_filter li.ns_current, .ns_close, .ns_rate-bubble {
border-radius: 3px 3px 3px 3px;
}
ul.ns_sidenav li.selected a:hover {
color: #FFFFFF !important;
}
ul.ns_sidenav li a {
color: #333333;
height: 44px;
line-height: 40px;
padding-left: 20px;
}
ul.ns_sidenav li a:hover {
color: #008BCB !important;
text-decoration: none !important;
}
dt, ul {
list-style-type: disc;
margin: 0;
padding: 0;
}
ul.list-style-none, ul.list-style-none li {
list-style-type: none;
}
Any effort would be appreciated.
Thanks.
I actually get the exact same bug sometimes in Chrome, except it's with the yellow colours of my site's theme. Usually it happens when an element appears or disappears, typically the custom tooltip, and sometimes just moving the mouse around fixes it.
I've reached the conclusion that it's a bug in Chrome's rendering engine, and all we can do is hope they fix it soon.
At this Test Link I seek to install header and main site navigation on to the top of a blog script.
My clear:both; worked on the main site script but throws everything to the side now. Have tried numerous fixex without success! Thanks in advance for ant pointers to resolve. Clear:both; is in the footer.
/*/////////////////////MAIN SITE NAVIGATION BAR////////////////////*/
.dropnav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: #3b3b44; /*Navigation Active Background*/
border-top: 1px solid #ccf;
}
.dropnav ol {
list-style: none;
width: 950px;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
.dropnav li {
float: left; }
.dropnav li a {
display: block;
padding: 8px 25px;
text-decoration: none;
font-family: Helvetica, arial, sans-serif;
font-size: 20px;
font-weight: bold;
color: #fff; /*Active Text Color*/
border-right: 1px solid #ccf;
border-bottom: none;
}
.dropnav li:first-child a {
border-left: 2px solid #ccf; }
.dropnav li a:hover {
color: #000; /*Active Hover Color*/
background-color: #8db3ff; } /*Navigation Hover Background*/
/*////////////////STYLING TO DROPDOWN MENU//////////////////////*/
.dropnav li ol {
display: none;
width: 13em; } /*Define width of dropdown button*/
.dropnav li:hover ol {
display: block;
position: absolute;
margin: 0;
padding: 0; }
.dropnav li:hover li {
float: none; }
.dropnav li:hover li a {
background-color: #3b3b44; /*Navigation Active Background*/
border-bottom: 1px solid #ccf;
border-top: 1px solid #ccf;
border-right: 1px solid #ccf;
border-left: 1px solid #ccf;
font-size: 16px;
color: #fff; } /*Text Color*/
.dropnav li li a:hover {
color: #000;
background-color: #8db3ff; /*Navigation Hover Background*/
}
/*//////////////////END MAIN SITE NAVIGATION////////////////////*/
#container {
width: 950px;
padding-left: 0px;
padding-right: 0px;
margin: 1px auto;
background: #fafafa;
}
#header {
width: 950px;
margin-top: 15px;
}
#content {
padding-left: 5px;
padding-right: `5px;
}
#footer {
clear: both;
background: #3b3b44;
color: #ccf; /*text*/
/*margin-top: 10px;*/
margin-bottom: 10px;
padding-top: 5px;
padding-left: 15px;
padding-bottom: 5px;
border-top: 2px solid #cc0;
line-height: 1.2em;
}
you have two id's with the same name as container. you id needs to be unique and also id fieldset and i guess all your tags are not closed properly very those.
you can put a clear div after you menu to clear out this row. It is the same principle use in the 960 grid sytem.
www.960.gs
But here is a link to see the code and the result.
http://jsfiddle.net/etienne_carre/9x2P3/
Thx
If you look here under "About ISL" -> "Board of Trustees" you can see I have created a third level dropdown, but how can I properly align that drop down? Below you will see my css.
#menudiv {
width: 999px;
float: left;
clear: left;
height: 250px;
background: url(images/top_bg.png) no-repeat;
margin-top: 10px;
}
#mainmenu {
width: 948px;
height: 63px;
float: left;
margin-left: 16px;
margin-top: 5px;
border: 1px solid #D5D5D5;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.1);
background: url(images/nav_bg.gif) repeat;
}
.mainnav {
margin: 0;
padding: 0;
list-style: none;
}
.mainnav * {
margin: 0;
padding: 0;
list-style: none;
}
.mainnav ul {
position: absolute;
top: -999em;
display: none;
}
.mainnav li {
float: left;
position: relative;
z-index: 999;
height: 63px;
line-height: 55px;
margin-right: 0px;
border-right: 1px solid #D5D5D5;
}
.mainnav li.last {
border-right: none;
}
.mainnav a {
display: block;
font-size: 19px;
margin: 0;
color: #cc9900;
font-family: Copperplate,Arial,Helvetica,Sans serif;
font-weight: 600;
text-decoration: none;
padding: 3px 13px 3px 12px;
color: #555;
text-shadow: 0 1px 1px white;
}
.mainnav li:hover {
text-decoration: none;
border-bottom: solid 0px #ccc;
background: white;
}
.mainnav ul li {
width: 132px;
}
.mainnav li:hover ul,
ul.mainnav li.sfHover ul {
left: 0px;
top: 50px;
padding-top: 0px;
width: 132px;
border-bottom: solid 0px #eaeaea;
background: url(images/nav_dropdown_shadow.gif) repeat-x top;
padding: 6px 0 0px 0px;
margin: 13px 0 0 -1px;
border: 1px solid #D5D5D5;
-moz-border-radius-bottomleft: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomright: 3px;
-webkit-border-bottom-right-radius: 3px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.1);
width: 175px;
border-bottom-left-radius: 3px 3px;
border-bottom-right-radius: 3px 3px;
}
.mainnav li:hover li ul,
.mainnav li.sfHover li ul {
top: -999em;
}
.mainnav li li:hover ul,
ul.mainnav li li.sfHover ul {
left: 132px;
top: -8px;
}
.mainnav li:hover ul,
.mainnav li li:hover ul {
top: -999em;
}
.mainnav li li {
color: #555;
display: block;
padding: 0px;
height: auto !important;
border: none;
width: 175px;
background: url(images/nav_dropdown_bg.gif) repeat;
margin: 0;
}
.mainnav li li a:link,
.mainnav li li a:visited {
display: block;
height: auto !important;
line-height: 30px;
color: #333;
font-weight: normal;
font-family: arial,helvetica,sans-serif;
font-size: 12px;
border: none;
margin: 0;
padding-left: 10px;
overflow: hidden;
border-bottom: 1px solid #E3E3E3;
}
.mainnav li li :hover {
}
.mainnav li li a:hover {
background: none;
color: #555 ;
border-bottom: 1px solid #E3E3E3;
}
The problem is that the ul.sub-menu li ul.sub-menu is too far to the left and is covered by its parent. How can I fix the right alignment of these ul elements?
On line 211 in your mainmenu.css, adjust the left position of your submenu by something like 178px, that should place the submenu somewhere more comfortable.