a-Hover-Menü verschwindet mit der Maus über

Wenn ich die Maus über die Dienste-Verknüpfung halte, verschwindet der rechte Hover. Ich habe das CSS angeschaut und ich kann nicht finden, wo ich es beheben kann. Diese Website ist http://www.aoaluminiumproducts.com.au und meine CSS ist wie folgt:a-Hover-Menü verschwindet mit der Maus über

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; 
}

Quelle

2012-04-06 Ratna Dewi Sutanto

Warum Sie definieren: zweimal schweben? –

Wenn Ihre Absicht ein Dropdown-Menü zu machen, dann li-Tag-Position fehlt: relative Eigenschaft und Untermenü wird zum Seitenanfang stecken auf der Linken. Was du mit Hover meinst, verschwindet immer wieder - ich bin mir nicht so sicher.

Quelle

2012-04-06 06:11:53 Yevgeniy

schweben verschwindet, weil er es zweimal definiert; einmal mit Text-Dekoration: unterstreichen; und einmal mit Textdekoration: keine ; – 11684

Ich dachte, wir sprachen über das Untermenü Hover: 'ul # Menü li: Hover #sub_nav { Anzeige: Block; } ' – Yevgeniy

Danke allen, ich habe die CSS aktualisiert und das Untermenü ist Teil des Elements li. Wenn Sie den Link "Dienste" jedoch über den Mauszeiger bewegen, können Sie nicht auf den Hyperlink "Dienste" klicken. Gibt es eine Möglichkeit, die Untermenüpunkte "Sicherheitstüren", "Duschwände" usw. herunterzudrücken? –

Hallo die Hauptsache ist, dass Sie Position definiert haben: absolute in Ihr Kind ID ohne Position zu definieren: relative zu Ihren Eltern-ID ist also, warum Sie Drop-down schweben wird einige-wo oben.

so habe ich Ihre CSS diese ein i dieses feine arbeiten hoffen anwenden aktualisiert: -

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; 
}

Ihre komplette aktualisiert 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; 
}

Quelle

2012-04-06 07:20:17

a-Hover-Menü verschwindet mit der Maus über

Antwort

Verwandte Themen