2012-04-06 72 views
1

當我將鼠標懸停在服務鏈接上時,右側的鼠標懸停消失。我看了看CSS,我似乎無法找到修復它的地方。這個網站是http://www.aoaluminiumproducts.com.au和我的CSS是如下:a-Hover菜單在鼠標上不斷消失

html 
{ height: 100%;} 

* 
{ margin: 0; 
    padding: 0;} 

body 
{ font: 0.8em/1.5 "arial",sans-serif; 
    color: #303030; 
    background: #990000; 
    } 

p 
{ padding: 0 0 20px 0; 
    line-height: 1.7em;} 

img 
{ border: 0;} 

h1, h2, h3, h4, h5, h6 
{ font: normal 175% 'century gothic', arial, sans-serif; 
    color: #43423F; 
    margin: 0 0 15px 0; 
    padding: 15px 0 5px 0;} 

h2 
{ font: normal 200% 'century gothic', arial, sans-serif; 
    color: #1293EE;} 

h4, h5, h6 
{ margin: 0; 
    padding: 0 0 5px 0; 
    font: normal 120% arial, sans-serif; 
    color: #1293EE;} 

h5, h6 
{ font: italic 95% arial, sans-serif; 
    padding: 0 0 15px 0; 
    color: #000;} 

h6 
{ color: #362C20;} 

a, a:hover 
{ outline: none; 
    text-decoration: underline; 
    color: #CC0000;} 

a:hover 
{ text-decoration: none;} 

.left 
{ float: left; 
    width: auto; 
    margin-right: 10px;} 

.right 
{ float: right; 
    width: auto; 
    margin-left: 10px;} 

.center 
{ display: block; 
    text-align: center; 
    margin: 20px auto;} 

blockquote 
{ margin: 20px 0; 
    padding: 10px 20px 0 20px; 
    border: 1px solid #E5E5DB; 
    background: #FFF;} 

ul 
{ margin: 2px 0 22px 17px;} 

ul li 
{ list-style-type: circle; 
    margin: 0 0 6px 0; 
    padding: 0 0 4px 5px;} 

ol 
{ margin: 8px 0 22px 20px;} 

ol li 
{ margin: 0 0 11px 0;} 

#main, #logo, #menubar, #site_content, #footer 
{ margin-left: auto; 
    margin-right: auto;} 

#header 
{ background: #990000; 
    height: 240px;} 

#logo 
{ width: 810px; 
    position: relative; 
    height: 120px; 
    background: #150517; url(logo.png) no-repeat;} 

#logo #logo_text 
{ position: center; 
    top: 20px; 
    left: 0;} 

#logo h1, #logo h2 
{ font: normal 300% 'century gothic', arial, sans-serif; 
    border-bottom: 0; 
    text-transform: none; 
    margin: 0;} 

#logo_text h1, #logo_text h1 a, #logo_text h1 a:hover 
{ padding: 22px 0 0 0; 
    color: #FFF; 
    letter-spacing: 0.1em; 
    text-decoration: none;} 

#logo_text h1 a .logo_colour 
{ color: #FAF700;} 

#logo_text h2 
{ font-size: 100%; 
    padding: 4px 0 0 0; 
    color: #DDD;} 

#menubar 
{ width: 877px; 
    height: 72px; 
    padding: 0; 
    background: #150517; url(menu.png) repeat-x; 
    } 

ul#menu, ul#menu li 
{ float: left; 
    margin: 0; 
    padding: 0;} 

ul#menu li 
{ list-style: none;} 

ul#menu li a 
{ letter-spacing: 0.1em; 
    font: normal 100% 'lucida sans unicode', arial, sans-serif; 
    display: block; 
    float: left; 
    height: 37px; 
    padding: 29px 26px 6px 26px; 
    text-align: center; 
    color: #FFF; 
    text-transform: uppercase; 
    text-decoration: none; 
    background: transparent;} 

ul#menu li a:hover, ul#menu li.selected a, ul#menu li.selected a:hover 
{ color: #FFF; 
    background: #451C1B url(menu_select.png) repeat-x;} 

ul#menu li ul#sub_nav 
{ 
    /*border:1px solid red;*/ 
    position: absolute; 
    left: 0; top:35px; 
    padding: 15px 0; 
    width: 170px; 
    margin:0; 
    display:none; 
    background:#150517; 
} 

ul#menu li:hover #sub_nav 
{ 
    display:block; 
} 

#site_content 
{ width: 900px; 
    overflow: hidden; 
    margin: 0 auto 0 auto; 
    padding: 20px 24px 20px 37px; 
    background: #DCDCDC;} 

.sidebar 
{ float: right; 
    width: 200px; 
    padding: 0 15px 20px 15px;} 

.sidebar ul 
{ width: 178px; 
    padding: 4px 0 0 0; 
    margin: 4px 0 30px 0;} 

.sidebar li 
{ list-style: none; 
    padding: 0 0 7px 0; } 

.sidebar li a, .sidebar li a:hover 
{ padding: 0 0 0 40px; 
    display: block; 
    background: transparent url(link.png) no-repeat left center;} 

.sidebar li a.selected 
{ color: #444; 
    text-decoration: none;} 

#content 
{ text-align: left; position: absoulte; 
    width: 595px; 
    padding: 0;} 

#content ul 
{ margin: 2px 0 22px 0px;} 

#content ul li 
{ list-style-type: none; 
    background: url(bullet.png) no-repeat; 
    margin: 0 0 6px 0; 
    padding: 0 0 4px 25px; 
    line-height: 1.5em;} 

#footer 
{ width: 878px; 
    font: normal 100% 'lucida sans unicode', arial, sans-serif; 
    height: 33px; 
    padding: 24px 0 5px 0; 
    text-align: center; 
    background: #000000; 
    color: #b1b1b1; 
    text-transform: uppercase; 
    letter-spacing: 0.1em;} 

#footer a 
{ color: #FFF; 
    text-decoration: none;} 

#footer a:hover 
{ color: #FFF; 
    text-decoration: underline;} 

.search 
{ color: #5D5D5D; 
    border: 1px solid #BBB; 
    width: 134px; 
    padding: 4px; 
    font: 100% arial, sans-serif;} 

#colours 
{ height: 0px; 
    text-align: right; 
    padding: 66px 16px 0px 300px;} 

.form_settings 
{ margin: 15px 0 0 0;} 

.form_settings p 
{ padding: 0 0 4px 0;} 

.form_settings span 
{ float: left; 
    width: 200px; 
    text-align: left;} 

.form_settings input, .form_settings textarea 
{ padding: 5px; 
    width: 299px; 
    font: 100% arial; 
    border: 1px solid #E5E5DB; 
    background: #FFF; 
    color: #47433F;} 

.form_settings .submit 
{ font: 100% arial; 
    border: 1px solid; 
    width: 99px; 
    margin: 0 0 0 212px; 
    height: 33px; 
    padding: 2px 0 3px 0; 
    cursor: pointer; 
    background: #7D0F0F; 
    color: #FFF;} 

.form_settings textarea, .form_settings select 
{ font: 100% arial; 
    width: 299px;} 

.form_settings select 
{ width: 310px;} 

.form_settings .checkbox 
{ margin: 4px 0; 
    padding: 0; 
    width: 14px; 
    border: 0; 
    background: none;} 

.separator 
{ width: 100%; 
    height: 0; 
    border-top: 1px solid #D9D5CF; 
    border-bottom: 1px solid #FFF; 
    margin: 0 0 20px 0;} 

table 
{ margin: 10px 0 30px 0;} 

table tr th, table tr td 
{ background: #DCDCDC; 
    color: #DCDCDC; 
    padding: 7px 4px; 
    text-align: left;} 

table tr td 
{ background: #DCDCDC; 
    color: #DCDCDC; 
} 

#testimonials{ 
    width: 133px; 
    padding: 45px 45px 35px; 
    background:url('../img/quotes.png') no-repeat 20px 20px rgba(178,178,169,0.2); 
    min-height:90px; 

    -moz-border-radius:12px; 
    -webkit-border-radius:12px; 
    border-radius:12px; 
} 
#testimonials ul{ list-style:none;} 
#testimonials p.text{ font-size:11px;} 

#testimonials p.author{ 
    color: #878787; 
    font-size: 16px; 
    font-style: italic; 
    text-align: left; 

} 

#testimonials p.author a, 
#testimonials p.author a:visited{ 
    color:#6aa42a; 
} 
+0

你爲什麼要定義一個:懸停兩次? – 2012-04-06 05:59:57

回答

1

如果你的目的是使一個下拉菜單,那麼你的L1標籤丟失位置:相對屬性和子菜單卡頁面頂部在左邊。你盤旋的意思不斷消失 - 我不太確定。

+0

懸停消失,因爲他定義了兩次;一次用文字裝飾:下劃線;一次用文字修飾:無 ; – 11684 2012-04-06 06:16:36

+0

我以爲我們在談論子菜單懸停: 'ul#menu li:hover #sub_nav { display:block; }' – Yevgeniy 2012-04-06 06:33:30

+0

謝謝大家,我已經更新了CSS並且子菜單是li元素的一部分。但是,當您將鼠標懸停在服務鏈接上時,您無法點擊服務超鏈接。有沒有辦法按下子菜單鏈接「安全門」「淋浴屏幕」等? – 2012-04-06 06:47:16

1

喜最主要的是,你必須定義位置:絕對到你的孩子ID,而無需定義位置:相對到父ID所以這就是爲什麼你懸停下拉會一些,其中頂部。

,所以我已經更新了你的CSS應用此一個我希望這將正常工作: -

ul#menu li { 
    list-style: none outside none; 
    position: relative; 
} 


ul#menu li ul#sub_nav { 
    background: none repeat scroll 0 0 #150517; 
    display: none; 
    margin: 0; 
    position: absolute; 
    top: 72px; 
    width: 155px; 
} 

您的完全更新CSS

html 
{ height: 100%;} 

* 
{ margin: 0; 
    padding: 0;} 

body 
{ font: 0.8em/1.5 "arial",sans-serif; 
    color: #303030; 
    background: #990000; 
    } 

p 
{ padding: 0 0 20px 0; 
    line-height: 1.7em;} 

img 
{ border: 0;} 

h1, h2, h3, h4, h5, h6 
{ font: normal 175% 'century gothic', arial, sans-serif; 
    color: #43423F; 
    margin: 0 0 15px 0; 
    padding: 15px 0 5px 0;} 

h2 
{ font: normal 200% 'century gothic', arial, sans-serif; 
    color: #1293EE;} 

h4, h5, h6 
{ margin: 0; 
    padding: 0 0 5px 0; 
    font: normal 120% arial, sans-serif; 
    color: #1293EE;} 

h5, h6 
{ font: italic 95% arial, sans-serif; 
    padding: 0 0 15px 0; 
    color: #000;} 

h6 
{ color: #362C20;} 

a, a:hover 
{ outline: none; 
    text-decoration: underline; 
    color: #CC0000;} 

a:hover 
{ text-decoration: none;} 

.left 
{ float: left; 
    width: auto; 
    margin-right: 10px;} 

.right 
{ float: right; 
    width: auto; 
    margin-left: 10px;} 

.center 
{ display: block; 
    text-align: center; 
    margin: 20px auto;} 

blockquote 
{ margin: 20px 0; 
    padding: 10px 20px 0 20px; 
    border: 1px solid #E5E5DB; 
    background: #FFF;} 

ul 
{ margin: 2px 0 22px 17px;} 

ul li 
{ list-style-type: circle; 
    margin: 0 0 6px 0; 
    padding: 0 0 4px 5px;} 

ol 
{ margin: 8px 0 22px 20px;} 

ol li 
{ margin: 0 0 11px 0;} 

#main, #logo, #menubar, #site_content, #footer 
{ margin-left: auto; 
    margin-right: auto;} 

#header 
{ background: #990000; 
    height: 240px;} 

#logo 
{ width: 810px; 
    position: relative; 
    height: 120px; 
    background: #150517; url(logo.png) no-repeat;} 

#logo #logo_text 
{ position: center; 
    top: 20px; 
    left: 0;} 

#logo h1, #logo h2 
{ font: normal 300% 'century gothic', arial, sans-serif; 
    border-bottom: 0; 
    text-transform: none; 
    margin: 0;} 

#logo_text h1, #logo_text h1 a, #logo_text h1 a:hover 
{ padding: 22px 0 0 0; 
    color: #FFF; 
    letter-spacing: 0.1em; 
    text-decoration: none;} 

#logo_text h1 a .logo_colour 
{ color: #FAF700;} 

#logo_text h2 
{ font-size: 100%; 
    padding: 4px 0 0 0; 
    color: #DDD;} 

#menubar 
{ width: 877px; 
    height: 72px; 
    padding: 0; 
    background: #150517; url(menu.png) repeat-x; 
    } 

ul#menu, ul#menu li 
{ float: left; 
    margin: 0; 
    padding: 0;} 

ul#menu li { 
    list-style: none outside none; 
    position: relative; 
} 


ul#menu li a 
{ letter-spacing: 0.1em; 
    font: normal 100% 'lucida sans unicode', arial, sans-serif; 
    display: block; 
    float: left; 
    height: 37px; 
    padding: 29px 26px 6px 26px; 
    text-align: center; 
    color: #FFF; 
    text-transform: uppercase; 
    text-decoration: none; 
    background: transparent;} 

ul#menu li a:hover, ul#menu li.selected a, ul#menu li.selected a:hover 
{ color: #FFF; 
    background: #451C1B url(menu_select.png) repeat-x;} 

ul#menu li ul#sub_nav { 
    background: none repeat scroll 0 0 #150517; 
    display: none; 
    margin: 0; 
    position: absolute; 
    top: 72px; 
    width: 155px; 
} 


ul#menu li:hover #sub_nav 
{ 
    display:block; 
} 

#site_content 
{ width: 900px; 
    overflow: hidden; 
    margin: 0 auto 0 auto; 
    padding: 20px 24px 20px 37px; 
    background: #DCDCDC;} 

.sidebar 
{ float: right; 
    width: 200px; 
    padding: 0 15px 20px 15px;} 

.sidebar ul 
{ width: 178px; 
    padding: 4px 0 0 0; 
    margin: 4px 0 30px 0;} 

.sidebar li 
{ list-style: none; 
    padding: 0 0 7px 0; } 

.sidebar li a, .sidebar li a:hover 
{ padding: 0 0 0 40px; 
    display: block; 
    background: transparent url(link.png) no-repeat left center;} 

.sidebar li a.selected 
{ color: #444; 
    text-decoration: none;} 

#content 
{ text-align: left; position: absoulte; 
    width: 595px; 
    padding: 0;} 

#content ul 
{ margin: 2px 0 22px 0px;} 

#content ul li 
{ list-style-type: none; 
    background: url(bullet.png) no-repeat; 
    margin: 0 0 6px 0; 
    padding: 0 0 4px 25px; 
    line-height: 1.5em;} 

#footer 
{ width: 878px; 
    font: normal 100% 'lucida sans unicode', arial, sans-serif; 
    height: 33px; 
    padding: 24px 0 5px 0; 
    text-align: center; 
    background: #000000; 
    color: #b1b1b1; 
    text-transform: uppercase; 
    letter-spacing: 0.1em;} 

#footer a 
{ color: #FFF; 
    text-decoration: none;} 

#footer a:hover 
{ color: #FFF; 
    text-decoration: underline;} 

.search 
{ color: #5D5D5D; 
    border: 1px solid #BBB; 
    width: 134px; 
    padding: 4px; 
    font: 100% arial, sans-serif;} 

#colours 
{ height: 0px; 
    text-align: right; 
    padding: 66px 16px 0px 300px;} 

.form_settings 
{ margin: 15px 0 0 0;} 

.form_settings p 
{ padding: 0 0 4px 0;} 

.form_settings span 
{ float: left; 
    width: 200px; 
    text-align: left;} 

.form_settings input, .form_settings textarea 
{ padding: 5px; 
    width: 299px; 
    font: 100% arial; 
    border: 1px solid #E5E5DB; 
    background: #FFF; 
    color: #47433F;} 

.form_settings .submit 
{ font: 100% arial; 
    border: 1px solid; 
    width: 99px; 
    margin: 0 0 0 212px; 
    height: 33px; 
    padding: 2px 0 3px 0; 
    cursor: pointer; 
    background: #7D0F0F; 
    color: #FFF;} 

.form_settings textarea, .form_settings select 
{ font: 100% arial; 
    width: 299px;} 

.form_settings select 
{ width: 310px;} 

.form_settings .checkbox 
{ margin: 4px 0; 
    padding: 0; 
    width: 14px; 
    border: 0; 
    background: none;} 

.separator 
{ width: 100%; 
    height: 0; 
    border-top: 1px solid #D9D5CF; 
    border-bottom: 1px solid #FFF; 
    margin: 0 0 20px 0;} 

table 
{ margin: 10px 0 30px 0;} 

table tr th, table tr td 
{ background: #DCDCDC; 
    color: #DCDCDC; 
    padding: 7px 4px; 
    text-align: left;} 

table tr td 
{ background: #DCDCDC; 
    color: #DCDCDC; 
} 

#testimonials{ 
    width: 133px; 
    padding: 45px 45px 35px; 
    background:url('../img/quotes.png') no-repeat 20px 20px rgba(178,178,169,0.2); 
    min-height:90px; 

    -moz-border-radius:12px; 
    -webkit-border-radius:12px; 
    border-radius:12px; 
} 
#testimonials ul{ list-style:none;} 
#testimonials p.text{ font-size:11px;} 

#testimonials p.author{ 
    color: #878787; 
    font-size: 16px; 
    font-style: italic; 
    text-align: left; 

} 

#testimonials p.author a, 
#testimonials p.author a:visited{ 
    color:#6aa42a; 
}