html - How do I prevent a dropdown menu to move/affect content/elements of a web page? -
i have searched both here , elsewhere on internet answer, have not found has solved problem. tried include relevant code only, sorry if included irrelevant.
i have made navigation bar 4 alternatives (or 4 buttons, if prefer), fourth 1 dropdown menu 3 additional alternatives visible while hovering on fourth button. have added image web page, problem having that, while hovering fourth alternative , displaying dropdown menu, image moves.
i make picture, , additional content matter, stays @ same place while cursor hovering on fourth alternative.
html:
<body> <div id="logoquotebar"> </div> <a class="navbutton1" href="#"> navbutton 1 </a> <a class="navbutton2" href="#"> navbutton 2 </a> <a class="navbutton3" href="#"> navbutton 3 </a> <a class="navbutton4" href="#"> navbutton 4 </a> <div class="dropdowncontent" href="#"> <a id="link1" href="#"> link 1 </a> <a id="link2" href="#"> link 2 </a> <a id="link3" href="#"> link 3 </a> </div> <div id="logopic"> <img src="e7.jpg" width="148" height="120"> </div> </body>
css:
#logoquotebar { background-color:white; width:1200px; height:200px; } #logopic { position:fixed; margin-top:-160px; } .navbutton4 { display:block; width:236px; height:35px; background-color:#8b6969; text-align:center; line-height:33px; font-family:verdana; -webkit-transition-duration:0.4s; transition-duration:0.4s; margin-left:964px; margin-top:-35px; } .dropdowncontent { display:none; width:236px; height:105px; background-color:white; text-align:center; line-height:33px; font-family:verdana; margin-left:964px; -webkit-transition-duration:0.2s; transition-duration:0.2s; } #link1 { display:block; width:236px; height:35px; } #link2 { display:block; width:236px; height:35px; } #link3 { display:block; width:236px; height:35px; } .navbutton4:hover + .dropdowncontent { display:block; } .dropdowncontent:hover { display:block; }
.dropdowncontent { position: absolute; }
Comments
Post a Comment