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

Popular posts from this blog

java - Jasper subreport showing only one entry from the JSON data source when embedded in the Title band -

mapreduce - Resource manager does not transit to active state from standby -

serialization - Convert Any type in scala to Array[Byte] and back -