以下链接是我的页面之一，其中提供了有关受邀演讲者的详细信息。
http://iclaa2017.com/slide-show-test/#tab4
一切都很好，但是当单击链接（在扬声器 1,2...上）时，我得到了切换效果，但是扬声器 1,2.. 条正在导航栏上。我知道它的发生是因为它充当页面跳转。但...
如何解决？以及如何使文本适合下拉框中的内容？
我希望扬声器 1,2... 也应该留在下拉框中。
我使用的代码如下：
.maindrop {
width: 49%;
}
.bar {
padding: 20px;
color: white;
background: #1FB5AC;
display: block;
font-family: Times;
text-decoration: none;
font-size: 16px;
transition: .2s ease-out;
margin-bottom: .1cm;
}
.bar:hover {
background: gray;
}
.dropbox {
max-height: 0;
transition: .5s ease-out;
overflow: hidden;
width: 100%;
}
.dropbox:target {
max-height: 300px;
}<head>
</head>
<body>
<div style="width: 100%">
<div class="maindrop" style="float: left">
<div class="fold default"> <a class="bar" href="#tab1">Speaker 1</a>
<div class="dropbox" id='tab1'>
<div style="width: 30%; float: left;"> <img src="http://sau.int/~ctgtc2016/images/RB_Bapat.jpeg" alt="" > </div>
<div style="width: 70%; float: left; text-align: justify;"> The main areas of research interest of Prof. Bapat are nonnegative matrices,
matrix inequalities, matrices in graph theory and generalized inverses.
He has published more than 100 research papers in these areas in reputed
national and international journals and guided three Ph.D. students. He
has written books on Linear Algebra, published by Hindustan Book Agency,
Springer and Cambridge University Press. He wrote a book on Mathematics
for the general reader, in Marathi, which won the state government award
for best literature in Science for 2004.
Prof. Bapat has been on the editorial boards of Linear and Multilinear
Algebra, Electronic Journal of Linear Algebra, India Journal of Pure and
Applied Mathematics and Kerala Mathematical Association Bulletin. He
has been elected Fellow of the Indian Academy of Sciences, Bangalore and
Indian National Science Academy, Delhi.
Prof. Bapat served as President of the Indian Mathematical Society during
its centennial year 2007-2008. For the past several years he has been
actively involved with the Mathematics Olympiad Program in India and
served as the National Coordinator for the Program. Prof. Bapat served as
Head, ISI Delhi Centre, during 2007-2011. He was awarded the J.C. Bose
fellowship in 2009. </div>
</div>
</div>
<div class="fold"> <a class="bar" href="#tab2"> Speaker 2</a>
<div class="dropbox" id='tab2'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere. </div>
</div>
<div class="fold"> <a class="bar" href="#tab3"> Speaker 3</a>
<div class="dropbox" id='tab3'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere. </div>
</div>
<div class="fold"> <a class="bar" href="#tab4"> Speaker 4</a>
<div class="dropbox" id='tab4'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere. </div>
</div>
</div>
<div class="maindrop" style="float: right">
<div class="fold default"> <a class="bar" href="#tab5">Speaker 5</a>
<div class="dropbox" id='tab5'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere. </div>
</div>
<div class="fold"> <a class="bar" href="#tab6"> Speaker 6</a>
<div class="dropbox" id='tab6'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere. </div>
</div>
<div class="fold"> <a class="bar" href="#tab7"> Speaker 7</a>
<div class="dropbox" id='tab7'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere. </div>
</div>
<div class="fold"> <a class="bar" href="#tab8"> Speaker 8</a>
<div class="dropbox" id='tab8'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere. </div>
</div>
</div>
</div>
</body>